From 9e14d5f99f453b8c376aba966f648012da258c72 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Mon, 10 Apr 2023 17:12:52 +0300
Subject: [PATCH] Pull request: fix missing icons on login page

Updates #5620

Squashed commit of the following:

commit 61969c83c3dd6bd6688f0aabc9d6160b53701866
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Apr 10 14:50:47 2023 +0300

    AG-20691 fix theme select on login page

commit c87b6c37284021f33f440dcd31be5b653e8e689d
Merge: aa744756 89bf3721
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Apr 10 14:21:01 2023 +0300

    Merge branch 'master' into AG-20691

commit aa744756d18d9ed3bc7f60108235d8403e7cb5e0
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Apr 7 15:53:38 2023 +0300

    AG-20691 fix missing icons on login page
---
 client/src/components/App/index.js |  3 +--
 client/src/components/ui/Footer.js | 12 ++++++++----
 client/src/helpers/helpers.js      | 10 +++++++++-
 client/src/login/Login/index.js    |  2 ++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
index 3d2db100..d59f985f 100644
--- a/client/src/components/App/index.js
+++ b/client/src/components/App/index.js
@@ -165,8 +165,7 @@ const App = () => {
         }
 
         const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
-        const prefersDark = colorSchemeMedia.matches;
-        setUITheme(prefersDark ? THEMES.dark : THEMES.light);
+        setUITheme(theme);
 
         if (colorSchemeMedia.addEventListener !== undefined) {
             colorSchemeMedia.addEventListener('change', (e) => {
diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
index 014c8fd1..2cfe14ca 100644
--- a/client/src/components/ui/Footer.js
+++ b/client/src/components/ui/Footer.js
@@ -33,14 +33,18 @@ const Footer = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
-    const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
-    const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
+    const currentTheme = useSelector((state) => (
+        state.dashboard ? state.dashboard.theme : THEMES.auto
+    ));
+    const profileName = useSelector((state) => (
+        state.dashboard ? state.dashboard.name : ''
+    ));
     const isLoggedIn = profileName !== '';
-    const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
+    const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto);
 
     useEffect(() => {
         if (!isLoggedIn) {
-            setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
+            setUITheme(currentThemeLocal);
         }
     }, []);
 
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index d3c69054..3c1c606f 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -25,6 +25,7 @@ import {
     STANDARD_HTTPS_PORT,
     STANDARD_WEB_PORT,
     SPECIAL_FILTER_ID,
+    THEMES,
 } from './constants';
 
 /**
@@ -684,7 +685,14 @@ export const setHtmlLangAttr = (language) => {
  * @param theme
  */
 export const setUITheme = (theme) => {
-    document.body.dataset.theme = theme;
+    let currentTheme = theme;
+
+    if (currentTheme === THEMES.auto) {
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        currentTheme = prefersDark ? THEMES.dark : THEMES.light;
+    }
+
+    document.body.dataset.theme = currentTheme;
 };
 
 /**
diff --git a/client/src/login/Login/index.js b/client/src/login/Login/index.js
index 1603d24d..3bca509a 100644
--- a/client/src/login/Login/index.js
+++ b/client/src/login/Login/index.js
@@ -8,6 +8,7 @@ import * as actionCreators from '../../actions/login';
 import logo from '../../components/ui/svg/logo.svg';
 import Toasts from '../../components/Toasts';
 import Footer from '../../components/ui/Footer';
+import Icons from '../../components/ui/Icons';
 import Form from './Form';
 
 import './Login.css';
@@ -69,6 +70,7 @@ class Login extends Component {
                 </div>
                 <Footer />
                 <Toasts />
+                <Icons />
             </div>
         );
     }