From 4afd39b22f21c70b726f1cedb2deab1c1d2e55e3 Mon Sep 17 00:00:00 2001 From: Artem Krisanov Date: Mon, 17 Apr 2023 16:07:20 +0300 Subject: [PATCH] AG-21136 - Added local storage theme key. Updates#5444 Squashed commit of the following: commit 7b0b108f41ebb5e98861cdd20029c12d3a3fc5f4 Merge: 38df28db0 e43ba1788 Author: Artem Krisanov Date: Mon Apr 17 15:58:15 2023 +0300 Merge branch 'master' of ssh://bit.adguard.com:7999/dns/adguard-home into 5444-white-screen commit 38df28db0739e47d3fb605f648fa493b58709d77 Author: Artem Krisanov Date: Fri Apr 14 17:54:00 2023 +0300 Deleted useless tag. commit 78ef9d911ccf74b69a9ae5626ea8f31cb9338ae0 Author: Artem Krisanov Date: Fri Apr 14 17:53:17 2023 +0300 Set initial body data-theme. commit f470b3aa79500edd0726b7ed37e6e5940b6ce3ff Author: Artem Krisanov Date: Thu Apr 13 16:42:25 2023 +0300 Revert login changes. commit 7c4734ed02a670a59d0b9ff04e06bc1d396223a8 Author: Artem Krisanov Date: Thu Apr 13 15:51:24 2023 +0300 Added setting theme into html.Changed overlay background color to variable. commit a3743be0e69489489755db8ff55541b9a6281300 Author: Artem Krisanov Date: Wed Apr 12 17:58:47 2023 +0300 Added local storage theme key. --- client/public/index.html | 31 ++++++++++++++++++- client/public/login.html | 5 +++ client/src/components/ui/Footer.js | 8 +---- client/src/components/ui/Overlay.css | 2 +- client/src/helpers/constants.js | 2 ++ client/src/helpers/helpers.js | 46 ++++++++++++++++++++++++++-- client/src/reducers/dashboard.js | 2 +- 7 files changed, 84 insertions(+), 12 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index d736e508..730a3c95 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -12,11 +12,40 @@ AdGuard Home + -
+
+
+
+ diff --git a/client/public/login.html b/client/public/login.html index 586522c7..53f1abf5 100644 --- a/client/public/login.html +++ b/client/public/login.html @@ -17,5 +17,10 @@ You need to enable JavaScript to run this app.
+ diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js index 2cfe14ca..b35d8dd9 100644 --- a/client/src/components/ui/Footer.js +++ b/client/src/components/ui/Footer.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import cn from 'classnames'; @@ -42,12 +42,6 @@ const Footer = () => { const isLoggedIn = profileName !== ''; const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto); - useEffect(() => { - if (!isLoggedIn) { - setUITheme(currentThemeLocal); - } - }, []); - const getYear = () => { const today = new Date(); return today.getFullYear(); diff --git a/client/src/components/ui/Overlay.css b/client/src/components/ui/Overlay.css index d12a55b7..6941af52 100644 --- a/client/src/components/ui/Overlay.css +++ b/client/src/components/ui/Overlay.css @@ -13,7 +13,7 @@ font-size: 28px; font-weight: 600; text-align: center; - background-color: rgba(255, 255, 255, 0.8); + background-color: var(--rt-nodata-bgcolor); } .overlay--visible { diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index c4739489..1a3182c5 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -548,3 +548,5 @@ export const DISABLE_PROTECTION_TIMINGS = { HOUR: 60 * 60 * 1000, TOMORROW: 24 * 60 * 60 * 1000, }; + +export const LOCAL_STORAGE_THEME_KEY = 'account_theme'; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 3c1c606f..127b2902 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -26,6 +26,7 @@ import { STANDARD_WEB_PORT, SPECIAL_FILTER_ID, THEMES, + LOCAL_STORAGE_THEME_KEY, } from './constants'; /** @@ -679,19 +680,60 @@ export const setHtmlLangAttr = (language) => { window.document.documentElement.lang = language; }; +/** + * Set local storage field + * + * @param {string} key + * @param {string} value + */ + +export const setStorageItem = (key, value) => { + if (window.localStorage) { + window.localStorage.setItem(key, value); + } +}; + +/** + * Get local storage field + * + * @param {string} key + */ + +export const getStorageItem = (key) => (window.localStorage + ? window.localStorage.getItem(key) + : null); + +/** + * Set local storage theme field + * + * @param {string} theme + */ + +export const setTheme = (theme) => { + setStorageItem(LOCAL_STORAGE_THEME_KEY, theme); +}; + +/** + * Get local storage theme field + * + * @returns {string} + */ + +export const getTheme = () => getStorageItem(LOCAL_STORAGE_THEME_KEY) || THEMES.light; + /** * Sets UI theme. * * @param theme */ export const setUITheme = (theme) => { - let currentTheme = theme; + let currentTheme = theme || getTheme(); if (currentTheme === THEMES.auto) { const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; currentTheme = prefersDark ? THEMES.dark : THEMES.light; } - + setTheme(currentTheme); document.body.dataset.theme = currentTheme; }; diff --git a/client/src/reducers/dashboard.js b/client/src/reducers/dashboard.js index d8b48766..f23717f9 100644 --- a/client/src/reducers/dashboard.js +++ b/client/src/reducers/dashboard.js @@ -177,7 +177,7 @@ const dashboard = handleActions( autoClients: [], supportedTags: [], name: '', - theme: 'auto', + theme: undefined, checkUpdateFlag: false, }, );