added tooltips and buttons

2022-06-14 22:43:48 +02:00
parent 826f92f9e3
commit 3f56a2cb3b
9 changed files with 581 additions and 43 deletions
--- a/frontend/globals.d.ts
+++ b/frontend/globals.d.ts
@@ -0,0 +1,5 @@
+// declaration.d.ts
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
--- a/frontend/src/components/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { RegexAddForm } from '../js/models';
@@ -78,13 +78,16 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
            {...form.getInputProps('regex')}
        />
        <Space h="md" />
+        <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" transitionDuration={300} transitionTimingFunction="ease"  
+                color="gray" wrapLines width={220} withArrow position='right'>      
            <Switch
                label="Use percentage encoding for binary values"
                {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
            />
+        </Tooltip>
        <Space h="md" />
        <Switch
-            label="Match the exactly the regex"
+            label="Match exactly the regex"
            {...form.getInputProps('regex_exact', { type: 'checkbox' })}
        />
        <Space h="md" />
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput } from '@mantine/core';
+import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip } from '@mantine/core';
 import style from "./Header.module.scss";
 import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils';
 import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
@@ -72,19 +72,16 @@ function Header() {
    setLoadingBtn(false)
  }

-
-
  const {srv_id} = useParams()
-
-  
-
  const [open, setOpen] = useState(false);
  const closeModal = () => {setOpen(false);}

  return <div id="header-page" className={style.header}>
-        <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px" }}>
-          <Image src="/header-logo.png" alt="Firegex logo" />
+        <FloatingTooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="dark" position="right" >
+          <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
+            <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
          </div>
+        </FloatingTooltip>
        <div className="flex-spacer" />
        <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
        <Badge style={{marginLeft:"10px"}} size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
