Adjust styles

src/assets/styles/layout.scss

@@ -21,23 +21,23 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
-    // border-right: 1px solid var(--divider-color);
+    border-right: 1px solid var(--divider-color);
     // background-color: var(--background-color-alpha);
 
     // $maxLogo: 100px;
 
     .the-logo {
       position: relative;
-      flex: 1 0 47px;
+      flex: 1 0 58px;
       // width: 100%;
       display: flex;
       height: 100%;
-      padding: 0px 15px;
+      padding: 0px 20px;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
       align-self: stretch;
-      // border-bottom: 1px solid var(--divider-color);
+      border-bottom: 1px solid var(--divider-color);
       // max-width: $maxLogo + 32px;
       // max-height: $maxLogo;
       // margin: 0 auto;
@@ -71,6 +71,7 @@
       flex: 1 1 80%;
       overflow-y: auto;
       margin-bottom: 0px;
+      padding-top: 4px;
     }
 
     .the-traffic {
@@ -78,7 +79,7 @@
 
       > div {
         margin: 0 auto;
-        // padding: 0 20px;
+        padding: 0px 10px;
       }
     }
   }
@@ -119,7 +120,7 @@
     }
 
     .layout__left .the-logo {
-      flex: 1 0 47px;
+      flex: 1 0 58px;
     }
 
     .layout__right .the-content {

src/assets/styles/page.scss

@@ -13,13 +13,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    // border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--divider-color);
   }
 
   .base-container {
     height: 100%;
     overflow: hidden;
-    border-radius: 10px;
+    // border-radius: 10px;
     // border-top-left-radius: var(--border-radius);
 
     > section {

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)`,

src/pages/connections.tsx

@@ -125,7 +125,7 @@ const ConnectionsPage = () => {
       title={t("Connections")}
       contentStyle={{ height: "100%" }}
       header={
-        <Box sx={{ mt: 1, display: "flex", alignItems: "center", gap: 2 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <Box sx={{ mx: 1 }}>Download: {parseTraffic(download)}</Box>
           <Box sx={{ mx: 1 }}>Upload: {parseTraffic(upload)}</Box>
           <IconButton

src/pages/logs.tsx

@@ -42,7 +42,7 @@ const LogPage = () => {
       title={t("Logs")}
       contentStyle={{ height: "100%" }}
       header={
-        <Box sx={{ mt: 1, display: "flex", alignItems: "center", gap: 2 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <IconButton
             size="small"
             color="inherit"

src/pages/profiles.tsx

@@ -240,7 +240,7 @@ const ProfilePage = () => {
     <BasePage
       title={t("Profiles")}
       header={
-        <Box sx={{ mt: 1, display: "flex", alignItems: "center", gap: 1 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <IconButton
             size="small"
             color="inherit"

src/pages/test.tsx

@@ -113,7 +113,7 @@ const TestPage = () => {
     <BasePage
       title={t("Test")}
       header={
-        <Box sx={{ mt: 1, display: "flex", alignItems: "center", gap: 1 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <Button
             variant="contained"
             size="small"