Merge pull request #314 from SWE574-Fall2023-Group1/feature/299-imple…

…ment-dark-mode Feature/299 implement dark mode
SWE574-Fall2023-Group1 · Dec 25, 2023 · 0256a41 · 0256a41
2 parents f86a099 + 9d6ebe2
commit 0256a41
Show file tree

Hide file tree

Showing 21 changed files with 146 additions and 106 deletions.
diff --git a/backend/frontend/src/App.js b/backend/frontend/src/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Header from './components/header/header';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
@@ -13,11 +13,21 @@ const theme = createTheme({
   },
 });
 
+const customTheme = createTheme();
+
 function App() {
+  const [currentTheme, setCurrentTheme] = useState('default'); // add a state variable for the current theme
+
+  const toggleTheme = () => {
+    setCurrentTheme(currentTheme === 'default' ? 'custom' : 'default');
+  };
 
   return (
-    <ThemeProvider theme={theme}>
-    <Header/>
+    <ThemeProvider theme={currentTheme === 'default' ? theme : customTheme}>
+      {currentTheme === 'custom' && <div style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.8)', zIndex: 1}}></div>}
+      <div style={{ position: 'relative', zIndex: 2 }}> {/* this will ensure the content stays in front of the div */}
+        <Header toggleTheme={toggleTheme} currentTheme={currentTheme}/>
+      </div>
     </ThemeProvider>
   );
 }

diff --git a/backend/frontend/src/components/header/header.css b/backend/frontend/src/components/header/header.css
@@ -28,7 +28,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #8E8A8A;;
+    /* background-color: #3a3a3a;; */
     padding: 10px;
     max-width: 100%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

diff --git a/backend/frontend/src/components/header/header.js b/backend/frontend/src/components/header/header.js
@@ -28,8 +28,9 @@ import LocationSearch from "../../pages/search/Timeline";
 import SearchResults from "../../pages/search/SearchResults";
 import ActivityStream from "../../pages/activity/ActivityStream";
 import Recommendations from "../../pages/recom/Recommendations";
+import Button from '@mui/material/Button'
 
