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

Pull request 1713: 613 dark theme vol.2

Browse Source 
Updates #613.

Squashed commit of the following:

commit 9a3ba15bdb8476dde045631362d76572a68a4e5c
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Thu Jan 19 12:46:48 2023 +0700

    client: review dark theme colors

commit c456cdcb6ffec044917b0396ad3cfa8b5c3bce10
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 23:46:32 2023 +0700

    client: review dark theme colors

commit 4b042ba4f433c89488b18ec38f5864d5ffaf8657
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 23:34:37 2023 +0700

    client: review dark theme colors

commit 1ff34f751b4d9342495070af85f3dae86c285aee
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 18:59:46 2023 +0700

    client: default language

commit ca9abc11a8c155c78f73903906ed452e95764e99
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 12:23:50 2023 +0700

    client: default language

commit 01a057a40e879d1bc2013989d6eb56a296ba16a3
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 11:53:58 2023 +0700

    client: review dark theme colors

commit aa3658f35c49f8ae19077b333075207082383a17
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 11:14:08 2023 +0700

    client: review dark theme colors

commit 8df726382155fcc3b2e6e632d53f42d0be638c77
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Tue Jan 17 13:41:21 2023 +0700

    client: dark theme colors

commit bd84ae46272743874d2350291b22b90b7fbedf0e
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Tue Jan 17 13:05:46 2023 +0700

    client: dark theme colors

commit 136ea5608a1a22b6a54a362741b2fdd708f345e2
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Tue Jan 17 10:51:22 2023 +0700

    all: docs

commit 784be8741b730a12d665d7e2a29c140c0746e927
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 17:59:26 2023 +0700

    client: imp code

commit a83de0948fe034e7be35c04a607b1171915c0263
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 14:13:54 2023 +0700

    client: dark theme login

commit 6c4ef19da01efc6a1e4ea76085b7b7382c331eca
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 13:27:35 2023 +0700

    client: dark theme css

commit 5cf564ea1203e9472d200975ee98d93b6b868210
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 13:18:00 2023 +0700

    client: imp code

commit 1bbbd20972345c08e944b7c4bb0330c0d30d827a
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 12:49:03 2023 +0700

    client: imp code

commit cb07680d3cd7acdbdb7bdc9d9abaa388a9df8e4c
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 12:24:14 2023 +0700

    client: auto theme handling

commit d34910d4dd5edb694b6da55a2260b4fea784e7e0
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Fri Jan 13 23:31:24 2023 +0700

    home: imp docs

commit 8abe4f6f7182dc3dbcbbe73652294ee6584a4f2f
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Thu Jan 12 18:35:48 2023 +0700

    client: theme dropdown
This commit is contained in:
Dimitry Kolyshev
2023-01-19 13:46:44 +03:00
committed by Ainar Garipov
parent cd76a30790
commit a7dca7aa56
21 changed files with 304 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/ui/Checkbox.css
View File

@@ -107,5 +107,5 @@
.checkbox__label-subtitle {
display: block;
line-height: 1.5;
color: rgba(74, 74, 74, 0.7);
color: var(--scolor);
}

10
client/src/components/ui/Footer.css
View File

@@ -18,6 +18,11 @@
align-items: center;
}
.footer__column--theme {
min-width: 220px;
margin-bottom: 0;
}
.footer__column--language {
min-width: 220px;
margin-bottom: 0;
@@ -49,6 +54,11 @@
}
.footer__column--language {
min-width: initial;
margin-left: 20px;
}
.footer__column--theme {
min-width: initial;
margin-left: auto;
}

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

