add: graphic improvements x2

frontend/src/App.tsx

@@ -69,7 +69,7 @@ function App() {
       <Space h="md" />
       <Title order={4} align="center">Error communicating with backend</Title>
       <Space h="md" />
-      Errore: {reqError}
+      Error: {reqError}
       <Space h="xl" />
       <Loader />
     </div>

frontend/src/components/AddNewRegex.tsx

@@ -1,10 +1,11 @@
-import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal, Alert } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useState } from 'react';
 import { RegexAddForm } from '../js/models';
 import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
 import FilterTypeSelector from './FilterTypeSelector';
+import { AiFillWarning } from 'react-icons/ai';
 
 type RegexAddInfo = {
     regex:string,
@@ -103,6 +104,10 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
                 color="gray"
                 {...form.getInputProps('type')}
             />
+            {form.values.type == "whitelist"?<><Space h="md" />
+            <Alert variant="light" color="yellow" radius="lg" title="You are using whitelists" icon={<AiFillWarning />}>
+                Using whitelist means that EVERY packet that doesn't match the regex will be DROPPED... In most cases this cause the service interruption.
+            </Alert></>:null}
             <Group position="right" mt="md">
                 <Button loading={submitLoading} type="submit">Add Filter</Button>
             </Group>

frontend/src/components/Footer/index.tsx

@@ -1,11 +1,12 @@
-import { Footer } from '@mantine/core';
+import { Footer, Space } from '@mantine/core';
-import React from 'react';
+import image from "./pwnzer0tt1.svg"
 
 import style from "./index.module.scss";
+import { Link } from 'react-router-dom';
 
 function FooterPage() {
   return <Footer id="footer" height={70} className={style.footer}>
-        Made by Pwnzer0tt1
+        <img src={image} width={25} height={25} /> <Space w="xs" />Made by <div style={{marginLeft:"5px"}} /> <Link to="https://pwnzer0tt1.it">Pwnzer0tt1</Link> <Space w="xs" /> <img src={image} width={25} height={25} /> 
   </Footer>
 }
 

frontend/src/pages/NFRegex/ServiceDetails.tsx

@@ -24,7 +24,7 @@ function ServiceDetailsNFRegex() {
         {(!regexesList.data || regexesList.data.length == 0)?<>
                 <Space h="xl" />
                 <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
-                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
+                <Space h="xl" /> <Space h="xl" />
                 <div className='center-flex'>
                     <Tooltip label="Add a new regex" zIndex={0} color="blue" opened={tooltipAddRegexOpened}>
                         <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"

frontend/src/pages/NFRegex/index.tsx

@@ -67,7 +67,7 @@ function NFRegex({ children }: { children: any }) {
             {(services.data && services.data?.length > 0)?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
                 navigator("/nfregex/"+srv.service_id)
             }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
-                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+                <Space h="xl" /> <Space h="xl" /> 
                 <div className='center-flex'>
                     <Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
                         <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"

frontend/src/pages/PortHijack/index.tsx

@@ -51,7 +51,7 @@ function PortHijack() {
             <LoadingOverlay visible={services.isLoading} />
             {(services.data && services.data.length > 0) ?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<>
             <Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
-                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+                <Space h="xl" /> <Space h="xl" /> 
                 <div className='center-flex'>
                     <Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
                         <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"

frontend/src/pages/RegexProxy/ServiceDetails.tsx

@@ -24,7 +24,7 @@ function ServiceDetailsProxyRegex() {
         {(!regexesList.data || regexesList.data.length == 0)?<>
                 <Space h="xl" />
                 <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
-                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
+                <Space h="xl" /> <Space h="xl" /> 
                 <div className='center-flex'>
                     <Tooltip label="Add a new regex" zIndex={0} color="blue" opened={tooltipAddRegexOpened}>
                         <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"

frontend/src/pages/RegexProxy/index.tsx

@@ -68,7 +68,7 @@ function RegexProxy({ children }: { children: any }) {
             {(services.data && services.data?.length > 0)?services.data.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
                 navigator("/regexproxy/"+srv.id)
             }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
-                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+                <Space h="xl" /> <Space h="xl" />
                 <div className='center-flex'>
                     <Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
                         <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"