@@ -98,13 +95,23 @@ function Header() {
        </Menu>
        <div style={{marginLeft:"20px"}}></div>
        { location.pathname !== "/"?
+          <Tooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal">
            <ActionIcon color="teal" style={{marginRight:"10px"}}
              size="xl" radius="md" variant="filled"
              onClick={()=>navigator("/")}>
              <AiFillHome size="25px" />
            </ActionIcon>
+          </Tooltip>
        :null}
+        { location.pathname !== "/"?
+          <Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+          </Tooltip>
+        : <Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+          </Tooltip>
+      }
+        
        {srv_id?
          <Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
            <AddNewRegex closePopup={closeModal} service={srv_id} />
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -1,4 +1,4 @@
-import { Grid, Text, Title, Badge, Space, ActionIcon } from '@mantine/core';
+import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { RegexFilter } from '../../js/models';
 import { deleteregex, errorNotify, getHumanReadableRegex, okNotify } from '../../js/utils';
@@ -43,7 +43,9 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
            <Text className={style.regex_text}> {regex_expr}</Text>
          </Grid.Col>
          <Grid.Col span={2}>
+            <Tooltip label="Delete regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
              <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
+            </Tooltip>
            </Grid.Col>
          <Grid.Col span={2} />
          <Grid.Col className='center-flex-row' span={4}>
--- a/frontend/src/components/ServiceRow/index.tsx
+++ b/frontend/src/components/ServiceRow/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Grid, Space, Title } from '@mantine/core';
+import { ActionIcon, Badge, Grid, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
 import { Service } from '../../js/models';
@@ -8,7 +8,7 @@ import YesNoModal from '../YesNoModal';
 import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils';

 //"status":"stop"/"wait"/"active"/"pause",
-function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
+function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ service:Service, onClick?:()=>void, additional_buttons?:any, add_new_regex?:any }) {

    let status_color = "gray";
    switch(service.status){
@@ -73,6 +73,9 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
                </div>
            </Grid.Col>
            <Grid.Col className="center-flex" span={8}>
+                <div className="center-flex">
+                    {add_new_regex}
+                </div>
                <div className='flex-spacer'></div>
                <div className="center-flex-row">
                    <Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="xl" variant="filled">Status: <u>{service.status}</u></Badge>
@@ -83,23 +86,30 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
                <div className="center-flex">
                    {additional_buttons}
                    {["pause","wait"].includes(service.status)?
+                        
+                        <Tooltip label="Stop service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="orange">
                            <ActionIcon color="yellow" loading={buttonLoading}
                            onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
                            disabled={service.status === "stop"}>
                                <FaStop size="20px" />
-                        </ActionIcon>:
+                            </ActionIcon>
+                        </Tooltip>:
+                        <Tooltip label="Pause service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
                            <ActionIcon color="red" loading={buttonLoading}
                                    onClick={pauseService} size="xl" radius="md" variant="filled"
                                    disabled={service.status === "stop"}>
                                <FaPause size="20px" />
                            </ActionIcon>
+                        </Tooltip>
                    }
                    
                    <Space w="md"/>
+                    <Tooltip label="Start service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal">
                        <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
                                    variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
                            <FaPlay size="20px" />
                        </ActionIcon>
+                    </Tooltip>
                </div>
                <Space w="xl" /><Space w="xl" />
                {onClick?<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size="45px" />:null}
@@ -107,8 +117,8 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
            </Grid.Col>
        </Grid>
        <YesNoModal
-            title='Are you sure to stop this service!'
-            description={`You are going to delete the service '${service.id}', causing the stopping of the firewall. This will cause the shutdown of your service ⚠️!`}
+            title='Are you sure to stop this service?'
+            description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service ⚠️!`}
            onClose={()=>setStopModal(false)}
            action={stopService}
            opened={stopModal}
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -33,7 +33,7 @@ function HomePage() {
        <LoadingOverlay visible={loader} />
        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
            navigator("/"+srv.id)
-        }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the add button above</Title></>}
+        }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title></>}
    </div>
 }

--- a/frontend/src/pages/ServiceDetails.tsx
+++ b/frontend/src/pages/ServiceDetails.tsx
@@ -1,9 +1,11 @@
-import { ActionIcon, Grid, LoadingOverlay, Space, Title } from '@mantine/core';
+import { ActionIcon, Grid, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { BsTrashFill } from 'react-icons/bs';
 import { useNavigate, useParams } from 'react-router-dom';
 import RegexView from '../components/RegexView';
 import ServiceRow from '../components/ServiceRow';
+import AddNewRegex from '../components/AddNewRegex';
+import { BsPlusLg } from "react-icons/bs";
 import YesNoModal from '../components/YesNoModal';
 import { RegexFilter, Service, update_freq } from '../js/models';
 import { deleteservice, errorNotify, okNotify, regenport, serviceinfo, serviceregexlist } from '../js/utils';
@@ -24,6 +26,8 @@ function ServiceDetails() {

    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
    const [loader, setLoader] = useState(true);
+    const [open, setOpen] = useState(false);
+    const closeModal = () => {setOpen(false);}

    const navigator = useNavigate()

@@ -80,17 +84,48 @@ function ServiceDetails() {
    return <div>
        <LoadingOverlay visible={loader} />
        <ServiceRow service={serviceInfo} additional_buttons={<>
+            <Tooltip label="Delete service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">           
                <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
+            </Tooltip>
            <Space w="md"/>
+            <Tooltip label="Change proxy port" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">           
                <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
+            </Tooltip>
            <Space w="md"/>
+        </>} add_new_regex={<>
+            <Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+                <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+            </Tooltip>
        </>}></ServiceRow>
+        
        {regexesList.length === 0? 
-            <><Space h="xl" /> <Title className='center-flex' order={3}>No regex found for this service! Add one clicking the add button above</Title></>:
+            <><Space h="xl" /> <Title className='center-flex' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
+            <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                }}>
+                <Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+                </Tooltip>
+            </div>
+            
+            </>
+            
+            :
            <Grid>
                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} span={6}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
            </Grid>
        }
+
+        {srv_id?
+          <Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
+            <AddNewRegex closePopup={closeModal} service={srv_id} />
+          </Modal>:
+          null
+        }
+
        <YesNoModal
            title='Are you sure to delete this service?'
            description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service ⚠️!`}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -21,6 +21,7 @@
    "jsx": "react-jsx"
  },
  "include": [
-    "src"
+    "src", 
+    "globals.d.ts" //configured .d.ts file 
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,475 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@babel/runtime": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
+      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
+      "integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
+    "@mantine/core": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-4.2.9.tgz",
+      "integrity": "sha512-25krgKF7FUFDsF5IYk+A/7GjgAZFzEcaFmGvscXS/7ccOickBmXzENwY9eJpv+MDo/7Sj5eiS0ZBi+WN27tdcw==",
+      "requires": {
+        "@mantine/styles": "4.2.9",
+        "@popperjs/core": "^2.9.3",
+        "@radix-ui/react-scroll-area": "^0.1.1",
+        "react-popper": "^2.2.5",
+        "react-textarea-autosize": "^8.3.2"
+      }
+    },
+    "@mantine/hooks": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-4.2.9.tgz",
+      "integrity": "sha512-oLtlSXkl99vPGBTR9yoVCWoCQ25Bc4WhPci31iERMLMM/0fz85CZayQcAC4etq6un6rDiRNu6jq0YB1S5stmPg=="
+    },
+    "@mantine/notifications": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-4.2.9.tgz",
+      "integrity": "sha512-t19JCCBmJl9/vXlE4vLiz9WqssvNL50MFgJ30MwI+Rc36xO3PnvY3LX3hULKmqOtOlVdTcWz2RwbPkVjM8/c7A==",
+      "requires": {
+        "react-transition-group": "^4.4.2"
+      }
+    },
+    "@mantine/styles": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-4.2.9.tgz",
+      "integrity": "sha512-UT5m1412N20HPl+Mg2zTN7gP34J1GIa3o7eQ+fHThAQkAMm/vBehzX8nkbdxwyYkwuu6+/4kizcbM/Op4jMI3g==",
+      "requires": {
+        "@emotion/cache": "11.7.1",
+        "@emotion/react": "11.7.1",
+        "@emotion/serialize": "1.0.2",
+        "@emotion/utils": "1.0.0",
+        "clsx": "^1.1.1",
+        "csstype": "3.0.9"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.9",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
+          "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
+        }
+      }
+    },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
+    "@radix-ui/number": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-0.1.0.tgz",
+      "integrity": "sha512-rpf6QiOWLHAkM4FEMYu9i+5Jr8cKT893+R4mPpcdsy4LD7omr9JfdOqj/h/xPA5+EcVrpMMlU6rrRYpUB5UI8g==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/primitive": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-0.1.0.tgz",
+      "integrity": "sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-compose-refs": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz",
+      "integrity": "sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-context": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-0.1.1.tgz",
+      "integrity": "sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-presence": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-0.1.2.tgz",
+      "integrity": "sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "0.1.0"
+      }
+    },
+    "@radix-ui/react-primitive": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz",
+      "integrity": "sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "0.1.2"
+      }
+    },
+    "@radix-ui/react-scroll-area": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-0.1.4.tgz",
+      "integrity": "sha512-QHxRsjy+hsHwQYJ9cCNgSJ5+6ioZu1KhwD1UOXoHNciuFGMX08v+uJPKXIz+ySv03Rx6cOz6f/Fk5aPHRMFi/A==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "0.1.0",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-callback-ref": "0.1.0",
+        "@radix-ui/react-use-direction": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "0.1.0"
+      }
+    },
+    "@radix-ui/react-slot": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz",
+      "integrity": "sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "0.1.0"
+      }
+    },
+    "@radix-ui/react-use-callback-ref": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz",
+      "integrity": "sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-use-direction": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz",
+      "integrity": "sha512-NajpY/An9TCPSfOVkgWIdXJV+VuWl67PxB6kOKYmtNAFHvObzIoh8o0n9sAuwSAyFCZVq211FEf9gvVDRhOyiA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-use-layout-effect": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz",
+      "integrity": "sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/react": {
+      "version": "18.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
+      "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
+      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "big.js": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+      "dev": true
+    },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
+    "colour": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
+      "integrity": "sha512-Rel466v0EnmKPcsxHo91L4kgPs/6XF7Pu2LJNszq9lXYwi5CFWEeIiRaTX5ym7PPMdj4udDHkLSVC1//JVkZQg==",
+      "dev": true
+    },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "emojis-list": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+      "integrity": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==",
+      "dev": true
+    },
+    "graceful-fs": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.4.tgz",
+      "integrity": "sha512-FJvXqYOJo21W86xfBsnT3Ev1hpRWRNdFfNEYSi/uVq+QmNADuhjwzoLtWc/p6lcqLA+l/g9GucxSHQrmOyJJEg==",
+      "dev": true
+    },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "json5": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+      "integrity": "sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==",
+      "dev": true
+    },
+    "loader-utils": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.16.tgz",
+      "integrity": "sha512-dd4/ZWk+/kNr/GHdKCOGamC6WTfmi6yFjWTJ+l1nTNHut+y4RxGWuWtOzWWXEmmvunTBspjvTsp8RsjhasOxDA==",
+      "dev": true,
+      "requires": {
+        "big.js": "^3.1.3",
+        "emojis-list": "^2.0.0",
+        "json5": "^0.5.0",
+        "object-assign": "^4.0.1"
+      }
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg=="
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
+    "react-textarea-autosize": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
+      "integrity": "sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
+    "typings-for-css-modules-loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/typings-for-css-modules-loader/-/typings-for-css-modules-loader-1.7.0.tgz",
+      "integrity": "sha512-Mp7zDrcUmbUKl3JTLamTsMX+lntMotEm5I05j2RHB5EHb0WL1dAXlynpdlGR5Ye/QTvtL5w+RGB2jP32YoUpZw==",
+      "dev": true,
+      "requires": {
+        "colour": "0.7.1",
+        "graceful-fs": "4.1.4",
+        "loader-utils": "0.2.16"
+      }
+    },
+    "use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ=="
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
+    },
+    "use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    }
+  }
+}