@@ -1,8 +1,9 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import classNames from 'classnames';
import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
import { LANGUAGES } from '../../helpers/twosky';
import i18n from '../../i18n';
@@ -10,6 +11,7 @@ import Version from './Version';
import './Footer.css';
import './Select.css';
import { setHtmlLangAttr } from '../../helpers/helpers';
import { changeTheme } from '../../actions';
const linksData = [
{
@@ -29,6 +31,11 @@ const linksData = [
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 isLoggedIn = profileName !== '';
const getYear = () => {
const today = new Date();
@@ -41,6 +48,11 @@ const Footer = () => {
setHtmlLangAttr(value);
};
const onThemeChanged = (event) => {
const { value } = event.target;
dispatch(changeTheme(value));
};
const renderCopyright = () => <div className="footer__column">
<div className="footer__copyright">
{t('copyright')} &copy; {getYear()}{' '}
@@ -58,6 +70,25 @@ const Footer = () => {
{t(name)}
</a>);
const renderThemeSelect = (currentTheme, isLoggedIn) => {
if (!isLoggedIn) {
return '';
}
return <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>;
};
return (
<>
<footer className="footer">
@@ -66,6 +97,9 @@ const Footer = () => {
<div className="footer__column footer__column--links">
{renderLinks(linksData)}
</div>
<div className="footer__column footer__column--theme">
{renderThemeSelect(currentTheme, isLoggedIn)}
</div>
<div className="footer__column footer__column--language">
<select
className="form-control select select--language"

1
client/src/components/ui/Modal.css
View File

@@ -11,6 +11,7 @@
.ReactModal__Overlay--after-open {
opacity: 1;
transition: opacity 150ms ease-out;
background-color: var(--modal-overlay-bgcolor) !important;
}
.ReactModal__Content {

20
client/src/components/ui/ReactTable.css
View File

@@ -13,6 +13,26 @@
overflow: visible;
}
.ReactTable .rt-noData {
color: var(--rt-nodata-color);
background-color: var(--rt-nodata-bgcolor);
}
.ReactTable .-loading {
color: var(--rt-nodata-color);
background-color: var(--rt-nodata-bgcolor);
}
.ReactTable .-pagination input, .ReactTable .-pagination select {
color: var(--rt-nodata-color);
background-color: var(--rt-nodata-bgcolor);
}
[data-theme=dark] .ReactTable .-pagination .-btn {
color: var(--scolor);
background-color: var(--ctrl-bgcolor);
}
.rt-tr-group.logs__row--red {
background-color: rgba(223, 56, 18, 0.05);
}

34
client/src/components/ui/Select.css
View File

@@ -1,8 +1,25 @@
.select.select--theme {
height: 45px;
padding: 0 32px 2px 11px;
outline: 0;
border-color: var(--ctrl-select-bgcolor);
background-image: url("./svg/chevron-down.svg");
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 17px 20px;
appearance: none;
cursor: pointer;
}
.select--theme::-ms-expand {
opacity: 0;
}
.select.select--language {
height: 45px;
padding: 0 32px 2px 33px;
outline: 0;
border-color: rgba(69, 79, 94, 0.12);
border-color: var(--ctrl-select-bgcolor);
background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
background-repeat: no-repeat, no-repeat;
background-position: left 11px center, right 9px center;
@@ -16,8 +33,9 @@
}
.basic-multi-select .select__control {
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);;
border-radius: 3px;
background-color: var(--ctrl-bgcolor);
}
.basic-multi-select .select__control:hover {
@@ -36,4 +54,16 @@
.basic-multi-select .select__menu {
z-index: 3;
background-color: var(--ctrl-bgcolor);
}
[data-theme=dark] .basic-multi-select .select__option:hover,
[data-theme=dark] .basic-multi-select .select__option--is-focused,
[data-theme=dark] .basic-multi-select .select__option--is-focused:hover {
background-color: var(--ctrl-select-bgcolor);
color: var(--ctrl-dropdown-color);
}
[data-theme=dark] .select__multi-value__remove svg {
filter: invert(1);
}

59
client/src/components/ui/Tabler.css
View File

@@ -85,9 +85,9 @@ body {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
color: var(--mcolor);
text-align: left;
background-color: #f5f7fb;
background-color: var(--bgcolor);
}
[tabindex="-1"]:focus {
@@ -1943,10 +1943,10 @@ pre code {
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
line-height: 1.6;
color: #495057;
background-color: #fff;
color: var(--mcolor);
background-color: var(--card-bgcolor);
background-clip: padding-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);
border-radius: 3px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@@ -1957,8 +1957,8 @@ pre code {
}
.form-control:focus {
color: #495057;
background-color: #fff;
color: var(--mcolor);
background-color: var(--ctrl-bgcolor);
border-color: #1991eb;
outline: 0;
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
@@ -1991,7 +1991,8 @@ pre code {
.form-control:disabled,
.form-control[readonly] {
background-color: #f8f9fa;
background-color: var(--form-disabled-bgcolor);
color: var(--form-disabled-color);
opacity: 1;
}
@@ -2580,7 +2581,7 @@ fieldset:disabled a.btn {
.btn-success {
color: #fff;
background-color: #5eba00;
background-color: var(--btn-success-bgcolor);
border-color: #5eba00;
}
@@ -3244,7 +3245,7 @@ tbody.collapse.show {
color: #495057;
text-align: left;
list-style: none;
background-color: #fff;
background-color: var(--ctrl-bgcolor);
background-clip: padding-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px;
@@ -3348,7 +3349,7 @@ tbody.collapse.show {
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
color: var(--ctrl-dropdown-color);
text-align: inherit;
white-space: nowrap;
background-color: transparent;
@@ -3357,9 +3358,9 @@ tbody.collapse.show {
.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
color: var(--ctrl-dropdown-color-focus);
text-decoration: none;
background-color: #f8f9fa;
background-color: var(--ctrl-dropdown-bgcolor-focus);
}
.dropdown-item.active,
@@ -3794,11 +3795,11 @@ tbody.collapse.show {
height: 2.375rem;
padding: 0.5rem 1.75rem 0.5rem 0.75rem;
line-height: 1.5;
color: #495057;
color: var(--mcolor);
vertical-align: middle;
background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
background: var(--card-bgcolor) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
background-size: 8px 10px;
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
@@ -4469,9 +4470,9 @@ tbody.collapse.show {
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-color: var(--card-bgcolor);
background-clip: border-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);
border-radius: 3px;
}
@@ -5475,9 +5476,9 @@ button.close {
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-color: var(--card-bgcolor);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid var(--card-border-color);
border-radius: 3px;
outline: 0;
}
@@ -10268,8 +10269,8 @@ body.fixed-header .page {
.header {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background: #fff;
border-bottom: 1px solid rgba(0, 40, 100, 0.12);
background: var(--header-bgcolor);
border-bottom: 1px solid var(--border-color);
}
body.fixed-header .header {
@@ -10325,6 +10326,10 @@ body.fixed-header .header {
width: auto;
}
[data-theme=dark] .header-brand-img {
filter:invert(1);
}
.header-avatar {
width: 2rem;
height: 2rem;
@@ -10382,8 +10387,8 @@ body.fixed-header .header {
}
.footer {
background: #fff;
border-top: 1px solid rgba(0, 40, 100, 0.12);
background: var(--card-bgcolor);
border-top: 1px solid var(--card-border-color);
font-size: 0.875rem;
padding: 1.25rem 0;
color: #9aa0ac;
@@ -13686,13 +13691,17 @@ Card alert
content: "";
}
[data-theme=dark] .dropdown-menu-arrow:before {
border-bottom-color: var(--ctrl-bgcolor);
}
.dropdown-menu-arrow:after {
position: absolute;
top: -5px;
left: 12px;
display: inline-block;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
border-bottom: 5px solid var(--ctrl-bgcolor);
border-left: 5px solid transparent;
content: "";
}

5
client/src/components/ui/Tooltip.css
View File

@@ -4,6 +4,11 @@
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .tooltip-container {
background-color: var(--ctrl-select-bgcolor);
color: var(--mcolor);
}
.tooltip-custom--narrow {
max-width: 14rem;
}