diff --git a/package-lock.json b/package-lock.json index e3e9bf88..0416f71d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,15 +2,5 @@ "name": "wiq_en3b", "lockfileVersion": 3, "requires": true, - "packages": { - "node_modules/nvm": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/nvm/-/nvm-0.0.4.tgz", - "integrity": "sha512-jvmyELykYcdyd0VCGY0E8Aqe5MngEasVvlPvrcJHbwBMUbVqa72mPdQuPzyTcykEtEx7jDrMY0QA5MoV+8EhgA==", - "deprecated": "This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.", - "bin": { - "nvm": "bin/nvm" - } - } - } + "packages": {} } diff --git a/webapp/public/KaWD.png b/webapp/public/KaWD.png new file mode 100644 index 00000000..ab665115 Binary files /dev/null and b/webapp/public/KaWD.png differ diff --git a/webapp/public/KaWDark.png b/webapp/public/KaWDark.png new file mode 100644 index 00000000..539ed03c Binary files /dev/null and b/webapp/public/KaWDark.png differ diff --git a/webapp/public/KaW_D.png b/webapp/public/KaW_D.png new file mode 100644 index 00000000..7cf28273 Binary files /dev/null and b/webapp/public/KaW_D.png differ diff --git a/webapp/src/App.js b/webapp/src/App.js index fdf9317b..029a1a9e 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -27,7 +27,7 @@ function App() { }> - }> + }> }> }> } /> diff --git a/webapp/src/components/Header/Header.css b/webapp/src/components/Header/Header.css index 4b66141c..d9f8785e 100644 --- a/webapp/src/components/Header/Header.css +++ b/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; } diff --git a/webapp/src/components/Header/Header.js b/webapp/src/components/Header/Header.js index fe54ff57..9b690e89 100644 --- a/webapp/src/components/Header/Header.js +++ b/webapp/src/components/Header/Header.js @@ -38,7 +38,7 @@ const Header = props => { return (
- Logo of Know and Win APP + Logo of Know and Win APP
diff --git a/webapp/src/context/SettingsContext.js b/webapp/src/context/SettingsContext.js index de63abe7..56f9a5e4 100644 --- a/webapp/src/context/SettingsContext.js +++ b/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 ( diff --git a/webapp/src/hooks/useTheme.js b/webapp/src/hooks/useTheme.js index fceefff1..074b4991 100644 --- a/webapp/src/hooks/useTheme.js +++ b/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]) diff --git a/webapp/src/index.css b/webapp/src/index.css index 5bb2fa68..d6179c64 100644 --- a/webapp/src/index.css +++ b/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; +} diff --git a/webapp/src/pages/Game/Game.css b/webapp/src/pages/Game/Game.css index b1d9a49b..9c36de1d 100644 --- a/webapp/src/pages/Game/Game.css +++ b/webapp/src/pages/Game/Game.css @@ -22,3 +22,7 @@ h2 { max-width: 50ch; text-align: center; } + +.question-text { + font-size: 1.5rem; +} \ No newline at end of file diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css index a6015589..01c9ca4c 100644 --- a/webapp/src/pages/Home/Home.css +++ b/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; } \ No newline at end of file diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js index 44af7b21..13e96e1f 100644 --- a/webapp/src/pages/Home/Home.js +++ b/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 (
{user ? ( <> - Logo of Know and Win APP + Logo of Know and Win APP
{t("home.welcome")} {user.username}
@@ -31,9 +45,9 @@ function Home() {
Please, login to play the game
)} - -
{t("play.nav_title")} - + +
{t("play.nav_title")} +