ui changes: making the filter text boxes rounder and removing the men…

…u icon from the header
392-f24 · Oct 10, 2024 · b8109e0 · b8109e0
1 parent a9698a2
commit b8109e0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -29,11 +29,6 @@ export default function Header() {
   return (
     <AppBar position="sticky" sx={{ backgroundColor: theme.palette.primary.light, color: '#000' }}>
       <Toolbar>
-        {/* Menu Icon (Left) */}
-        <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
-          <MenuIcon />
-        </IconButton>
-
         {/* App Name */}
         <Typography
           variant="h6"

diff --git a/src/components/StudentList.jsx b/src/components/StudentList.jsx
@@ -107,7 +107,20 @@ export default function StudentList() {
               value={selectedMajors} // Selected majors state
               onChange={(event, newValue) => setSelectedMajors(newValue)} // Update selected majors
               renderInput={(params) => (
-                <TextField {...params} label="Filter by Major(s)" variant="outlined" />
+                <TextField
+                  {...params}
+                  label="Filter by Major(s)"
+                  variant="outlined"
+                  sx={{
+                    flex: 1,
+                    mb: 2,
+                    minWidth: 200,
+                    '& .MuiOutlinedInput-root': {
+                      borderRadius: '15px', // Rounds the edges of the input field
+                      border: '1px solid #ddd', // Optional: Adds a border to highlight the rounded effect
+                    },
+                  }}
+                />
               )}
               sx={{ flex: 1, mb: 2, minWidth: 200 }}
             />
@@ -119,7 +132,20 @@ export default function StudentList() {
               value={selectedYears} // Selected majors state
               onChange={(event, newValue) => setSelectedYears(newValue)} // Update selected years
               renderInput={(params) => (
-                <TextField {...params} label="Filter by Year(s)" variant="outlined" />
+                <TextField
+                  {...params}
+                  label="Filter by Year(s)"
+                  variant="outlined"
+                  sx={{
+                    flex: 1,
+                    mb: 2,
+                    minWidth: 200,
+                    '& .MuiOutlinedInput-root': {
+                      borderRadius: '15px', // Rounds the edges of the input field
+                      border: '1px solid #ddd', // Optional: Adds a border to highlight the rounded effect
+                    },
+                  }}
+                />
               )}
               sx={{ flex: 1, mb: 2, minWidth: 200 }}
             />