style: fix styles

src/assets/styles/index.scss

@@ -35,6 +35,9 @@ body {
   border-radius: 6px;
   background-color: var(--scroller-color);
 }
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
 
 body {
   overflow: hidden;

src/components/connection/connection-item.tsx

@@ -38,6 +38,7 @@ export const ConnectionItem = (props: Props) => {
   return (
     <ListItem
       dense
+      sx={{ borderBottom: "1px solid var(--divider-color)" }}
       secondaryAction={
         <IconButton edge="end" color="inherit" onClick={onDelete}>
           <CloseRounded />

src/components/proxy/proxy-groups.tsx

@@ -7,6 +7,7 @@ import {
   updateProxy,
   deleteConnection,
 } from "@/services/api";
+import { Box } from "@mui/material";
 import { useProfiles } from "@/hooks/use-profiles";
 import { useVerge } from "@/hooks/use-verge";
 import { BaseEmpty } from "../base";
@@ -117,7 +118,7 @@ export const ProxyGroups = (props: Props) => {
   return (
     <Virtuoso
       ref={virtuosoRef}
-      style={{ height: "100%" }}
+      style={{ height: "calc(100% - 12px)" }}
       totalCount={renderList.length}
       increaseViewportBy={256}
       itemContent={(index) => (

src/components/rule/rule-item.tsx

@@ -34,7 +34,7 @@ const RuleItem = (props: Props) => {
   const { index, value } = props;
 
   return (
-    <Item>
+    <Item sx={{ borderBottom: "1px solid var(--divider-color)" }}>
       <Typography
         color="text.secondary"
         variant="body2"

src/pages/connections.tsx

@@ -25,6 +25,7 @@ import {
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -33,7 +34,8 @@ type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
 const ConnectionsPage = () => {
   const { t, i18n } = useTranslation();
   const { clashInfo } = useClashInfo();
-
+  const { theme } = useCustomTheme();
+  const isDark = theme.palette.mode === "dark";
   const [filterText, setFilterText] = useState("");
   const [curOrderOpt, setOrderOpt] = useState("Default");
   const [connData, setConnData] = useState<IConnections>(initConn);
@@ -106,7 +108,6 @@ const ConnectionsPage = () => {
 
   useEffect(() => {
     if (!clashInfo) return;
-
     const { server = "", secret = "" } = clashInfo;
     connect(`ws://${server}/connections?token=${encodeURIComponent(secret)}`);
 
@@ -198,7 +199,15 @@ const ConnectionsPage = () => {
         />
       </Box>
 
-      <Box height="calc(100% - 50px)" sx={{ userSelect: "text" }}>
+      <Box
+        height="calc(100% - 70px)"
+        sx={{
+          userSelect: "text",
+          margin: "12px",
+          borderRadius: "8px",
+          bgcolor: isDark ? "#282a36" : "#ffffff",
+        }}
+      >
         {filterConn.length === 0 ? (
           <BaseEmpty text="No Connections" />
         ) : isTableLayout ? (

src/pages/logs.tsx

@@ -18,12 +18,14 @@ import {
 import { atomEnableLog, atomLogData } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 const LogPage = () => {
   const { t } = useTranslation();
   const [logData, setLogData] = useRecoilState(atomLogData);
   const [enableLog, setEnableLog] = useRecoilState(atomEnableLog);
-
+  const { theme } = useCustomTheme();
+  const isDark = theme.palette.mode === "dark";
   const [logState, setLogState] = useState("all");
   const [filterText, setFilterText] = useState("");
 
@@ -107,7 +109,14 @@ const LogPage = () => {
         />
       </Box>
 
-      <Box height="calc(100% - 50px)">
+      <Box
+        height="calc(100% - 70px)"
+        sx={{
+          margin: "12px",
+          borderRadius: "8px",
+          bgcolor: isDark ? "#282a36" : "#ffffff",
+        }}
+      >
         {filterLogs.length > 0 ? (
           <Virtuoso
             initialTopMostItemIndex={999}

src/pages/profiles.tsx

@@ -238,7 +238,9 @@ const ProfilePage = () => {
 
   return (
     <BasePage
+      full
       title={t("Profiles")}
+      contentStyle={{ height: "100%" }}
       header={
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <IconButton
@@ -270,7 +272,18 @@ const ProfilePage = () => {
         </Box>
       }
     >
-      <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          mx: "10px",
+          height: "36px",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
         <TextField
           hiddenLabel
           fullWidth
@@ -322,6 +335,16 @@ const ProfilePage = () => {
           {t("New")}
         </Button>
       </Stack>
+      <Box
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          pl: "10px",
+          mr: "10px",
+          height: "calc(100% - 20px)",
+          overflowY: "auto",
+        }}
+      >
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}
@@ -371,6 +394,7 @@ const ProfilePage = () => {
             ))}
           </Grid>
         )}
+      </Box>
       <ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
       <ConfigViewer ref={configRef} />
     </BasePage>

src/pages/rules.tsx

@@ -7,11 +7,13 @@ import { getRules } from "@/services/api";
 import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 import { ProviderButton } from "@/components/rule/provider-button";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 const RulesPage = () => {
   const { t } = useTranslation();
   const { data = [] } = useSWR("getRules", getRules);
-
+  const { theme } = useCustomTheme();
+  const isDark = theme.palette.mode === "dark";
   const [filterText, setFilterText] = useState("");
 
   const rules = useMemo(() => {
@@ -53,7 +55,14 @@ const RulesPage = () => {
         />
       </Box>
 
-      <Box height="calc(100% - 50px)">
+      <Box
+        height="calc(100% - 70px)"
+        sx={{
+          margin: "12px",
+          borderRadius: "8px",
+          bgcolor: isDark ? "#282a36" : "#ffffff",
+        }}
+      >
         {rules.length > 0 ? (
           <Virtuoso
             data={rules}

src/pages/test.tsx

@@ -111,6 +111,7 @@ const TestPage = () => {
 
   return (
     <BasePage
+      full
       title={t("Test")}
       header={
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
@@ -130,6 +131,13 @@ const TestPage = () => {
           </Button>
         </Box>
       }
+    >
+      <Box
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          px: "10px",
+        }}
       >
         <DndContext
           sensors={sensors}
@@ -157,6 +165,7 @@ const TestPage = () => {
             </Grid>
           </Box>
         </DndContext>
+      </Box>
       <TestViewer ref={viewerRef} onChange={onTestListItemChange} />
     </BasePage>
   );