Dark mode done

src/App.js

@@ -35,6 +35,8 @@ function App() {
   const [workspaceID, setWorspaceID] = useState(0)
   const [projectID, setProjectID] = useState(0)
 
+  const [darkMode, setDarkmode] = useState(false)
+
   const auth = getAuth()
 
   onAuthStateChanged(auth, (user) => {
@@ -46,27 +48,49 @@ function App() {
       }
 
   })
-    
+
+  const root = document.getElementById('root')
+
+  if (window.location.href.split('/')[3].includes('identify') || window.location.href.split('/')[3].includes('config-account')) {
+      
+      root.style.height = '100%'
+      root.style.display = 'flex'
+      root.style.flexDirection ='column'
+      
+  } else {
+      console.log(false)
+  }
+  
   return (
     <Router>
       <>
         <Header 
           signIn={signIn}
+
+          darkMode={darkMode}
+          setDarkmode={setDarkmode}
         />
         
         <Switch>
 
           <Route path="/config-account">
-              <Account />
+              <Account
+              
+                darkMode={darkMode}
+              />
           </Route>
 
           <Route path="/identify">
-            <Identify />
+            <Identify
+
+              darkMode={darkMode}
+            />
           </Route>
 
           <Route path="/">
             <BannerLogin 
               signIn={signIn}
+              darkMode={darkMode}
             />
 
             <ClockifyTasksDisplay
@@ -84,6 +108,8 @@ function App() {
 
               projectID={projectID}
               setProjectID={setProjectID}
+              
+              darkMode={darkMode}
             />
 
             <MainPomodoro 
@@ -102,20 +128,34 @@ function App() {
               projectID={projectID}
               setProjectID={setProjectID}
 
+              darkMode={darkMode}
             />
 
             <GoDownArrow 
               direction={'about-this'}
+              darkMode={darkMode}
+
+            />
+            <AboutThis
+              darkMode={darkMode}
+
             />
-            <AboutThis />
 
             <GoDownArrow 
               direction={'credits'}
+              darkMode={darkMode}
+
             />
-            <Credits />
-            <Footer />
+            <Credits
+              darkMode={darkMode}
+          />
           </Route>
         </Switch>
+
+        <Footer
+          darkMode={darkMode}
+
+        />
       </>
     </Router>
   );

src/components/AboutThis.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-const AboutThis = () => {
+const AboutThis = (props) => {
     
     return (
-        <div id="about-this">
+        <div id="about-this" className={props.darkMode ? 'dark-mode-component' : null}>
             <div className="titles">
                 <h3>About<span className="line-through"> us </span>this</h3>
             </div>

src/components/Account.jsx

@@ -3,9 +3,10 @@ import {firebase} from './Firebase/firebase'
 import {getAuth, onAuthStateChanged} from 'firebase/auth'
 import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
 import Message from './Account Childrens/Message';
-import loadingGif from './img/loading.gif'
+import loadingGifLightTheme from './img/loading-light-theme.png'
+import loadingGifDarkTheme from './img/loading-dark-theme.png'
 
-const Account = () => {
+const Account = (props) => {
 
     const [signIn, setSignIn] = useState('false')
     const [apiKey, setApiKey] = useState('')
@@ -161,14 +162,14 @@ const Account = () => {
 
     if (loading) {
         return (
-            <div className="loading-container">
-                <img src={loadingGif} alt="" />
+            <div className={props.darkMode ? "loading-container dark-mode-component" : "loading-container"}>
+                <img src={props.darkMode ? loadingGifDarkTheme : loadingGifLightTheme} alt="" />
             </div>
         )
     }
     
     return (
-        <div className="account-container">
+        <div className={props.darkMode ? "account-container dark-mode-component" : "account-container"}>
             {
                 actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? <Message message={actualState}/> : null
             }

src/components/BannerLogin.jsx

@@ -16,7 +16,7 @@ const BannerLogin = (props) => {
                             <button className="login" onClick={() => {window.location = '/identify?act=l'}}>Login</button>
                         </div>
                     </div>
-                : <div className="banner-login blank">
+                : <div className={props.darkMode ? 'banner-login blank dark-mode-component' : 'banner-login blank'}>
                     
                 </div>
             }

src/components/ClockifyTasksDisplay.jsx

@@ -3,7 +3,8 @@ import React, {useState} from 'react'
 import { firebase } from './Firebase/firebase';
 import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
-import loadingGif from './img/loading.gif'
+import loadingGifLightTheme from './img/loading-light-theme.png'
+import loadingGifDarkTheme from './img/loading-dark-theme.png'
 
 const ClockifyTasksDisplay = (props) => {
     
@@ -85,9 +86,9 @@ const ClockifyTasksDisplay = (props) => {
     
             setWorkspacesReady(true)
             setLoading(false)
+
         }
-        
-        
+                
     }
     
     React.useEffect( () => {
@@ -164,22 +165,26 @@ const ClockifyTasksDisplay = (props) => {
         props.setProjectID(e)
     }
 
-    if (loading && userUID !== '' && apiAvailable) {
+    if (loading && userUID) {
+
+
+        if (!apiAvailable) {
+            return (<div></div>)
+
+        } else {
+
+            return (
+                <div className="clockify-tasks-display loading-container">
+                    <img src={props.darkMode ? loadingGifDarkTheme : loadingGifLightTheme} alt=""/>
+                </div>
+            )
+        }
 
-        return (
-            <div className="clockify-tasks-display loading-container">
-                <img src={loadingGif} alt=""/>
-            </div>
-        )
     }
 
 
-    if (!apiAvailable) {
-        return (<div></div>)
-    }
-
     return (
-        <>
+        <div className={props.darkMode ? 'clockify-tasks-display-container dark-mode-container' : 'clockify-tasks-display-container'}>
             {
                 userUID ?
                     <div className={props.timerOn ? 'clockify-tasks-display disabled' : 'clockify-tasks-display'}>
@@ -217,7 +222,7 @@ const ClockifyTasksDisplay = (props) => {
                     </div>
                 : null
             }
-        </>
+        </div>
         
     )
 }

src/components/Credits.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Credits = () => {
+const Credits = (props) => {
     return (
-        <div id="credits">
+        <div id="credits" className={props.darkMode ? 'dark-mode-component' : null}>
             <div className="titles">
                 <h3>Credits</h3>
             </div>

src/components/Footer.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Footer = () => {
+const Footer = (props) => {
     return (
-        <footer className="made-with-love">
+        <footer className={props.darkMode ? 'made-with-love dark-mode-component' : 'made-with-love'}>
             Made with 💓 by <a href="http://www.franp.xyz">Francisco Pessano</a>
         </footer>
     )

src/components/GoDownArrow.jsx

@@ -3,23 +3,18 @@ import { Link, animateScroll as scroll } from "react-scroll";
 
 const GoDownArrow = (props) => {
 
-        
         const width = window.screen.width
 
-        
-
         if (width <= '991.98') {
             return (
-                <div className="go-down-separator-line">
-                    <hr/>
+                <div className={props.darkMode ? 'go-down-separator-line dark-mode-component' : 'go-down-separator-line'}>
+                        <hr/>
                 </div>
             )
         }
 
-    
-
     return (
-        <div className="go-down">
+        <div className={props.darkMode ? 'go-down dark-mode-component' : 'go-down'} id={props.direction === 'credits' ? 'go-to-credits' : null}>
             <Link to={props.direction} smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>
         </div>
     )

src/components/Header Childrens/DarkMode.jsx

@@ -1,11 +1,40 @@
 import React from 'react'
 
-const DarkMode = () => {
+const DarkMode = (props) => {
+
+    React.useEffect( () => {
+
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            props.setDarkmode(true)
+    
+            const darkModeSwitch = document.getElementById('dark-mode_toogle-switch')
+    
+            darkModeSwitch.checked = true
+        }
+
+        const darkModeCache = localStorage.getItem('dark-mode')
+        console.log(darkModeCache)
+
+        if (darkModeCache === 'true') {
+            props.setDarkmode(true)
+    
+            const darkModeSwitch = document.getElementById('dark-mode_toogle-switch')
+    
+            darkModeSwitch.checked = true
+        }
+
+    }, [])
+
+    const changeTheme = () => {
+        props.setDarkmode(!props.darkMode)
+
+        localStorage.setItem('dark-mode', !props.darkMode)
+    }
+
+    
     return (
         <div className="dark-mode">
-            <input type="checkbox" id="dark-mode_toogle-switch" onChange={() => {
-                
-            }}/>
+            <input type="checkbox" id="dark-mode_toogle-switch" onChange={changeTheme}/>
             <label htmlFor="dark-mode_toogle-switch"></label>
         </div>
     )

src/components/Header Childrens/GoToAccount.jsx

@@ -6,10 +6,10 @@ const GoToAccount = (props) => {
             {
                 props.signIn ? 
                     <>
-                        <a href="/config-account" className="go-to-account">
+                        <a href="/config-account" className={props.darkMode ? 'go-to-account dark-mode-component' : 'go-to-account'}>
                             <div className="go-to-account-text">API</div>
                         </a>
-                        <a href="/identify?act=clss" className="close-session">
+                        <a href="/identify?act=clss" className={props.darkMode ? 'close-session dark-mode-component' : 'close-session'}>
                             <div className="close-session-text">Close session</div>
                         </a>
                     </>

src/components/Header.jsx

@@ -7,11 +7,17 @@ const Header = (props) => {
     
     
     return (
-        <header className="header-main-page">
+        <header className={props.darkMode ? 'header-main-page dark-mode-component' : 'header-main-page'} >
             <a href="/"><h1>Pomodoro Timer</h1></a>
             <h3>Made By <span className="selectable"><a target="_blank" href="http://www.franp.xyz" rel="noreferrer">Francisco Pessano</a></span></h3>
-            <DarkMode />
-            <GoToAccount signIn={props.signIn}/>
+            <DarkMode
+                darkMode={props.darkMode} 
+                setDarkmode={props.setDarkmode}
+            />
+            <GoToAccount
+                signIn={props.signIn}
+                darkMode={props.darkMode} 
+                />
         </header>
     )
 }

src/components/Identify.jsx

@@ -171,6 +171,7 @@ const Identify = (props) => {
 
         if (action === 'clss') {
             signOutFromApp()
+            props.history.push('/')
         }
 
         onAuthStateChanged(auth, (user) => {
@@ -182,7 +183,7 @@ const Identify = (props) => {
 
 
     return (
-        <div className="identify-container">
+        <div className={props.darkMode ? 'identify-container dark-mode-component' : 'identify-container'}>
             <div className="error-message-container">
                 {
                     errorMessage ? <p>{errorMessage}</p> : null

src/components/Main Pomodoro Childrens/PomodoroCounter.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 const PomodoroCounter = (props) => {
 
     return (
-        <div className="pomodoro-counter">
+        <div className={props.darkMode ? 'pomodoro-counter dark-mode-component': 'pomodoro-counter'}>
             <ul>
                 <li>
                     <span className="quantity">{props.pomodoros}</span><span className="separator"> - </span>Pomodoros

src/components/Main Pomodoro Childrens/StyleSelector.jsx

@@ -3,14 +3,16 @@ import StyleSelectionChildren from './Style Selector Children/StyleSelectionChil
 
 const StyleSelector = (props) => {
     return (
-        <div className={`style-selector ${props.displayHidden ? 'style-selector-hidden': 'style-selector-show'}`} >
-            <h2>Select Style</h2>
-        
-            <div className="style-selection-container">
-                <StyleSelectionChildren number={1} title={"Can I play, Daddy?"} times={"10 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
-                <StyleSelectionChildren number={2} title={"Regular"} times={"25 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
-                <StyleSelectionChildren number={3} title={"Creative work"} times={"50 min. | 10 min. | 20 min."} style={props.style} setStyle={props.setStyle}/>
-                <StyleSelectionChildren number={4} title={"Last minute delivery"} times={"90 min. | 15 min. | 30 min."} style={props.style} setStyle={props.setStyle}/>
+        <div className={props.darkMode ? 'style-selector-container dark-mode-component' : 'style-selector-container'}>
+            <div className={`style-selector ${props.displayHidden ? 'style-selector-hidden': 'style-selector-show'}`} >
+                <h2>Select Style</h2>
+            
+                <div className="style-selection-container">
+                    <StyleSelectionChildren number={1} title={"Can I play, Daddy?"} times={"10 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
+                    <StyleSelectionChildren number={2} title={"Regular"} times={"25 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
+                    <StyleSelectionChildren number={3} title={"Creative work"} times={"50 min. | 10 min. | 20 min."} style={props.style} setStyle={props.setStyle}/>
+                    <StyleSelectionChildren number={4} title={"Last minute delivery"} times={"90 min. | 15 min. | 30 min."} style={props.style} setStyle={props.setStyle}/>
+                </div>
             </div>
         </div>
     )

src/components/MainPomodoro.jsx

@@ -44,7 +44,7 @@ const MainPomodoro = (props) => {
 
 
     return (
-        <>
+        <div className={props.darkMode ? 'main-pomodoro-container dark-mode-component' : 'main-pomodoro-container'}>
             <div className="main-pomodoro">
 
                 <MainPomodoroTimer
@@ -103,9 +103,9 @@ const MainPomodoro = (props) => {
                 }</button>
             </div>
 
-            <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
-            <PomodoroCounter pomodoros={pomodoros} rests={rests} longRests={longRests}/>
-        </>
+            <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle} darkMode={props.darkMode}/>
+            <PomodoroCounter pomodoros={pomodoros} rests={rests} longRests={longRests} darkMode={props.darkMode}/>
+        </div>
         
 
     )