Style: UI improvement & 1.4.6 ready

src/assets/styles/page.scss

@@ -27,15 +27,25 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 5px 5px;
+      padding: 10px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
 
       .base-content {
-        width: 100%;
-        // max-width: 850px;
+        width: calc(100% - 10px * 2);
         margin: 0 auto;
       }
     }
+
+    &.no-padding {
+      > section {
+        padding: 0;
+        overflow: visible;
+
+        .base-content {
+          width: 100%;
+        }
+      }
+    }
   }
 }

src/components/base/base-page.tsx

@@ -8,10 +8,11 @@ interface Props {
   header?: React.ReactNode; // something behind title
   contentStyle?: React.CSSProperties;
   children?: ReactNode;
+  full?: boolean;
 }
 
 export const BasePage: React.FC<Props> = (props) => {
-  const { title, header, contentStyle, children } = props;
+  const { title, header, contentStyle, full, children } = props;
   const { theme } = useCustomTheme();
 
   const isDark = theme.palette.mode === "dark";
@@ -28,7 +29,7 @@ export const BasePage: React.FC<Props> = (props) => {
         </header>
 
         <div
-          className="base-container"
+          className={full ? "base-container no-padding" : "base-container"}
           style={{ backgroundColor: isDark ? "#090909" : "#ffffff" }}
         >
           <section

src/pages/connections.tsx

@@ -114,6 +114,7 @@ const ConnectionsPage = () => {
 
   return (
     <BasePage
+      full
       title={t("Connections")}
       contentStyle={{ height: "100%" }}
       header={
@@ -142,75 +143,72 @@ const ConnectionsPage = () => {
         </Box>
       }
     >
-      <Box sx={{ boxShadow: 0, height: "100%" }}>
-        <Box
-          sx={{
-            pt: 1,
-            mb: 0.5,
-            mx: "12px",
-            height: "36px",
-            display: "flex",
-            alignItems: "center",
-            userSelect: "text",
-          }}
-        >
-          {!isTableLayout && (
-            <Select
-              size="small"
-              autoComplete="off"
-              value={curOrderOpt}
-              onChange={(e) => setOrderOpt(e.target.value)}
-              sx={{
-                mr: 1,
-                width: i18n.language === "en" ? 190 : 120,
-                '[role="button"]': { py: 0.65 },
-              }}
-            >
-              {Object.keys(orderOpts).map((opt) => (
-                <MenuItem key={opt} value={opt}>
-                  <span style={{ fontSize: 14 }}>{t(opt)}</span>
-                </MenuItem>
-              ))}
-            </Select>
-          )}
-
-          <TextField
-            hiddenLabel
-            fullWidth
+      <Box
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          mx: "10px",
+          height: "36px",
+          display: "flex",
+          alignItems: "center",
+          userSelect: "text",
+        }}
+      >
+        {!isTableLayout && (
+          <Select
             size="small"
             autoComplete="off"
-            spellCheck="false"
-            variant="outlined"
-            placeholder={t("Filter conditions")}
-            value={filterText}
-            onChange={(e) => setFilterText(e.target.value)}
-            sx={{ input: { py: 0.65, px: 1.25 } }}
-          />
-        </Box>
+            value={curOrderOpt}
+            onChange={(e) => setOrderOpt(e.target.value)}
+            sx={{
+              mr: 1,
+              width: i18n.language === "en" ? 190 : 120,
+              '[role="button"]': { py: 0.65 },
+            }}
+          >
+            {Object.keys(orderOpts).map((opt) => (
+              <MenuItem key={opt} value={opt}>
+                <span style={{ fontSize: 14 }}>{t(opt)}</span>
+              </MenuItem>
+            ))}
+          </Select>
+        )}
 
-        <Box height="calc(100% - 50px)" sx={{ userSelect: "text" }}>
-          {filterConn.length === 0 ? (
-            <BaseEmpty text="No Connections" />
-          ) : isTableLayout ? (
-            <ConnectionTable
-              connections={filterConn}
-              onShowDetail={(detail) => detailRef.current?.open(detail)}
-            />
-          ) : (
-            <Virtuoso
-              data={filterConn}
-              itemContent={(index, item) => (
-                <ConnectionItem
-                  value={item}
-                  onShowDetail={() => detailRef.current?.open(item)}
-                />
-              )}
-            />
-          )}
-        </Box>
-
-        <ConnectionDetail ref={detailRef} />
+        <TextField
+          hiddenLabel
+          fullWidth
+          size="small"
+          autoComplete="off"
+          spellCheck="false"
+          variant="outlined"
+          placeholder={t("Filter conditions")}
+          value={filterText}
+          onChange={(e) => setFilterText(e.target.value)}
+          sx={{ input: { py: 0.65, px: 1.25 } }}
+        />
       </Box>
+
+      <Box height="calc(100% - 50px)" sx={{ userSelect: "text" }}>
+        {filterConn.length === 0 ? (
+          <BaseEmpty text="No Connections" />
+        ) : isTableLayout ? (
+          <ConnectionTable
+            connections={filterConn}
+            onShowDetail={(detail) => detailRef.current?.open(detail)}
+          />
+        ) : (
+          <Virtuoso
+            data={filterConn}
+            itemContent={(index, item) => (
+              <ConnectionItem
+                value={item}
+                onShowDetail={() => detailRef.current?.open(item)}
+              />
+            )}
+          />
+        )}
+      </Box>
+      <ConnectionDetail ref={detailRef} />
     </BasePage>
   );
 };

src/pages/logs.tsx

@@ -38,6 +38,7 @@ const LogPage = () => {
 
   return (
     <BasePage
+      full
       title={t("Logs")}
       contentStyle={{ height: "100%" }}
       header={
@@ -66,61 +67,52 @@ const LogPage = () => {
     >
       <Box
         sx={{
-          boxSizing: "border-box",
-          boxShadow: 0,
-          height: "100%",
-          userSelect: "text",
+          pt: 1,
+          mb: 0.5,
+          mx: "10px",
+          height: "36px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
-        <Box
-          sx={{
-            pt: 1,
-            mb: 0.5,
-            mx: "12px",
-            height: "36px",
-            display: "flex",
-            alignItems: "center",
-          }}
+        <Select
+          size="small"
+          autoComplete="off"
+          value={logState}
+          onChange={(e) => setLogState(e.target.value)}
+          sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
         >
-          <Select
-            size="small"
-            autoComplete="off"
-            value={logState}
-            onChange={(e) => setLogState(e.target.value)}
-            sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
-          >
-            <MenuItem value="all">ALL</MenuItem>
-            <MenuItem value="inf">INFO</MenuItem>
-            <MenuItem value="warn">WARN</MenuItem>
-            <MenuItem value="err">ERROR</MenuItem>
-          </Select>
+          <MenuItem value="all">ALL</MenuItem>
+          <MenuItem value="inf">INFO</MenuItem>
+          <MenuItem value="warn">WARN</MenuItem>
+          <MenuItem value="err">ERROR</MenuItem>
+        </Select>
 
-          <TextField
-            hiddenLabel
-            fullWidth
-            size="small"
-            autoComplete="off"
-            spellCheck="false"
-            variant="outlined"
-            placeholder={t("Filter conditions")}
-            value={filterText}
-            onChange={(e) => setFilterText(e.target.value)}
-            sx={{ input: { py: 0.65, px: 1.25 } }}
+        <TextField
+          hiddenLabel
+          fullWidth
+          size="small"
+          autoComplete="off"
+          spellCheck="false"
+          variant="outlined"
+          placeholder={t("Filter conditions")}
+          value={filterText}
+          onChange={(e) => setFilterText(e.target.value)}
+          sx={{ input: { py: 0.65, px: 1.25 } }}
+        />
+      </Box>
+
+      <Box height="calc(100% - 50px)">
+        {filterLogs.length > 0 ? (
+          <Virtuoso
+            initialTopMostItemIndex={999}
+            data={filterLogs}
+            itemContent={(index, item) => <LogItem value={item} />}
+            followOutput={"smooth"}
           />
-        </Box>
-
-        <Box height="calc(100% - 50px)">
-          {filterLogs.length > 0 ? (
-            <Virtuoso
-              initialTopMostItemIndex={999}
-              data={filterLogs}
-              itemContent={(index, item) => <LogItem value={item} />}
-              followOutput={"smooth"}
-            />
-          ) : (
-            <BaseEmpty text="No Logs" />
-          )}
-        </Box>
+        ) : (
+          <BaseEmpty text="No Logs" />
+        )}
       </Box>
     </BasePage>
   );

src/pages/proxies.tsx

@@ -51,6 +51,7 @@ const ProxyPage = () => {
 
   return (
     <BasePage
+      full
       contentStyle={{ height: "100%" }}
       title={t("Proxy Groups")}
       header={
@@ -72,16 +73,7 @@ const ProxyPage = () => {
         </Box>
       }
     >
-      <Box
-        sx={{
-          borderRadius: 1,
-          boxShadow: 0,
-          height: "100%",
-          boxSizing: "border-box",
-        }}
-      >
-        <ProxyGroups mode={curMode!} />
-      </Box>
+      <ProxyGroups mode={curMode!} />
     </BasePage>
   );
 };

src/pages/rules.tsx

@@ -18,45 +18,43 @@ const RulesPage = () => {
   }, [data, filterText]);
 
   return (
-    <BasePage title={t("Rules")} contentStyle={{ height: "100%" }}>
-      <Box sx={{ boxSizing: "border-box", boxShadow: 0, height: "100%" }}>
-        <Box
-          sx={{
-            pt: 1,
-            mb: 0.5,
-            mx: "12px",
-            height: "36px",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <TextField
-            hiddenLabel
-            fullWidth
-            size="small"
-            autoComplete="off"
-            variant="outlined"
-            spellCheck="false"
-            placeholder={t("Filter conditions")}
-            value={filterText}
-            onChange={(e) => setFilterText(e.target.value)}
-            sx={{ input: { py: 0.65, px: 1.25 } }}
-          />
-        </Box>
+    <BasePage full title={t("Rules")} contentStyle={{ height: "100%" }}>
+      <Box
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          mx: "10px",
+          height: "36px",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <TextField
+          hiddenLabel
+          fullWidth
+          size="small"
+          autoComplete="off"
+          variant="outlined"
+          spellCheck="false"
+          placeholder={t("Filter conditions")}
+          value={filterText}
+          onChange={(e) => setFilterText(e.target.value)}
+          sx={{ input: { py: 0.65, px: 1.25 } }}
+        />
+      </Box>
 
-        <Box height="calc(100% - 50px)">
-          {rules.length > 0 ? (
-            <Virtuoso
-              data={rules}
-              itemContent={(index, item) => (
-                <RuleItem index={index + 1} value={item} />
-              )}
-              followOutput={"smooth"}
-            />
-          ) : (
-            <BaseEmpty text="No Rules" />
-          )}
-        </Box>
+      <Box height="calc(100% - 50px)">
+        {rules.length > 0 ? (
+          <Virtuoso
+            data={rules}
+            itemContent={(index, item) => (
+              <RuleItem index={index + 1} value={item} />
+            )}
+            followOutput={"smooth"}
+          />
+        ) : (
+          <BaseEmpty text="No Rules" />
+        )}
       </Box>
     </BasePage>
   );