Fix dark mode issue on all-rooms-page

devsoc-unsw · Nov 14, 2024 · 1a927c0 · 1a927c0
1 parent 9dee7d1
commit 1a927c0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/frontend/components/AllRoomsRoom.tsx b/frontend/components/AllRoomsRoom.tsx
@@ -6,6 +6,7 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
+import { styled } from "@mui/system";
 import { RoomAvailabilityBoxProps } from "views/RoomAvailabilityBox";
 
 import RoomAvailability from "./RoomAvailability";
@@ -19,14 +20,7 @@ const Room: React.FC<AllRoomsRoomProps> = ({
   ...roomStatus
 }) => {
   return (
-    <Card
-      variant="outlined"
-      sx={{
-        backgroundColor: "#ffffff",
-        marginTop: 1,
-        overflow: "visible",
-      }}
-    >
+    <StyledRoomCard variant="outlined">
       <CardActionArea href={`/room/${roomNumber}`} target="_blank">
         <CardContent>
           <Stack
@@ -50,8 +44,14 @@ const Room: React.FC<AllRoomsRoomProps> = ({
           </Stack>
         </CardContent>
       </CardActionArea>
-    </Card>
+    </StyledRoomCard>
   );
 };
 
+const StyledRoomCard = styled(Card)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  marginTop: 1,
+  overflow: "visible",
+}));
+
 export default Room;
diff --git a/frontend/components/AllRoomsSearchBar.tsx b/frontend/components/AllRoomsSearchBar.tsx
@@ -1,4 +1,5 @@
 import Stack from "@mui/material/Stack";
+import { styled } from "@mui/system";
 import {
   DatePicker,
   LocalizationProvider,
@@ -16,7 +17,7 @@ export default function AllRoomsSearchBar() {
   const datetime = useSelector(selectDatetime);
 
   return (
-    <Stack
+    <StyledStack
       direction="row"
       gap={2}
       justifyContent="space-between"
@@ -25,7 +26,6 @@ export default function AllRoomsSearchBar() {
       position="sticky"
       top="0px"
       zIndex={1}
-      sx={{ backgroundColor: "#fff" }}
     >
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
@@ -45,6 +45,10 @@ export default function AllRoomsSearchBar() {
           }
         />
       </LocalizationProvider>
-    </Stack>
+    </StyledStack>
   );
 }
+
+const StyledStack = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+}));