Updated Design of Filter List

Data/Engine/web-interface/src/Devices/Filters/Filter_List.jsx

@@ -48,12 +48,10 @@ const gradientButtonSx = {
   color: "#0b1220",
   borderRadius: 999,
   textTransform: "none",
-  boxShadow: "0 10px 26px rgba(124,58,237,0.28)",
   px: 2.4,
   minWidth: 126,
   "&:hover": {
     backgroundImage: "linear-gradient(135deg,#86e1ff,#d1a6ff)",
-    boxShadow: "0 12px 34px rgba(124,58,237,0.38)",
   },
 };
 
@@ -331,8 +329,7 @@ export default function DeviceFilterList({ onCreateFilter, onEditFilter, refresh
     <Paper
       elevation={0}
       sx={{
-        height: "100vh",
-        minHeight: "100vh",
+        height: "100vh", // Affects the button vertical position offset
         backgroundColor: "transparent",
         color: AURORA_SHELL.text,
         p: 3,
@@ -340,44 +337,18 @@ export default function DeviceFilterList({ onCreateFilter, onEditFilter, refresh
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
+        gap: 2,
       }}
     >
-      <Box sx={{ display: "flex", justifyContent: "flex-end", alignItems: "center", mb: 2.5 }}>
-        <Stack direction="row" gap={1}>
-          <Tooltip title="Refresh">
-            <IconButton
-              aria-label="Refresh filters"
-              onClick={loadFilters}
-              sx={{
-                color: "#a5e0ff",
-                border: "1px solid rgba(148,163,184,0.4)",
-                backgroundColor: "rgba(5,7,15,0.6)",
-                "&:hover": { backgroundColor: "rgba(125,183,255,0.16)" },
-              }}
-            >
-              <CachedIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-          <Button
-            startIcon={<AddIcon />}
-            variant="contained"
-            onClick={() => onCreateFilter?.()}
-            sx={gradientButtonSx}
-          >
-            New Filter
-          </Button>
-        </Stack>
-      </Box>
-
+      <Box sx={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", gap: 2 }}>
         <Box
           className={gridTheme.themeName}
           sx={{
             flexGrow: 1,
             minHeight: 0,
-          pb: 2,
             width: "100%",
             fontFamily: gridFontFamily,
-          "& .ag-root-wrapper": { borderRadius: 0 },
+            "& .ag-root-wrapper": { borderRadius: "8px", overflow: "hidden" },
             "& .ag-center-cols-container .ag-cell, & .ag-pinned-left-cols-container .ag-cell, & .ag-pinned-right-cols-container .ag-cell": {
               display: "flex",
               alignItems: "center",
@@ -425,7 +396,7 @@ export default function DeviceFilterList({ onCreateFilter, onEditFilter, refresh
             "--ag-selected-row-background-color": "rgba(64,164,255,0.18)",
             "--ag-border-color": "rgba(125,183,255,0.18)",
             "--ag-row-border-color": "rgba(125,183,255,0.14)",
-          "--ag-border-radius": "0px",
+            "--ag-border-radius": "8px",
             "--ag-checkbox-border-radius": "3px",
             "--ag-checkbox-background-color": "rgba(255,255,255,0.06)",
             "--ag-checkbox-border-color": "rgba(180,200,220,0.6)",
@@ -446,9 +417,46 @@ export default function DeviceFilterList({ onCreateFilter, onEditFilter, refresh
             overlayNoRowsTemplate="<span class='ag-overlay-no-rows-center'>No device filters found.</span>"
             onGridReady={handleGridReady}
             theme={gridTheme}
-          style={{ width: "100%", height: "100%", fontFamily: gridFontFamily }}
+            style={{ width: "100%", height: "100%", flex: 1, fontFamily: gridFontFamily }}
           />
         </Box>
+
+        <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1.5 }}>
+          <Stack direction="row" gap={1.75}>
+            <Tooltip title="Refresh">
+              <span>
+                <Button
+                  startIcon={<CachedIcon fontSize="small" />}
+                  variant="outlined"
+                  aria-label="Refresh filters"
+                  onClick={loadFilters}
+                  sx={{
+                    textTransform: "none",
+                    color: "#a5e0ff",
+                    borderColor: "rgba(148,163,184,0.4)",
+                    backgroundColor: "rgba(5,7,15,0.6)",
+                    borderRadius: 999,
+                    px: 2.4,
+                    minWidth: 126,
+                    height: 38,
+                    "&:hover": { backgroundColor: "rgba(125,183,255,0.16)", borderColor: "rgba(148,163,184,0.6)" },
+                  }}
+                >
+                  Refresh
+                </Button>
+              </span>
+            </Tooltip>
+            <Button
+              startIcon={<AddIcon />}
+              variant="contained"
+              onClick={() => onCreateFilter?.()}
+              sx={gradientButtonSx}
+            >
+              New Filter
+            </Button>
+          </Stack>
+        </Box>
+      </Box>
     </Paper>
   );
 }