From 6f2fb3900eda0406ab9bf09a7ad4a675b0de29d7 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sun, 17 Dec 2023 23:29:10 +0800
Subject: [PATCH] Center search bar and replace filter text with search icon

---
 .../EquipmentInstancesListPage.tsx            | 71 +++++++++++--------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
index e3b0ee8..b08d26b 100644
--- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
+++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
@@ -15,6 +15,7 @@ import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstan
 import { useState } from "react";
 import Popup from "reactjs-popup";
 import Autocomplete from "@mui/material/Autocomplete";
+import SearchIcon from "@mui/icons-material/Search";
 
 export default function EquipmentInstancesListPage() {
   const [editmodalOpen, SetEditModalOpen] = useState(false);
@@ -67,36 +68,48 @@ export default function EquipmentInstancesListPage() {
           flexWrap: "wrap",
         }}
       >
-        <div
-          style={{
-            ...styles.flex_row,
-            ...{ alignItems: "center", justifyContent: "flex-start" },
-          }}
-        >
-          <p style={{ ...styles.text_dark, ...styles.text_M }}>Filter: </p>
-          <Autocomplete
-            sx={{
-              display: "inline-block",
-              "& input": {
-                width: "256x",
-                bgcolor: "background.paper",
-                color: (theme) =>
-                  theme.palette.getContrastText(theme.palette.background.paper),
-              },
+        <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
+          <div
+            style={{
+              ...styles.flex_row,
+              ...{ alignItems: "center", justifySelf: "flex-start" },
             }}
-            value={filter}
-            onChange={(_event, newValue) => {
-              setFilter(newValue);
-            }}
-            freeSolo
-            id="custom-input-demo"
-            options={["Available", "Broken", "Glassware", "Miscellaneous"]}
-            renderInput={(params) => (
-              <div ref={params.InputProps.ref}>
-                <input type="text" {...params.inputProps} />
-              </div>
-            )}
-          />
+          >
+            <SearchIcon
+              style={{
+                height: 32,
+                width: 32,
+                fill: colors.font_dark,
+                marginLeft: "1rem",
+                marginRight: "1rem",
+              }}
+            />
+            <Autocomplete
+              sx={{
+                display: "inline-block",
+                "& input": {
+                  width: "256x",
+                  bgcolor: "background.paper",
+                  color: (theme) =>
+                    theme.palette.getContrastText(
+                      theme.palette.background.paper
+                    ),
+                },
+              }}
+              value={filter}
+              onChange={(_event, newValue) => {
+                setFilter(newValue);
+              }}
+              freeSolo
+              id="custom-input-demo"
+              options={["Available", "Broken", "Glassware", "Miscellaneous"]}
+              renderInput={(params) => (
+                <div ref={params.InputProps.ref}>
+                  <input type="text" {...params.inputProps} />
+                </div>
+              )}
+            />
+          </div>
         </div>
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}