Added icon to the search bar

Signed-off-by: Emil Balitzki <[email protected]>
amosproj · May 28, 2024 · 578e4e9 · 578e4e9
1 parent 4313dfb
commit 578e4e9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/frontend/src/components/DataView/DataPanel.css b/frontend/src/components/DataView/DataPanel.css
@@ -20,3 +20,10 @@
 .MuiGrid-item {
   padding: 1rem !important;
 }
+
+.search-box-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+}
diff --git a/frontend/src/components/DataView/DataPanel.tsx b/frontend/src/components/DataView/DataPanel.tsx
@@ -9,7 +9,7 @@ import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { MapTrifold } from "@phosphor-icons/react";
+import { Funnel, MapTrifold } from "@phosphor-icons/react";
 import "./DataPanel.css";
 import { Tooltip, TextField } from "@mui/material";
 import { GridToolbar, GridToolbarProps } from "@mui/x-data-grid";
@@ -96,7 +96,11 @@ export default function DataPanel({ listTitle }: { listTitle: string }) {
       <Grid item>
         <Box id="filter-panel">
           <TextField
-            label="Filter"
+            label={
+              <div className="search-box-label">
+                <Funnel size={20} /> Search
+              </div>
+            }
             variant="outlined"
             size="small"
             value={filterValue}