Modulating frontend

frontend/src/components/Header/index.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { ActionIcon, Badge, Divider, Image, Menu, Space, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
+import { ActionIcon, Divider, Image, Menu, Tooltip, FloatingTooltip } from '@mantine/core';
 import style from "./index.module.scss";
-import { errorNotify, eventUpdateName, logout, nfregex } from '../../js/utils';
-import { GeneralStats } from '../../js/models';
+import { errorNotify, logout } from '../../js/utils';
 import { BsPlusLg } from "react-icons/bs"
 import { AiFillHome } from "react-icons/ai"
 import { useNavigate, useParams } from 'react-router-dom';
@@ -11,26 +10,13 @@ import AddNewService from '../NFRegex/AddNewService';
 import { FaLock } from 'react-icons/fa';
 import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
 import { ImExit } from 'react-icons/im';
-import { useWindowEvent } from '@mantine/hooks';
 import ResetPasswordModal from './ResetPasswordModal';
 import ResetModal from './ResetModal';
 
 
 function Header() {
   
-  const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
-
   const navigator = useNavigate()
-
-  const updateInfo = () => {
-    nfregex.stats().then(res => {
-      setGeneralStats(res)
-    }).catch(
-      err => errorNotify("General Info Auto-Update failed!", err.toString())
-    )
-  }
-
-  useWindowEvent(eventUpdateName, updateInfo)
   
   const logout_action = () => {
     logout().then(r => {
@@ -51,34 +37,14 @@ function Header() {
   const closeModal = () => {setOpen(false);}
 
   return <div id="header-page" className={style.header}>
-        <FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
-          <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
+      
+        <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
+          <FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
             <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
-          </div>
-        </FloatingTooltip>
-        <div className="flex-spacer" />
-        
-        <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-          <div>
-            <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
-              <Space h="xs" />
-            <Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
-              <Space h="xs" />
-            <Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
-          </div>
-        </MediaQuery>  
-
-        <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
-          <div className="center-flex">
-          <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
-            <Space w="xs" />
-          <Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
-            <Space w="xs" />
-          <Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
-          </div>
-        </div></MediaQuery>  
-
+          </FloatingTooltip>
+        </div>
         
+        <div className="flex-spacer" />        
       
         <div style={{marginLeft:"20px"}}></div>
         <Menu>
@@ -122,7 +88,6 @@ function Header() {
         }
         <ResetPasswordModal opened={changePasswordModal} onClose={() => setChangePasswordModal(false)} />
         <ResetModal opened={resetFiregexModal} onClose={() => setResetFiregexModal(false)} />
-        
         <div style={{marginLeft:"40px"}}></div>
   </div>
 }

frontend/src/components/MainLayout.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import { Container, Space } from '@mantine/core';
+import { Container, Space, Tabs } from '@mantine/core';
 import Footer from './Footer';
 import Header from './Header';
 
 function MainLayout({ children }:{ children:any }) {
-  return <>
-      
-            <Header/>
-            <Space h="xl" />
-            <Container size="xl" style={{minHeight:"57.5vh"}}>
-                {children}
-            </Container>
-            <Space h="xl" />
-            <Footer />
-
+  return <>  
+      <Header/>
+      <Tabs grow variant="pills">
+        <Tabs.Tab label="Regex Prox"></Tabs.Tab>
+        <Tabs.Tab label="Port Hijacking"></Tabs.Tab>
+        <Tabs.Tab label="Netfilter regex"></Tabs.Tab>
+      </Tabs>
+      <Space h="xl" />
+      <Container size="md" style={{minHeight:"57.5vh"}}>
+          {children}
+      </Container>
+      <Space h="xl" />
+      <Footer />
   </>
 }
 

frontend/src/components/NFRegex/RegexView/index.module.scss

@@ -7,7 +7,8 @@
 }
 
 .regex_text{
-    padding: 10px;
+    padding: 6px;
     background-color: $third_color;
-    border-radius: 15px;
+    border-radius: 8px;
+    margin: 6px;
 }

frontend/src/components/NFRegex/RegexView/index.tsx

@@ -45,8 +45,8 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
 
   return <div className={style.box}>
         <Grid>
-          <Grid.Col span={2}>
-            <Title order={2} style={{color:"#FFF"}}>Regex:</Title> 
+          <Grid.Col span={2} className="center-flex">
+            <Title order={4}>Regex:</Title> 
           </Grid.Col>
           <Grid.Col span={8}>
             <Text className={style.regex_text}> {regex_expr}</Text>