refactor: Upgrade to the new UI (#521)

Co-authored-by: MystiPanda <mystipanda@proton.me>

src/pages/_layout.tsx

@@ -13,6 +13,9 @@ import { routers } from "./_routers";
 import { getAxios } from "@/services/api";
 import { useVerge } from "@/hooks/use-verge";
 import LogoSvg from "@/assets/image/logo.svg?react";
+import LogoSvg_dark from "@/assets/image/logo_dark.svg?react";
+import { atomThemeMode } from "@/services/states";
+import { useRecoilState } from "recoil";
 import { BaseErrorBoundary, Notice } from "@/components/base";
 import { LayoutItem } from "@/components/layout/layout-item";
 import { LayoutControl } from "@/components/layout/layout-control";
@@ -31,8 +34,10 @@ dayjs.extend(relativeTime);
 const OS = getSystem();
 
 const Layout = () => {
+  const [mode] = useRecoilState(atomThemeMode);
+  console.log(mode);
+  const isDark = mode === "light" ? false : true;
   const { t } = useTranslation();
-
   const { theme } = useCustomTheme();
 
   const { verge } = useVerge();
@@ -125,14 +130,17 @@ const Layout = () => {
         >
           <div className="layout__left" data-windrag>
             <div className="the-logo" data-windrag>
-              <LogoSvg />
-
+              {!isDark ? <LogoSvg /> : <LogoSvg_dark />}
               {!portableFlag && <UpdateButton className="the-newbtn" />}
             </div>
 
             <List className="the-menu">
               {routers.map((router) => (
-                <LayoutItem key={router.label} to={router.link}>
+                <LayoutItem
+                  key={router.label}
+                  to={router.link}
+                  img={router.img}
+                >
                   {t(router.label)}
                 </LayoutItem>
               ))}

src/pages/_routers.tsx

@@ -10,36 +10,43 @@ export const routers = [
   {
     label: "Label-Proxies",
     link: "/",
+    img: "../../assets/image/itemicon/proxies.svg",
     ele: ProxiesPage,
   },
   {
     label: "Label-Profiles",
     link: "/profile",
+    img: "../../assets/image/itemicon/profiles.svg",
     ele: ProfilesPage,
   },
   {
     label: "Label-Connections",
     link: "/connections",
+    img: "../../assets/image/itemicon/connections.svg",
     ele: ConnectionsPage,
   },
   {
     label: "Label-Rules",
     link: "/rules",
+    img: "../../assets/image/itemicon/rules.svg",
     ele: RulesPage,
   },
   {
     label: "Label-Logs",
     link: "/logs",
+    img: "../../assets/image/itemicon/logs.svg",
     ele: LogsPage,
   },
   {
     label: "Label-Test",
     link: "/test",
+    img: "../../assets/image/itemicon/test.svg",
     ele: TestPage,
   },
   {
     label: "Label-Settings",
     link: "/settings",
+    img: "../../assets/image/itemicon/settings.svg",
     ele: SettingsPage,
   },
 ];

src/pages/_theme.tsx

@@ -3,15 +3,15 @@ const OS = getSystem();
 
 // default theme setting
 export const defaultTheme = {
-  primary_color: "#1867c0",
-  secondary_color: "#3a88bb",
-  primary_text: "#1d1d1f",
-  secondary_text: "#424245",
-  info_color: "#0288d1",
-  error_color: "#d32f2f",
-  warning_color: "#ed6c02",
-  success_color: "#2e7d32",
-  background_color: "#ffffff",
+  primary_color: "#007AFF",
+  secondary_color: "#FFCC00",
+  primary_text: "#000000",
+  secondary_text: "rgba(60, 60, 67, 0.60)",
+  info_color: "#007AFF",
+  error_color: "#FF3B30",
+  warning_color: "#FF9500",
+  success_color: "#34C759",
+  background_color: "#f5f5f5",
   font_family: `"Roboto", "Helvetica", "Arial", sans-serif, ${
     OS === "windows" ? "twemoji mozilla" : ""
   }`,
@@ -20,7 +20,13 @@ export const defaultTheme = {
 // dark mode
 export const defaultDarkTheme = {
   ...defaultTheme,
-  primary_text: "#E8E8ED",
-  background_color: "#181818",
-  secondary_text: "#bbbbbb",
+  primary_color: "#0A84FF",
+  secondary_color: "#FF9F0A",
+  primary_text: "#ffffff",
+  background_color: "#2e303d",
+  secondary_text: "rgba(235, 235, 245, 0.60)",
+  info_color: "#0A84FF",
+  error_color: "#FF453A",
+  warning_color: "#FF9F0A",
+  success_color: "#30D158",
 };

src/pages/settings.tsx

@@ -7,6 +7,9 @@ import { openWebUrl } from "@/services/cmds";
 import SettingVerge from "@/components/setting/setting-verge";
 import SettingClash from "@/components/setting/setting-clash";
 import SettingSystem from "@/components/setting/setting-system";
+import { atomThemeMode } from "@/services/states";
+import { useRecoilState } from "recoil";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 const SettingPage = () => {
   const { t } = useTranslation();
@@ -19,12 +22,17 @@ const SettingPage = () => {
     return openWebUrl("https://github.com/clash-verge-rev/clash-verge-rev");
   });
 
+  const [mode] = useRecoilState(atomThemeMode);
+  console.log(mode);
+  const isDark = mode === "light" ? false : true;
+  const { theme } = useCustomTheme();
+
   return (
     <BasePage
       title={t("Settings")}
       header={
         <IconButton
-          size="small"
+          size="medium"
           color="inherit"
           title="@clash-verge-rev/clash-verge-rev"
           onClick={toGithubRepo}
@@ -33,17 +41,34 @@ const SettingPage = () => {
         </IconButton>
       }
     >
-      <Grid container spacing={{ xs: 1, lg: 1 }}>
+      <Grid container spacing={{ xs: 1.5, lg: 1.5 }}>
         <Grid item xs={12} md={6}>
-          <Box sx={{ borderRadius: 1, boxShadow: 2, marginBottom: 1 }}>
+          <Box
+            sx={{
+              borderRadius: 2,
+              marginBottom: 1.5,
+              backgroundColor: isDark ? "#282a36" : "#ffffff",
+            }}
+          >
             <SettingSystem onError={onError} />
           </Box>
-          <Box sx={{ borderRadius: 1, boxShadow: 2 }}>
+          <Box
+            sx={{
+              borderRadius: 2,
+              backgroundColor: isDark ? "#282a36" : "#ffffff",
+            }}
+          >
             <SettingClash onError={onError} />
           </Box>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Box sx={{ borderRadius: 1, boxShadow: 2 }}>
+          <Box
+            sx={{
+              borderRadius: 2,
+              marginBottom: 1.5,
+              backgroundColor: isDark ? "#282a36" : "#ffffff",
+            }}
+          >
             <SettingVerge onError={onError} />
           </Box>
         </Grid>