feat: new desigin rules page

libnyanpasu · Mar 31, 2024 · 81a7e1b · 81a7e1b
1 parent 12d8026
commit 81a7e1b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 25 deletions.
diff --git a/src/components/rule/rule-item.tsx b/src/components/rule/rule-item.tsx
@@ -34,7 +34,12 @@ const RuleItem = (props: Props) => {
   const { index, value } = props;
 
   return (
-    <Item>
+    <Item
+      sx={{
+        pl: 3.5,
+        pr: 3.5,
+      }}
+    >
       <Typography
         color="text.secondary"
         variant="body2"

diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx
@@ -18,16 +18,20 @@ export default function RulesPage() {
   }, [data, filterText]);
 
   return (
-    <BasePage title={t("Rules")} contentStyle={{ height: "100%" }}>
-      <Paper sx={{ boxSizing: "border-box", boxShadow: 2, height: "100%" }}>
-        <Box
+    <BasePage full title={t("Rules")} contentStyle={{ height: "100%" }}>
+      <Box
+        sx={{
+          padding: 2,
+          width: "calc(100% - 32px)",
+          position: "fixed",
+          borderRadius: 4,
+          zIndex: 10,
+        }}
+      >
+        <Paper
           sx={{
-            pt: 1,
-            mb: 0.5,
-            mx: "12px",
-            height: "36px",
-            display: "flex",
-            alignItems: "center",
+            borderRadius: 4,
+            boxShadow: "none",
           }}
         >
           <TextField
@@ -41,23 +45,28 @@ export default function RulesPage() {
             value={filterText}
             onChange={(e) => setFilterText(e.target.value)}
             sx={{ input: { py: 0.65, px: 1.25 } }}
+            InputProps={{
+              sx: {
+                borderRadius: 4,
+              },
+            }}
           />
-        </Box>
+        </Paper>
+      </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>
-      </Paper>
+      <Box height="100%">
+        {rules.length > 0 ? (
+          <Virtuoso
+            data={rules}
+            itemContent={(index, item) => (
+              <RuleItem index={index + 1} value={item} />
+            )}
+            followOutput={"smooth"}
+          />
+        ) : (
+          <BaseEmpty text="No Rules" />
+        )}
+      </Box>
     </BasePage>
   );
 }