mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Ildar Kamalov 2023-04-10 17:12:52 +03:00
parent 89bf3721b5
commit 9e14d5f99f
4 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/App/index.js
View File

@ -165,8 +165,7 @@ const App = () => {
} }
const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)'); const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
const prefersDark = colorSchemeMedia.matches; setUITheme(theme);
setUITheme(prefersDark ? THEMES.dark : THEMES.light);
if (colorSchemeMedia.addEventListener !== undefined) { if (colorSchemeMedia.addEventListener !== undefined) {
colorSchemeMedia.addEventListener('change', (e) => { colorSchemeMedia.addEventListener('change', (e) => {

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

@ -33,14 +33,18 @@ const Footer = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto')); const currentTheme = useSelector((state) => (
const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : '')); state.dashboard ? state.dashboard.theme : THEMES.auto
));
const profileName = useSelector((state) => (
state.dashboard ? state.dashboard.name : ''
));
const isLoggedIn = profileName !== ''; const isLoggedIn = profileName !== '';
const [currentThemeLocal, setCurrentThemeLocal] = useState('auto'); const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto);
useEffect(() => { useEffect(() => {
if (!isLoggedIn) { if (!isLoggedIn) {
setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light); setUITheme(currentThemeLocal);
} }
}, []); }, []);

10
client/src/helpers/helpers.js
View File

@ -25,6 +25,7 @@ import {
STANDARD_HTTPS_PORT, STANDARD_HTTPS_PORT,
STANDARD_WEB_PORT, STANDARD_WEB_PORT,
SPECIAL_FILTER_ID, SPECIAL_FILTER_ID,
THEMES,
} from './constants'; } from './constants';
/** /**
@ -684,7 +685,14 @@ export const setHtmlLangAttr = (language) => {
* @param theme * @param theme
*/ */
export const setUITheme = (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;
}; };
/** /**

2
client/src/login/Login/index.js
View File

@ -8,6 +8,7 @@ import * as actionCreators from '../../actions/login';
import logo from '../../components/ui/svg/logo.svg'; import logo from '../../components/ui/svg/logo.svg';
import Toasts from '../../components/Toasts'; import Toasts from '../../components/Toasts';
import Footer from '../../components/ui/Footer'; import Footer from '../../components/ui/Footer';
import Icons from '../../components/ui/Icons';
import Form from './Form'; import Form from './Form';
import './Login.css'; import './Login.css';
@ -69,6 +70,7 @@ class Login extends Component {
</div> </div>
<Footer /> <Footer />
<Toasts /> <Toasts />
<Icons />
</div> </div>
); );
} }