refactor: Upgrade to the new UI (#521)

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

src/components/layout/layout-item.tsx

@@ -1,32 +1,49 @@
-import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import {
+  alpha,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListItemAvatar,
+  Avatar,
+} from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
 import type { LinkProps } from "react-router-dom";
 
-export const LayoutItem = (props: LinkProps) => {
-  const { to, children } = props;
+interface Props {
+  to: string;
+  children: string;
+  img: string;
+}
+export const LayoutItem = (props: Props) => {
+  const { to, children, img } = props;
 
   const resolved = useResolvedPath(to);
   const match = useMatch({ path: resolved.pathname, end: true });
   const navigate = useNavigate();
 
   return (
-    <ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto", padding: "1px 0px" }}>
+    <ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto", padding: "4px 0px" }}>
       <ListItemButton
         selected={!!match}
         sx={[
           {
-            borderRadius: 3,
-            marginLeft: 1,
-            marginRight: 1,
-            textAlign: "center",
-            "& .MuiListItemText-primary": { color: "text.secondary" },
+            borderRadius: 2,
+            marginLeft: 1.5,
+            paddingLeft: 1,
+            paddingRight: 1,
+            marginRight: 1.5,
+            textAlign: "left",
+            "& .MuiListItemText-primary": {
+              color: "text.primary",
+              fontWeight: "700",
+            },
           },
           ({ palette: { mode, primary } }) => {
             const bgcolor =
               mode === "light"
                 ? alpha(primary.main, 0.15)
                 : alpha(primary.main, 0.35);
-            const color = mode === "light" ? primary.main : primary.light;
+            const color = mode === "light" ? "#1f1f1f" : "#ffffff";
 
             return {
               "&.Mui-selected": { bgcolor },
@@ -37,6 +54,9 @@ export const LayoutItem = (props: LinkProps) => {
         ]}
         onClick={() => navigate(to)}
       >
+        <ListItemAvatar sx={{ marginRight: -0.5 }}>
+          <Avatar src={img}></Avatar>
+        </ListItemAvatar>
         <ListItemText primary={children} />
       </ListItemButton>
     </ListItem>

src/components/layout/layout-traffic.tsx

@@ -89,7 +89,7 @@ export const LayoutTraffic = () => {
 
   return (
     <Box
-      width="110px"
+      width="188px"
       position="relative"
       onClick={trafficRef.current?.toggleStyle}
     >

src/components/layout/use-custom-theme.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
-import { alpha, createTheme, Theme } from "@mui/material";
+import { alpha, createTheme, Shadows, Theme } from "@mui/material";
 import { appWindow } from "@tauri-apps/api/window";
 import { atomThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
@@ -59,6 +59,7 @@ export const useCustomTheme = () => {
             paper: dt.background_color,
           },
         },
+        shadows: Array(25).fill("none") as Shadows,
         typography: {
           // todo
           fontFamily: setting.font_family
@@ -87,11 +88,14 @@ export const useCustomTheme = () => {
     }
 
     // css
-    const backgroundColor = mode === "light" ? "#ffffff" : "#0B121C";
+    const backgroundColor = mode === "light" ? "#f0f0f0" : "#2e303d";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
+    const dividerColor =
+      mode === "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.06)";
 
     const rootEle = document.documentElement;
+    rootEle.style.setProperty("--divider-color", dividerColor);
     rootEle.style.setProperty("--background-color", backgroundColor);
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);