-function Header() {
+function Header({ toggleTheme, currentTheme }) {
   console.log("Rendering Header");
 
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -59,7 +60,7 @@ function Header() {
   return (
     <Router>
       <div className="container">
-        <nav className="navbar" style={{justifyContent: isLoggedIn ? "space-between" : "start"}}>
+        <nav className="navbar" style={{ justifyContent: isLoggedIn ? "space-between" : "start", backgroundColor: currentTheme === 'custom' ? '#3a3a3a' : '#8E8A8A' }}>
             {!isLoggedIn && (
               <>
                 <Link to="/" className="nav-item nav-link">
@@ -71,6 +72,7 @@ function Header() {
                 <Link to="/login" className="nav-item nav-link">
                   Login
                 </Link>
+                <Button style={{ marginRight: "25px", backgroundColor: currentTheme === 'custom' ? 'orange' : 'purple', color:'#ffffff' }} onClick={toggleTheme}> {currentTheme === 'custom' ? 'Light Mode' : 'Dark Mode'} </Button>
               </>
             )}
             {isLoggedIn && (
@@ -97,6 +99,7 @@ function Header() {
                 <Link to="/recommendation" className="nav-item nav-link">
                   Recommendations
                 </Link>
+                <Button style={{ marginRight: "25px", backgroundColor: currentTheme === 'custom' ? 'orange' : 'purple', color:'#ffffff' }} onClick={toggleTheme}> {currentTheme === 'custom' ? 'Light Mode' : 'Dark Mode'} </Button>
                 <UserSearch />
                 <LogoutButton />
               </>
@@ -141,31 +144,31 @@ function Header() {
 
             {isLoggedIn && (
               <>
-                <Route path="*" element={<Navigate to="/homepage" />} />
-                <Route path="/homepage" element={<StoryContainer />} />
-                <Route path="/create-story" element={<CreateStory />} />
-                <Route path="/story/:id" element={<StoryDetails />} />
-                <Route path="/user-profile" element={<UserProfile />} />
+                <Route path="*" element={<Navigate to="/homepage" currentTheme={currentTheme}/>} />
+                <Route path="/homepage" element={<StoryContainer currentTheme={currentTheme}/>} />
+                <Route path="/create-story" element={<CreateStory currentTheme={currentTheme}/>} />
+                <Route path="/story/:id" element={<StoryDetails currentTheme={currentTheme}/>} />
+                <Route path="/user-profile" element={<UserProfile currentTheme={currentTheme}/>} />
                 <Route
                   path="/user-profile/:id"
-                  element={<UserProfileOthers />}
+                  element={<UserProfileOthers currentTheme={currentTheme}/>}
                 />
                 <Route
                   path="/SearchUserResults/:searchQuery"
-                  element={<SearchUserResults />}
+                  element={<SearchUserResults currentTheme={currentTheme}/>}
                 />
-                <Route path="/story_search" element={<StorySearch />} />
+                <Route path="/story_search" element={<StorySearch currentTheme={currentTheme}/>} />
                 <Route
                   path="/timeline"
-                  element={<LocationSearch />}
+                  element={<LocationSearch currentTheme={currentTheme}/>}
                 />
                 <Route
                   path="/search-results"
-                  element={<SearchResults />}
+                  element={<SearchResults currentTheme={currentTheme}/>}
                 />
-                <Route path="/edit-story/:storyId" element={<EditStory />} />
-                <Route path="/activity-stream" element={<ActivityStream />} />
-                <Route path="/recommendation" element={<Recommendations />} />
+                <Route path="/edit-story/:storyId" element={<EditStory currentTheme={currentTheme}/>} />
+                <Route path="/activity-stream" element={<ActivityStream currentTheme={currentTheme}/>} />
+                <Route path="/recommendation" element={<Recommendations currentTheme={currentTheme}/>} />
               </>
             )}
           </Routes>

diff --git a/backend/frontend/src/pages/activity/ActivityStream.js b/backend/frontend/src/pages/activity/ActivityStream.js
@@ -15,7 +15,7 @@ import PersonRemoveIcon from '@mui/icons-material/PersonRemove';
 import withAuth from '../../authCheck';
 
 
-function ActivityStream() {
+function ActivityStream({ currentTheme }) {
   const [activities, setActivities] = useState([]);
   const navigate = useNavigate();
 
@@ -187,11 +187,11 @@ function ActivityStream() {
 
   return (
     <Box sx={{ m: 'auto', maxWidth: '1200px', height: '100vh', padding: '10px' }}>
-      <h1 style={{ fontFamily: "'Josefin Sans', sans-serif" }} align="center" gutterBottom>
+      <h1 style={{fontFamily: "'Josefin Sans', sans-serif", color: currentTheme === 'custom' ? '#ffffff' : '#000000' }} align="center" gutterBottom>
       Activity Stream
     </h1>
       {activities.length === 0 ? (
-        <Typography variant="subtitle1" align="center">
+        <Typography style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}variant="subtitle1" align="center">
           There is no activity.
         </Typography>
       ) : (

diff --git a/backend/frontend/src/pages/homepage/AllStories.js b/backend/frontend/src/pages/homepage/AllStories.js
@@ -8,7 +8,7 @@ import locationIcon from '../../assets/images/location.png'
 import dateIcon from '../../assets/images/date.png'
 
 
-function StoriesByFollowingsUsers() {
+function StoriesByFollowingsUsers({ currentTheme }) {
   const [stories, setStories] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -172,9 +172,9 @@ function StoriesByFollowingsUsers() {
         ))
       )}
       <div className={styles.pagination}>
-        <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
+        {(hasPrevPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
           Previous
-        </Button>
+        </Button>}
         {Array.from({ length: totalPages }, (_, index) => (
           <Button variant="contained"
             key={index}
@@ -184,9 +184,9 @@ function StoriesByFollowingsUsers() {
             {index + 1}
           </Button>
         ))}
-        <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
+        {(hasNextPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
           Next
-        </Button>
+        </Button>}
       </div>
     </div>
   );

diff --git a/backend/frontend/src/pages/homepage/StoriesbyFollowingUsers.js b/backend/frontend/src/pages/homepage/StoriesbyFollowingUsers.js
@@ -8,7 +8,7 @@ import locationIcon from '../../assets/images/location.png'
 import dateIcon from '../../assets/images/date.png'
 
 
-function StoriesByFollowingsUsers() {
+function StoriesByFollowingsUsers({ currentTheme }) {
   const [stories, setStories] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -174,9 +174,9 @@ function StoriesByFollowingsUsers() {
         ))
       )}
       <div className={styles.pagination}>
-        <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
+        {(hasPrevPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
           Previous
-        </Button>
+        </Button>}
         {Array.from({ length: totalPages }, (_, index) => (
           <Button variant="contained"
             key={index}
@@ -186,9 +186,9 @@ function StoriesByFollowingsUsers() {
             {index + 1}
           </Button>
         ))}
-        <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
+        {(hasNextPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
           Next
-        </Button>
+        </Button>}
       </div>
     </div>
   );

diff --git a/backend/frontend/src/pages/profile/UserProfile.css b/backend/frontend/src/pages/profile/UserProfile.css
@@ -349,3 +349,15 @@ input[type="file"] {
   font-weight: bold; /* Makes the text bold */
   /* Add any additional styling you need here */
 }
+
+.h2 {
+  color: black;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+}
+
+.p {
+  color: black;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+}
diff --git a/backend/frontend/src/pages/profile/UserProfile.js b/backend/frontend/src/pages/profile/UserProfile.js
@@ -10,7 +10,7 @@ import tick from '../../assets/images/tick.png'
 import edit from '../../assets/images/edit.png'
 
 
-const UserProfile = () => {
+const UserProfile = ({ currentTheme }) => {
   const [user, setUser] = useState(null);
   const [profilePhotoUrl, setProfilePhotoUrl] = useState(null);
   const [stories, setStories] = useState([]);
@@ -191,12 +191,12 @@ const capitalizeFirstLetter = (str) => {
       </div>
 
       <div className="center-section">
-        <div className="username">{user.username}</div>
+        <div style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }} className="username">{user.username}</div>
       </div>
 
       <div className="right-section">
         <div className="follower-info">
-          <p>{user.followers.length !== null ? user.followers.length : 'Loading...'} followers</p>
+          <p style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>{user.followers.length !== null ? user.followers.length : 'Loading...'} followers</p>
         </div>
           {profilePhotoUrl !== defaultProfilePhoto ? (
             <div className="photo-buttons">
@@ -260,9 +260,9 @@ const capitalizeFirstLetter = (str) => {
             <Button variant="contained"  type="button" onClick={() => setIsEditingBio(false)}>Cancel</Button>
           </div>
         </div>
-      ) : (
+          ) : (
         <div>
-          <h2>About Me</h2>
+          <h2 style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>About Me</h2>
           <div className="custom-bio">
             <button type="button" className="edit-buttons" onClick={() => setIsEditingBio(true)}>
               <div className="edit-button">
@@ -279,14 +279,14 @@ const capitalizeFirstLetter = (str) => {
         </div>
       )}
       <br />
-      <h2>My Recent Stories</h2>
+      <h2 style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>My Recent Stories</h2>
       {loading ? (
         <div>
-          <p>Loading stories...</p>
+          <p style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>Loading stories...</p>
         </div>
       ) : stories.length === 0 ? (
         <div>
-          <p>No stories found.</p>
+          <p style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>No stories found.</p>
         </div>
       ) : (
         <div>
@@ -299,9 +299,9 @@ const capitalizeFirstLetter = (str) => {
             </div>
           ))}
           <div className="pagination">
-            <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
+            {(hasPrevPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage - 1)} disabled={!hasPrevPage}>
               Previous
-            </Button>
+            </Button>}
             {Array.from({ length: totalPages }, (_, index) => (
               <Button variant="contained"
                 key={index}
@@ -311,9 +311,9 @@ const capitalizeFirstLetter = (str) => {
                 {index + 1}
               </Button>
             ))}
-            <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
+            {(hasNextPage) && <Button variant="contained" onClick={() => handlePageChange(currentPage + 1)} disabled={!hasNextPage}>
               Next
-            </Button>
+            </Button>}
           </div>
         </div>
       )}

diff --git a/backend/frontend/src/pages/profile/UserProfileOthers.js b/backend/frontend/src/pages/profile/UserProfileOthers.js
@@ -9,7 +9,7 @@ import tick from '../../assets/images/tick.png'
 
 
 
-const UserProfileOthers = () => {
+const UserProfileOthers = ({ currentTheme }) => {
   const [user, setUser] = useState(null);
   const [profilePhotoUrl, setProfilePhotoUrl] = useState(null);
   const [isFollowing, setIsFollowing] = useState(false);
@@ -172,12 +172,12 @@ const UserProfileOthers = () => {
             </div>
 
             <div className="center-section">
-            <div className="username">{user.username}</div>
+            <div style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }} className="username">{user.username}</div>
             </div>
             <div className="right-section">
 
               <div className="follower-info">
-                <p>{followerCount !== null ? `${followerCount} Followers` : 'Loading...'}</p>
+                <p style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>{followerCount !== null ? `${followerCount} Followers` : 'Loading...'}</p>
                 <button
                     className={`follow-button ${isFollowing ? 'follow-button-unfollow' : 'follow-button-follow'}`}
                     onClick={handleFollowClick}
@@ -189,7 +189,7 @@ const UserProfileOthers = () => {
           </div>
 
           <div className="bio-section">
-            <h2>About User</h2>
+            <h2 style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>About User</h2>
             <div className="custom-bio">
               {user.biography.split('\n').map((line, index) => (
                 <p key={index}>{capitalizeFirstLetter(line)}</p>
@@ -198,11 +198,11 @@ const UserProfileOthers = () => {
           </div>
 
           <div className="stories-section">
-            <h2>Recent Stories</h2>
+            <h2 style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>Recent Stories</h2>
             {loading ? (
-              <p>Loading stories...</p>
+              <p style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>Loading stories...</p>
             ) : stories.length === 0 ? (
-              <p>No stories found.</p>
+              <p style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000' }}>No stories found.</p>
             ) : (
               <div>
                 {stories.map((story) => (

diff --git a/backend/frontend/src/pages/recom/Recommendations.js b/backend/frontend/src/pages/recom/Recommendations.js
@@ -5,7 +5,7 @@ import styles from "./Recommendations.module.css"; // Make sure to create this C
 import locationIcon from "../../assets/images/location.png";
 import dateIcon from "../../assets/images/date.png";
 
-function Recommendations() {
+function Recommendations({ currentTheme }) {
   const [recommendedStories, setRecommendedStories] = useState([]);
   const navigate = useNavigate();
 
@@ -85,7 +85,7 @@ function Recommendations() {
 
   return (
     <div>
-      <h1 style={{ fontFamily: "'Josefin Sans', sans-serif" }}>
+      <h1 style={{ color: currentTheme === 'custom' ? '#ffffff' : '#000000', fontFamily: "'Josefin Sans', sans-serif" }}>
         Recommended for You
       </h1>
       {recommendedStories.map((recommendation) => {