completed search bar component

sfbrigade · Sep 5, 2024 · 5530f17 · 5530f17
1 parent 906e545
commit 5530f17
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/components/design_system/searchBar/SearchBar.tsx b/src/components/design_system/searchBar/SearchBar.tsx
@@ -17,16 +17,34 @@ export const SearchBar = styled(TextField)<TextFieldProps>(({ theme }) => ({
     "&:hover:not(.Mui-focused)": {
       color: "var(--grey-30)",
       borderColor: "var(--primary)",
-      backgroundColor: "var(--primary-99)",
+
       borderRadius: "30px",
     },
     "&.Mui-focused": {
       color: "var(--primary)",
-      backgroundColor: "var(--primary-99)",
+
       borderRadius: "30px",
       borderColor: "var(--primary)",
       "& .MuiInputAdornment-outlined": {
         color: "var(--primary)",
+        zIndex: 10,
+      },
+      "& > fieldset": {
+        background: "var(--primary-99)",
+      },
+      "& .MuiOutlinedInput-input": {
+        zIndex: 10,
+      },
+    },
+    "&:hover": {
+      "& > fieldset": {
+        background: "var(--primary-99)",
+      },
+      "& .MuiOutlinedInput-input": {
+        zIndex: 10,
+      },
+      "& .MuiInputAdornment-outlined": {
+        zIndex: 10,
       },
     },
   },

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -23,6 +23,7 @@ import emptyState from "../../public/img/empty-state.png";
 import Container from "@mui/material/Container";
 import Image from "next/image";
 import { SearchBar } from "../design_system/searchBar/SearchBar";
+import { TextInput } from "../design_system/input/Input";
 
 export type StudentWithIep = SelectableForTable<"student"> &
   SelectableForTable<"iep">;
@@ -43,7 +44,7 @@ export interface ParaHeadCell extends HeadCell {
 }
 
 export function isStudentWithIep(
-  person: StudentWithIep | Para
+  person: StudentWithIep | Para,
 ): person is StudentWithIep {
   return (
     (person as StudentWithIep).student_id !== undefined &&
@@ -65,7 +66,7 @@ type Order = "asc" | "desc";
 
 function getComparator<T>(
   order: Order,
-  orderBy: keyof T
+  orderBy: keyof T,
 ): (a: T, b: T) => number {
   return order === "desc"
     ? (a, b) => descendingComparator(a, b, orderBy)
@@ -214,7 +215,7 @@ function EnhancedTableInput<Column extends HeadCell>({
       {inputCells.map((inputCell, idx) => {
         return inputCell.hasInput ? (
           <TableCell key={inputCell.id} align={"left"}>
-            <TextField
+            <TextInput
               label={inputCell.label}
               autoFocus={idx === 0}
               required
@@ -274,7 +275,7 @@ interface EnhancedTableProps<Person, Column> {
  */
 export default function EnhancedTable<
   Person extends StudentWithIep | Para,
-  Column extends HeadCell
+  Column extends HeadCell,
 >({ people, onSubmit, headCells, type }: EnhancedTableProps<Person, Column>) {
   const router = useRouter();
 
@@ -297,7 +298,7 @@ export default function EnhancedTable<
 
   const handleRequestSort = (
     event: React.MouseEvent<unknown>,
-    property: string
+    property: string,
   ) => {
     const isAsc = orderBy === property && order === "asc";
     setOrder(isAsc ? "desc" : "asc");
@@ -324,7 +325,7 @@ export default function EnhancedTable<
 
       return filteredList;
     },
-    [headCells]
+    [headCells],
   );
 
   const visibleRows = useMemo(() => {
@@ -400,7 +401,7 @@ export default function EnhancedTable<
                       handleLinkToPage(
                         isStudentWithIep(row)
                           ? `../students/${row.student_id || ""}`
-                          : `../staff/${row.user_id || ""}`
+                          : `../staff/${row.user_id || ""}`,
                       )
                     }
                   >

diff --git a/src/styles/Input.module.css b/src/styles/Input.module.css
@@ -1,7 +1,7 @@
 /* TODO: Might use MUI for all inputs for consistency */
-.default {
+/*.default {
   border-radius: 2px;
   border: 1px solid var(--outline);
   margin: 2px 4px;
   padding: 4px 2px;
-}
+}*/