Adjust styles

src/components/base/base-notice.tsx

@@ -1,19 +1,23 @@
 import { createRoot } from "react-dom/client";
-import { ReactNode, useState } from "react";
+import { ReactNode, useState, useEffect } from "react";
 import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
 import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
-
+import { useVerge } from "@/hooks/use-verge";
+import { appWindow } from "@tauri-apps/api/window";
 interface InnerProps {
   type: string;
   duration?: number;
   message: ReactNode;
+  isDark?: boolean;
   onClose: () => void;
 }
 
 const NoticeInner = (props: InnerProps) => {
   const { type, message, duration = 1500, onClose } = props;
   const [visible, setVisible] = useState(true);
-
+  const [isDark, setIsDark] = useState(false);
+  const { verge } = useVerge();
+  const { theme_mode } = verge ?? {};
   const onBtnClose = () => {
     setVisible(false);
     onClose();
@@ -22,6 +26,26 @@ const NoticeInner = (props: InnerProps) => {
     if (reason !== "clickaway") onBtnClose();
   };
 
+  useEffect(() => {
+    const themeMode = ["light", "dark", "system"].includes(theme_mode!)
+      ? theme_mode!
+      : "light";
+
+    if (themeMode !== "system") {
+      setIsDark(themeMode === "dark");
+      return;
+    }
+
+    appWindow.theme().then((m) => m && setIsDark(m === "dark"));
+    const unlisten = appWindow.onThemeChanged((e) =>
+      setIsDark(e.payload === "dark")
+    );
+
+    return () => {
+      unlisten.then((fn) => fn());
+    };
+  }, [theme_mode]);
+
   const msgElement =
     type === "info" ? (
       message
@@ -46,7 +70,13 @@ const NoticeInner = (props: InnerProps) => {
       autoHideDuration={duration}
       onClose={onAutoClose}
       message={msgElement}
-      sx={{ maxWidth: 360 }}
+      sx={{
+        maxWidth: 360,
+        ".MuiSnackbarContent-root": {
+          bgcolor: isDark ? "#50515C" : "#ffffff",
+          color: isDark ? "#ffffff" : "#000000",
+        },
+      }}
       TransitionComponent={(p) => <Slide {...p} direction="left" />}
       transitionDuration={200}
       action={
@@ -61,9 +91,9 @@ const NoticeInner = (props: InnerProps) => {
 interface NoticeInstance {
   (props: Omit<InnerProps, "onClose">): void;
 
-  info(message: ReactNode, duration?: number): void;
-  error(message: ReactNode, duration?: number): void;
-  success(message: ReactNode, duration?: number): void;
+  info(message: ReactNode, duration?: number, isDark?: boolean): void;
+  error(message: ReactNode, duration?: number, isDark?: boolean): void;
+  success(message: ReactNode, duration?: number, isDark?: boolean): void;
 }
 
 let parent: HTMLDivElement = null!;

src/components/layout/layout-item.tsx

@@ -30,7 +30,6 @@ export const LayoutItem = (props: Props) => {
             paddingLeft: 1.5,
             paddingRight: 1,
             marginRight: 1.25,
-            textAlign: "left",
             "& .MuiListItemText-primary": {
               color: "text.primary",
               fontWeight: "700",

src/components/layout/layout-traffic.tsx

@@ -88,11 +88,7 @@ export const LayoutTraffic = () => {
   };
 
   return (
-    <Box
-      width="150px"
-      position="relative"
-      onClick={trafficRef.current?.toggleStyle}
-    >
+    <Box position="relative" onClick={trafficRef.current?.toggleStyle}>
       {trafficGraph && pageVisible && (
         <div style={{ width: "100%", height: 60, marginBottom: 6 }}>
           <TrafficGraph ref={trafficRef} />

src/components/profile/profile-box.tsx

@@ -21,23 +21,34 @@ export const ProfileBox = styled(Box)(
       "dark-false": text.primary,
     }[key]!;
 
-    const borderLeft = {
-      "light-true": `3px solid ${primary.main}`,
-      "light-false": "none",
-      "dark-true": `3px solid ${primary.main}`,
-      "dark-false": "none",
+    const borderSelect = {
+      "light-true": {
+        borderLeft: `3px solid ${primary.main}`,
+        width: `calc(100% + 3px)`,
+        marginLeft: `-3px`,
+      },
+      "light-false": {
+        width: "100%",
+      },
+      "dark-true": {
+        borderLeft: `3px solid ${primary.main}`,
+        width: `calc(100% + 3px)`,
+        marginLeft: `-3px`,
+      },
+      "dark-false": {
+        width: "100%",
+      },
     }[key];
 
     return {
       position: "relative",
-      width: "100%",
       display: "block",
       cursor: "pointer",
       textAlign: "left",
       padding: "8px 16px",
       boxSizing: "border-box",
       backgroundColor,
-      borderLeft,
+      ...borderSelect,
       borderRadius: "8px",
       color,
       "& h2": { color: h2color },

src/components/proxy/proxy-render.tsx

@@ -113,7 +113,7 @@ export const ProxyRender = (props: RenderProps) => {
   if (type === 1 && !group.hidden) {
     return (
       <ProxyHead
-        sx={{ pl: indent ? 4.5 : 2.5, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
+        sx={{ pl: 2, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
         groupName={group.name}
         headState={headState!}
         onLocation={() => onLocation(group)}
@@ -130,7 +130,7 @@ export const ProxyRender = (props: RenderProps) => {
         proxy={proxy!}
         selected={group.now === proxy?.name}
         showType={headState?.showType}
-        sx={{ py: 0, pl: indent ? 4 : 2 }}
+        sx={{ py: 0, pl: 1 }}
         onClick={() => onChangeProxy(group, proxy!)}
       />
     );
@@ -141,7 +141,7 @@ export const ProxyRender = (props: RenderProps) => {
       <Box
         sx={{
           py: 2,
-          pl: indent ? 4.5 : 0,
+          pl: 0,
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
@@ -161,7 +161,7 @@ export const ProxyRender = (props: RenderProps) => {
           height: 56,
           display: "grid",
           gap: 1,
-          pl: indent ? 4 : 2,
+          pl: 2,
           pr: 2,
           pb: 1,
           gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,