feat: added theme toggle button, dependency upgrades, added ability to export to html

Author: CodeDead

README.md

@@ -1,6 +1,6 @@
 # Advanced PortChecker
 
-![Advanced PortChecker](https://i.imgur.com/yoWDImn.png)
+![Advanced PortChecker](https://i.imgur.com/vdt1sXZ.png)
 
 ![GitHub](https://img.shields.io/badge/language-JavaScript+Rust-green)
 ![GitHub](https://img.shields.io/github/license/CodeDead/Advanced-PortChecker)

src-tauri/Cargo.lock

@@ -14,14 +14,16 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import Brightness5Icon from '@mui/icons-material/Brightness5';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
 import InfoIcon from '@mui/icons-material/Info';
 import { useNavigate } from 'react-router-dom';
 import DrawerHeader from '../DrawerHeader';
 import { MainContext } from '../../contexts/MainContextProvider';
-import { openWebSite } from '../../reducers/MainReducer/Actions';
+import { openWebSite, setThemeType } from '../../reducers/MainReducer/Actions';
 
 const drawerWidth = 240;
 
@@ -82,7 +84,8 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
 );
 
 const TopBar = () => {
-  const [state] = useContext(MainContext);
+  const [state, d1] = useContext(MainContext);
+  const { themeType, themeToggle } = state;
 
   const [open, setOpen] = useState(false);
 
@@ -132,6 +135,13 @@ const TopBar = () => {
     handleDrawerClose();
   };
 
+  /**
+   * Change the theme style
+   */
+  const changeThemeStyle = () => {
+    d1(setThemeType(themeType === 'dark' ? 'light' : 'dark'));
+  };
+
   return (
     <>
       <AppBar
@@ -161,6 +171,16 @@ const TopBar = () => {
           >
             {language.applicationName}
           </Typography>
+          <div style={{ flexGrow: 1 }} />
+          {themeToggle ? (
+            <IconButton
+              aria-label={language.theme}
+              color="inherit"
+              onClick={changeThemeStyle}
+            >
+              {themeType === 'dark' ? <Brightness5Icon /> : <Brightness7Icon />}
+            </IconButton>
+          ) : null}
         </Toolbar>
       </AppBar>
       <Drawer variant="permanent" open={open}>

src/components/TopBar/index.jsx

@@ -16,6 +16,7 @@ const threads = localStorage.threads ? parseFloat(localStorage.threads) : 1;
 const timeout = localStorage.timeout ? parseFloat(localStorage.timeout) : 250;
 const noClosed = localStorage.noClosed ? (localStorage.noClosed === 'true') : false;
 const sort = localStorage.sort ? (localStorage.sort === 'true') : true;
+const themeToggle = localStorage.themeToggle ? (localStorage.themeToggle === 'true') : true;
 
 const initState = {
   autoUpdate,
@@ -44,6 +45,7 @@ const initState = {
   noClosed,
   sort,
   scanResults: null,
+  themeToggle,
 };
 
 export const MainContext = createContext(initState);

src/contexts/MainContextProvider/index.jsx

@@ -80,5 +80,6 @@
   "exportType": "Export type",
   "export": "Export",
   "exportSuccessful": "Export successful",
-  "runningLatestVersion": "You are running the latest version."
+  "runningLatestVersion": "You are running the latest version.",
+  "themeToggleInTopBar": "Toggle theme in top bar"
 }

src/languages/en_us.json

@@ -80,5 +80,6 @@
   "exportType": "Tipo de exportación",
   "export": "Exportar",
   "exportSuccessful": "Exportación exitosa",
-  "runningLatestVersion": "Estás ejecutando la última versión."
+  "runningLatestVersion": "Estás ejecutando la última versión.",
+  "themeToggleInTopBar": "Alternar tema en la barra superior"
 }

src/languages/es_es.json

@@ -80,5 +80,6 @@
   "exportType": "Type d'exportation",
   "export": "Exporter",
   "exportSuccessful": "Exportation réussie",
-  "runningLatestVersion": "Vous utilisez la dernière version."
+  "runningLatestVersion": "Vous utilisez la dernière version.",
+  "themeToggleInTopBar": "Basculer le thème dans la barre supérieure"
 }

src/languages/fr_fr.json

@@ -80,5 +80,6 @@
   "exportType": "Export type",
   "export": "Exporteren",
   "exportSuccessful": "Exporteren succesvol",
-  "runningLatestVersion": "U gebruikt de laatste versie."
+  "runningLatestVersion": "U gebruikt de laatste versie.",
+  "themeToggleInTopBar": "Thema toggle in de bovenste balk"
 }

src/languages/nl_nl.json

@@ -80,5 +80,6 @@
   "exportType": "导出类型",
   "export": "出口",
   "exportSuccessful": "导出成功",
-  "runningLatestVersion": "您正在运行最新版本。"
+  "runningLatestVersion": "您正在运行最新版本。",
+  "themeToggleInTopBar": "在顶部栏中切换主题"
 }

src/languages/zh_cn.json

@@ -0,0 +1,13 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}