Merge pull request #222 from Arquisoft/dark-mode-fix

Dark mode fix

webapp/src/App.js

@@ -27,7 +27,7 @@ function App() {
       <AuthProvider>
         <Routes>
           <Route element={<AppLayout volume={volume} />}>
-            <Route path="/" index element={<Home />}></Route>
+            <Route path="/" index element={<Home  />}></Route>
             <Route path="/login" element={<Login />}></Route>
             <Route path="/register" element={<Register />}></Route>
             <Route path="/logout" element={<Logout />} />

webapp/src/components/Header/Header.css

@@ -155,5 +155,11 @@ img {
 }
 
 .homeButton {
-  align-items: center;
+  margin-top: 0;
+}
+
+.homeButton img {
+  max-width: 100%;
+  margin: 0;
+  vertical-align: middle;
 }

webapp/src/components/Header/Header.js

@@ -38,7 +38,7 @@ const Header = props => {
   return (
     <header className="header">
       <Link className='homeButton' to="/">
-        <img src="KaW.png" alt="Logo of Know and Win APP" />
+        <img src={props.theme === "light" ? "KaW.png" : "KaW_D.png"} alt="Logo of Know and Win APP" />
       </Link>
 
       <div className="options">

webapp/src/context/SettingsContext.js

@@ -7,23 +7,36 @@ export const SettingsContext = createContext()
 export function SettingsProvider({ children }) {
   const [settings, setSettings] = useLocalStorage('settings', {
     time: DEFAULT_TIME,
+    theme: 'light',
   })
 
   const changeTimeTo = useCallback(
     newTime => {
-      setSettings({
+      const newSettings = {
+        ...settings,
         time: newTime,
-      })
+      };
+      setSettings(newSettings);
     },
-    [setSettings]
+    [settings, setSettings]
   )
+
+  const toggleTheme = useCallback(() => {
+    const newSettings = {
+      ...settings,
+      theme: settings.theme === 'light' ? 'dark' : 'light',
+    };
+    setSettings(newSettings);
+  }, [settings, setSettings])
 
   const value = useMemo(
     () => ({
       time: settings.time,
+      theme: settings.theme,
       changeTimeTo,
+      toggleTheme,
     }),
-    [settings.time, changeTimeTo]
+    [settings.time, settings.theme, changeTimeTo, toggleTheme]
   )
 
   return (

webapp/src/hooks/useTheme.js

@@ -6,6 +6,7 @@ const useTheme = () => {
   useEffect(() => {
     if (localStorage.getItem("theme")) {
       setTheme(localStorage.getItem("theme"))
+      window.dispatchEvent(new Event('theme-changed'))
     }
   }, [theme])
 

webapp/src/index.css

@@ -10,6 +10,8 @@
   --dark-gray: #121212;
   --black: #000;
   --gray: #252525;
+  --light-gray: #252525;
+  --almost-dark-gray: #1c1c1c;
 }
 
 #root > div {
@@ -51,11 +53,23 @@ main {
 }
 
 .dark .selected-language{
-  background-color: var(--dark-gray);
+  background-color: var(--almost-dark-gray);
+  color: #fff;
+}
+
+.dark .selected-language:hover{
+  background-color: var(--light-gray);
+  color: #fff;
 }
 
 .dark .language-options {
-  background-color: var(--dark-gray);
+  background-color: var(--almost-dark-gray);
+  color: #fff;
+}
+
+.dark .language-option:hover {
+  background-color: var(--light-gray);
+  color: #fff;
 }
 
 .dark .volume-slider-container {
@@ -67,13 +81,28 @@ main {
 }
 
 .dark .nav-link:hover {
-  color: #4f6fdd;
+  background-color: var(--light-gray);
 }
 
 .dark .nav-link-icon {
   fill: #fff;
 }
 
+.dark .button:hover {
+  background-color: #fff;
+  color: #747ae7;
+}
+
+.dark .sound:hover {
+  background-color: var(--light-gray);
+  color: #fff;
+}
+
+.dark .theme:hover {
+  background-color: var(--light-gray);
+  color: #fff;
+}
+
 .dark .answer-item:hover {
   background-color: var(--dark-gray);
   border-color: var(--dark-gray);
@@ -110,10 +139,58 @@ main {
 
 .dark .theme {
   background-color: var(--dark-gray);
-  color: #747ae7;
+  color: #fff;
 }
 
 .dark .sound {
+  background-color: var(--dark-gray);
+  color: #fff;
+}
+
+.dark .swipe {
+  background-color: var(--dark-gray);
+  color: #747ae7;
+}
+
+.dark .swipe:hover {
+  background-color: var(--dark-gray);
+  color: red;
+}
+
+.dark .profile-title {
+  color: #747ae7;
+}
+
+.dark .bio-textarea {
+  background-color: var(--light-gray);
+  color: #fff;
+}
+
+.dark .profile-header{
+  border: 2px solid #fff;
+}
+
+.dark tr {
+  background-color: var(--dark-gray);
+  color: #fff;
+}
+
+.dark tr th {
+  background-color: var(--dark-gray);
+  color: #fff;
+}
+
+.dark td {
+    background-color: var(--dark-gray);
+    color: #fff;
+}
+
+.dark td a{
+  background-color: var(--dark-gray);
+  color: #fff;
+}
+
+.dark td a:hover{
   background-color: var(--dark-gray);
   color: #747ae7;
 }
@@ -130,3 +207,27 @@ main {
     right: -5px;
   }
 }
+
+.dark input[type=range]{
+  background: transparent;
+}
+
+.dark input[type=range]::-webkit-slider-thumb{
+  background: #747ae7;
+}
+
+.dark input[type=range]::-webkit-slider-runnable-track{
+  background: #747ae7;
+}
+
+.dark strong {
+  color: #747ae7;
+}
+
+.dark h1 {
+  color: #747ae7;
+}
+
+.dark h2 {
+  color: #747ae7;
+}

webapp/src/pages/Game/Game.css

@@ -22,3 +22,7 @@ h2 {
   max-width: 50ch;
   text-align: center;
 }
+
+.question-text {
+  font-size: 1.5rem;
+}

webapp/src/pages/Home/Home.css

@@ -120,4 +120,14 @@
 
 .btn:-webkit-any-link {
     text-decoration: none !important;
+}
+
+.swipe {
+    color: #747ae7;
+    font-weight: bold;
+}
+
+.swipe:hover {
+    color: red;
+    font-weight: bold;
 }

webapp/src/pages/Home/Home.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useAuth } from '../../hooks/useAuth'
 import { useNavigate } from 'react-router-dom'
 import { Link } from 'react-router-dom'
@@ -11,18 +11,32 @@ function Home() {
   const { user } = useAuth()
 
   const { t } = useTranslation()
+  const [theme, setTheme] = useState(localStorage.getItem('theme'))
+
+  useEffect(() => {
+    const handler = () => {
+        setTheme(localStorage.getItem('theme'))
+    }
+
+    window.addEventListener('theme-changed', handler)
+
+    return () => {
+        window.removeEventListener('theme-changed', handler)
+    }
+  }, [])
 
   useEffect(() => {
     if (!user) {
       navigate('/login')
     }
   }, [user, navigate])
+
 
   return (
     <div className='homeDiv'>
       {user ? (
         <>
-          <img className="App-logo" src="KaW.png" alt="Logo of Know and Win APP" />
+          <img className="App-logo" src={theme === 'light' ? "KaW.png" : "KaW_D.png"} alt="Logo of Know and Win APP" />
           <div className="welcome-message">
             {t("home.welcome")} <strong>{user.username}</strong>
           </div>
@@ -31,9 +45,9 @@ function Home() {
         <div>Please, login to play the game</div>
       )}
 
-      <Link to="game" class="btn">
-        <div class="swipe">{t("play.nav_title")}
-          <span class="startBtn">
+      <Link to="game" className="btn">
+        <div className="swipe">{t("play.nav_title")}
+          <span className="startBtn">
             <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path d="M0 0h24v24H0z" fill="none">
               </path>