In friends, added dark mode, made sidebar not scroll with the main pa…

…ge, fixed loading bar, made sidebar extend the entire popup
jhuopensource · May 4, 2024 · 20c6ce0 · 20c6ce0
1 parent 88b52e6
commit 20c6ce0
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 48 deletions.
diff --git a/static/js/redux/ui/modals/PeerModal.tsx b/static/js/redux/ui/modals/PeerModal.tsx
@@ -26,6 +26,7 @@ import RequestsReceived from "./PeerModalComponents/RequestsReceived";
 import FindNewFriends from "./PeerModalComponents/FindNewFriends";
 import CurrentFriends from "./PeerModalComponents/CurrentFriends";
 import RequestsSent from "./PeerModalComponents/RequestsSent";
+import { selectTheme } from "../../state/slices/themeSlice";
 
 const modalStyle = {
   height: "85%",
@@ -49,6 +50,10 @@ const emptyState = (
   </div>
 );
 
+/**
+ * Why is this called ghost card
+ */
+
 const ghostCard = (
   <div className="ghost peer-card">
     <div className="peer-card-wrapper">
@@ -113,6 +118,9 @@ const PeerModal = () => {
   const slotColorData = useAppSelector(selectSlotColorData);
   const [tab, setTab] = useState(0);
 
+  const theme = useAppSelector(selectTheme);
+  const isDarkMode = theme && theme.name && theme.name === "dark"; // whether dark mode is toggled
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setTab(newValue);
   };
@@ -315,52 +323,70 @@ const PeerModal = () => {
   }
 
   const sideBar = (
-    <div>
-      <Box
+    <Box
+      sx={{
+        flexGrow: 1,
+        bgcolor: isDarkMode ? "#2d2e32" : "background.paper",
+        display: "flex",
+        height: "100%",
+      }}
+    >
+      <Tabs
+        orientation="vertical"
+        variant="fullWidth"
+        value={tab || false}
+        onChange={handleChange}
+        aria-label="Vertical tabs example"
         sx={{
-          flexGrow: 1,
-          bgcolor: "background.paper",
-          display: "flex",
-          height: "100%",
+          borderRight: 1,
+          borderColor: isDarkMode ? "#A9A9A9" : "divider",
+          minWidth: "100px",
         }}
       >
-        <Tabs
-          orientation="vertical"
-          variant="fullWidth"
-          value={tab || false}
-          onChange={handleChange}
-          aria-label="Vertical tabs example"
-          sx={{
-            borderRight: 1,
-            borderColor: "divider",
-            minWidth: "100px",
-          }}
-        >
-          <Tab label="Classmates" {...a11yProps(0)} />
-          <Tab label="Find New Friends" {...a11yProps(1)} />
-          <Tab label="Current Friends" {...a11yProps(2)} />
-          <Tab label="Requests Received" {...a11yProps(3)} />
-          <Tab label="Requests Sent" {...a11yProps(4)} />
-        </Tabs>
-        <Box sx={{ flexGrow: 1 }}>
-          <TabPanel value={tab} index={0}>
-            {display}
-          </TabPanel>
-          <TabPanel value={tab} index={1}>
-            <FindNewFriends />
-          </TabPanel>
-          <TabPanel value={tab} index={2}>
-            <CurrentFriends />
-          </TabPanel>
-          <TabPanel value={tab} index={3}>
-            <RequestsReceived />
-          </TabPanel>
-          <TabPanel value={tab} index={4}>
-            <RequestsSent />
-          </TabPanel>
-        </Box>
+        <Tab
+          label="Classmates"
+          {...a11yProps(0)}
+          sx={isDarkMode ? { color: "#ceddeb" } : undefined} // dark mode font color
+        />
+        <Tab
+          label="Find New Friends"
+          {...a11yProps(1)}
+          sx={isDarkMode ? { color: "#ceddeb" } : undefined}
+        />
+        <Tab
+          label="Current Friends"
+          {...a11yProps(2)}
+          sx={isDarkMode ? { color: "#ceddeb" } : undefined}
+        />
+        <Tab
+          label="Requests Received"
+          {...a11yProps(3)}
+          sx={isDarkMode ? { color: "#ceddeb" } : undefined}
+        />
+        <Tab
+          label="Requests Sent"
+          {...a11yProps(4)}
+          sx={isDarkMode ? { color: "#ceddeb" } : undefined}
+        />
+      </Tabs>
+      <Box sx={{ flexGrow: 1, overflowY: "auto" }}>
+        <TabPanel value={tab} index={0}>
+          {display}
+        </TabPanel>
+        <TabPanel value={tab} index={1}>
+          <FindNewFriends />
+        </TabPanel>
+        <TabPanel value={tab} index={2}>
+          <CurrentFriends />
+        </TabPanel>
+        <TabPanel value={tab} index={3}>
+          <RequestsReceived />
+        </TabPanel>
+        <TabPanel value={tab} index={4}>
+          <RequestsSent />
+        </TabPanel>
       </Box>
-    </div>
+    </Box>
   );
 
   return (

diff --git a/static/js/redux/ui/modals/PeerModalComponents/FindNewFriends.tsx b/static/js/redux/ui/modals/PeerModalComponents/FindNewFriends.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { selectTheme } from "../../../state/slices/themeSlice";
 import {
   List,
   ListItem,
@@ -19,12 +20,15 @@ import {
 } from "../../../constants/endpoints";
 import Cookie from "js-cookie";
 import { User } from "./Types";
+import { useAppSelector } from "../../../hooks";
 
 const FindNewFriends = () => {
   const [searchResults, setSearchResults] = useState<User[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
   const [isSearching, setIsSearching] = useState(false);
   const [requestSent, setRequestSent] = useState<{ [key: string]: boolean }>({});
+  const theme = useAppSelector(selectTheme);
+  const isDarkMode = theme && theme.name && theme.name === "dark";
 
   useEffect(() => {
     const fetchFriendRequestsSent = async () => {
@@ -42,11 +46,6 @@ const FindNewFriends = () => {
 
   useEffect(() => {
     const fetchSearchResults = async () => {
-      if (searchTerm === "") {
-        setSearchResults([]);
-        setIsSearching(false);
-        return;
-      }
       setIsSearching(true);
       const response = await fetch(getSearchFriendsEndpoint(searchTerm));
       const responseJson = await response.json();
@@ -86,9 +85,26 @@ const FindNewFriends = () => {
           onChange={handleSearchChange}
           margin="normal"
           fullWidth
+          // darkmode pallete for fonts and border
+          {...(isDarkMode && {
+            InputLabelProps: { style: { color: "white" } },
+            sx: {
+              "& .MuiOutlinedInput-root": {
+                "& fieldset": {
+                  borderColor: "darkgrey",
+                },
+                "&:hover fieldset": {
+                  borderColor: "darkgrey",
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: "darkgrey",
+                },
+              },
+            },
+          })}
         />
       </Box>
-      {isSearching && <CircularProgress />}
+      {isSearching && searchTerm.length > 0 && <CircularProgress />}
       {!isSearching && searchTerm && searchResults.length > 0 && (
         <List
           sx={{ width: "100%", maxWidth: 600, maxHeight: "60%", overflowY: "auto" }}