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,55 +335,66 @@ const ProfilePage = () => {
           {t("New")}
         </Button>
       </Stack>
-      <DndContext
+      <Box
-        sensors={sensors}
+        sx={{
-        collisionDetection={closestCenter}
+          pt: 1,
-        onDragEnd={onDragEnd}
+          mb: 0.5,
+          pl: "10px",
+          mr: "10px",
+          height: "calc(100% - 20px)",
+          overflowY: "auto",
+        }}
       >
-        <Box sx={{ mb: 4.5 }}>
+        <DndContext
-          <Grid container spacing={{ xs: 1, lg: 1 }}>
+          sensors={sensors}
-            <SortableContext
+          collisionDetection={closestCenter}
-              items={regularItems.map((x) => {
+          onDragEnd={onDragEnd}
-                return x.uid;
+        >
-              })}
+          <Box sx={{ mb: 4.5 }}>
-            >
+            <Grid container spacing={{ xs: 1, lg: 1 }}>
-              {regularItems.map((item) => (
+              <SortableContext
-                <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
+                items={regularItems.map((x) => {
-                  <ProfileItem
+                  return x.uid;
-                    id={item.uid}
+                })}
-                    selected={profiles.current === item.uid}
+              >
-                    activating={activating === item.uid}
+                {regularItems.map((item) => (
-                    itemData={item}
+                  <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
-                    onSelect={(f) => onSelect(item.uid, f)}
+                    <ProfileItem
-                    onEdit={() => viewerRef.current?.edit(item)}
+                      id={item.uid}
-                  />
+                      selected={profiles.current === item.uid}
-                </Grid>
+                      activating={activating === item.uid}
-              ))}
+                      itemData={item}
-            </SortableContext>
+                      onSelect={(f) => onSelect(item.uid, f)}
-          </Grid>
+                      onEdit={() => viewerRef.current?.edit(item)}
-        </Box>
+                    />
-      </DndContext>
+                  </Grid>
-
+                ))}
-      {enhanceItems.length > 0 && (
+              </SortableContext>
-        <Grid container spacing={{ xs: 2, lg: 2 }}>
-          {enhanceItems.map((item) => (
-            <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
-              <ProfileMore
-                selected={!!chain.includes(item.uid)}
-                itemData={item}
-                enableNum={chain.length || 0}
-                logInfo={chainLogs[item.uid]}
-                onEnable={() => onEnable(item.uid)}
-                onDisable={() => onDisable(item.uid)}
-                onDelete={() => onDelete(item.uid)}
-                onMoveTop={() => onMoveTop(item.uid)}
-                onMoveEnd={() => onMoveEnd(item.uid)}
-                onEdit={() => viewerRef.current?.edit(item)}
-              />
             </Grid>
-          ))}
+          </Box>
-        </Grid>
+        </DndContext>
-      )}
+
+        {enhanceItems.length > 0 && (
+          <Grid container spacing={{ xs: 2, lg: 2 }}>
+            {enhanceItems.map((item) => (
+              <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
+                <ProfileMore
+                  selected={!!chain.includes(item.uid)}
+                  itemData={item}
+                  enableNum={chain.length || 0}
+                  logInfo={chainLogs[item.uid]}
+                  onEnable={() => onEnable(item.uid)}
+                  onDisable={() => onDisable(item.uid)}
+                  onDelete={() => onDelete(item.uid)}
+                  onMoveTop={() => onMoveTop(item.uid)}
+                  onMoveEnd={() => onMoveEnd(item.uid)}
+                  onEdit={() => viewerRef.current?.edit(item)}
+                />
+              </Grid>
+            ))}
+          </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 }}>
@@ -131,32 +132,40 @@ const TestPage = () => {
         </Box>
       }
     >
-      <DndContext
+      <Box
-        sensors={sensors}
+        sx={{
-        collisionDetection={closestCenter}
+          pt: 1,
-        onDragEnd={onDragEnd}
+          mb: 0.5,
+          px: "10px",
+        }}
       >
-        <Box sx={{ mb: 4.5 }}>
+        <DndContext
-          <Grid container spacing={{ xs: 1, lg: 1 }}>
+          sensors={sensors}
-            <SortableContext
+          collisionDetection={closestCenter}
-              items={testList.map((x) => {
+          onDragEnd={onDragEnd}
-                return x.uid;
+        >
-              })}
+          <Box sx={{ mb: 4.5 }}>
-            >
+            <Grid container spacing={{ xs: 1, lg: 1 }}>
-              {testList.map((item) => (
+              <SortableContext
-                <Grid item xs={6} sm={4} md={3} lg={2} key={item.uid}>
+                items={testList.map((x) => {
-                  <TestItem
+                  return x.uid;
-                    id={item.uid}
+                })}
-                    itemData={item}
+              >
-                    onEdit={() => viewerRef.current?.edit(item)}
+                {testList.map((item) => (
-                    onDelete={onDeleteTestListItem}
+                  <Grid item xs={6} sm={4} md={3} lg={2} key={item.uid}>
-                  />
+                    <TestItem
-                </Grid>
+                      id={item.uid}
-              ))}
+                      itemData={item}
-            </SortableContext>
+                      onEdit={() => viewerRef.current?.edit(item)}
-          </Grid>
+                      onDelete={onDeleteTestListItem}
-        </Box>
+                    />
-      </DndContext>
+                  </Grid>
+                ))}
+              </SortableContext>
+            </Grid>
+          </Box>
+        </DndContext>
+      </Box>
       <TestViewer ref={viewerRef} onChange={onTestListItemChange} />
     </BasePage>
   );