daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark theme bugs

Browse Source 
Updates #5375

Squashed commit of the following:

commit 40666b010697381e11b3a36d9c2ed1c1507f27ed
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Jan 31 18:34:06 2023 +0200

    Review fix

commit 44f3d6095bc9b426e8142f8c9d915a1441f3d791
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Jan 31 17:02:38 2023 +0200

    Clear

commit 44274ba54c9ff2bd2caf5fa69bf06c587f8858e5
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Jan 31 13:25:01 2023 +0200

    Clear

commit 8b48c523cbbe3f73160331a9c516388c7965a7a2
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Jan 31 12:14:37 2023 +0200

    Review fix

commit 3b8cd94cdd8d3fc90cdc27053964489414055cc9
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Mon Jan 30 16:13:15 2023 +0200

    Fix query log popup bg

commit 14d4c87164200f7c918bac02c9cc5f1cffb83932
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Mon Jan 30 15:03:06 2023 +0200

    revert icons

commit 98b042726e1510f85c9cf5a4caba2d56885f120b
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Mon Jan 30 14:45:35 2023 +0200

    Fix dark theme bugs
This commit is contained in:
Arseny Lisin
2023-02-01 11:45:22 +03:00
parent d52f1d0e70
commit 46382e8825
18 changed files with 200 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/components/ui/Footer.js
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import classNames from 'classnames';
@@ -10,7 +10,7 @@ import i18n from '../../i18n';
import Version from './Version';
import './Footer.css';
import './Select.css';
import { setHtmlLangAttr } from '../../helpers/helpers';
import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
import { changeTheme } from '../../actions';
const linksData = [
@@ -36,6 +36,13 @@ const Footer = () => {
const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
const isLoggedIn = profileName !== '';
const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
useEffect(() => {
if (!isLoggedIn) {
setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
}
}, []);
const getYear = () => {
const today = new Date();
@@ -53,6 +60,12 @@ const Footer = () => {
dispatch(changeTheme(value));
};
const onThemeChangedLocal = (event) => {
const { value } = event.target;
setUITheme(value);
setCurrentThemeLocal(value);
};
const renderCopyright = () => <div className="footer__column">
<div className="footer__copyright">
{t('copyright')} &copy; {getYear()}{' '}
@@ -70,24 +83,34 @@ const Footer = () => {
{t(name)}
</a>);
const renderThemeSelect = (currentTheme, isLoggedIn) => {
if (!isLoggedIn) {
return '';
}
const themeSelectOptions = () => (
Object.values(THEMES)
.map((theme) => (
<option key={theme} value={theme}>
{t(`theme_${theme}`)}
</option>
))
);
return <select
const renderThemeSelect = () => (
<select
className="form-control select select--theme"
value={currentTheme}
onChange={onThemeChanged}
>
{Object.values(THEMES)
.map((theme) => (
<option key={theme} value={theme}>
{t(`theme_${theme}`)}
</option>
))}
</select>;
};
{themeSelectOptions()}
</select>
);
const renderThemeSelectLocal = () => (
<select
className="form-control select select--theme"
value={currentThemeLocal}
onChange={onThemeChangedLocal}
>
{themeSelectOptions()}
</select>
);
return (
<>
@@ -98,7 +121,7 @@ const Footer = () => {
{renderLinks(linksData)}
</div>
<div className="footer__column footer__column--theme">
{renderThemeSelect(currentTheme, isLoggedIn)}
{isLoggedIn ? renderThemeSelect() : renderThemeSelectLocal()}
</div>
<div className="footer__column footer__column--language">
<select