Fix dark theme bugs

AdguardTeam · Jan 30, 2023 · 98b0427 · 98b0427
1 parent d52f1d0
commit 98b0427
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 25 deletions.
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
@@ -26,6 +26,7 @@
     --gray-a5: #a5a5a5;
     --gray-d8: #d8d8d8;
     --gray-f3: #f3f3f3;
+    --loading-bg: rgba(255, 255, 255, 0.48);
     --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
     --font-size-disable-autozoom: 1rem;
 }
@@ -44,16 +45,18 @@
     --ctrl-dropdown-bgcolor-focus: #000;
     --ctrl-dropdown-color-focus: #fff;
     --btn-success-bgcolor: #67b279;
-    --form-disabled-bgcolor: #3d3d3d;
+    --form-disabled-bgcolor: #2d2d2d;
     --form-disabled-color: #a5a5a5;
     --logs__text-color: #f3f3f3;
     --rt-nodata-bgcolor: #1c1c1c;
     --rt-nodata-color: #fff;
-    --modal-overlay-bgcolor: #1c1c1c;
+    --modal-overlay-bgcolor: rgba(19, 19, 19, 0.75);
     --logs__table-bgcolor: #3d3d3d;
     --logs__row--blue-bgcolor: #467fcf;
     --logs__row--white-bgcolor: #1c1c1c;
     --detailed-info-color: #fff;
+    --gray300: #f3f3f3;
+    --loading-bg: #131313;
 }
 
 body {

diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -24,6 +24,12 @@
     --option-border-radius: 4px;
 }
 
+[data-theme="dark"] {
+    --red: rgba(223, 56, 18, 0.4);
+    --green-pale: rgba(103, 178, 121, 0.4);
+    --yellow: rgba(247, 181, 0, 0.2);
+}
+
 .logs__text {
     padding: 0 1px;
     text-overflow: ellipsis;
@@ -36,6 +42,14 @@
     line-height: 1.5rem;
 }
 
+[data-theme="dark"] .logs__text a {
+    color: var(--gray-f3);
+}
+
+[data-theme="dark"] .logs__text a:hover {
+    color: var(--gray-f3);
+}
+
 .logs__text--bold {
     font-weight: 600;
 }
@@ -482,6 +496,10 @@
     color: var(--green79);
 }
 
+[data-theme="dark"] .logs__question.icon--lightgray {
+    color: var(--gray-f3);
+}
+
 @media (max-width: 1024px) {
     .logs__question {
         display: none;

diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
@@ -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

diff --git a/client/src/components/ui/Loading.css b/client/src/components/ui/Loading.css
@@ -13,7 +13,7 @@
     z-index: 100;
     width: 100%;
     min-height: 100vh;
-    background-color: rgba(255, 255, 255, 0.48);
+    background-color: var(--loading-bg);
 }
 
 .loading:after {

diff --git a/client/src/components/ui/ReactTable.css b/client/src/components/ui/ReactTable.css
@@ -23,14 +23,33 @@
     background-color: var(--rt-nodata-bgcolor);
 }
 
+.ReactTable .-loading .-loading-inner {
+    color: var(--gray300);
+}
+
 .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);
+    border: 1px solid #868e96;
+    color: #868e96;
+    background-color: transparent;
+}
+
+[data-theme=dark] .ReactTable .-pagination .-btn:hover {
+    color: #fff;
+    background-color: #868e96;
+}
+
+[data-theme=dark] .ReactTable .-pagination .-btn:disabled {
+    opacity: 0.75;
+}
+
+[data-theme=dark] .ReactTable .-pagination .-btn:disabled:hover {
+    background-color: transparent;
+    color: #868e96;
 }
 
 .rt-tr-group.logs__row--red {

diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
@@ -3251,6 +3251,10 @@ tbody.collapse.show {
     border-radius: 3px;
 }
 
+[data-theme=dark] .dropdown-menu {
+    border: 1px solid var(--card-border-color);
+}
+
 .dropup .dropdown-menu {
     margin-top: 0;
     margin-bottom: 0.125rem;
@@ -13679,6 +13683,10 @@ Card alert
     color: #6e7687;
 }
 
+[data-theme=dark] .dropdown-item {
+    color: #d2d2d2;
+}
+
 .dropdown-menu-arrow:before {
     position: absolute;
     top: -6px;
@@ -13706,6 +13714,10 @@ Card alert
     content: "";
 }
 
+[data-theme=dark] .dropdown-menu-arrow:after {
+    border-bottom: 5px solid var(--card-border-color);
+}
+
 .dropdown-menu-arrow.dropdown-menu-right:before,
 .dropdown-menu-arrow.dropdown-menu-right:after {
     left: auto;
@@ -15473,6 +15485,10 @@ a.tag-addon:hover {
     transition: 0.3s border-color, 0.3s background-color;
 }
 
+[data-theme=dark] .custom-switch-indicator {
+    opacity: 0.75;
+}
+
 .custom-switch-indicator:before {
     content: "";
     position: absolute;

diff --git a/client/src/components/ui/Tabs.css b/client/src/components/ui/Tabs.css
@@ -40,6 +40,10 @@
     opacity: 0.6;
 }
 
+[data-theme=dark] .tab__control {
+    filter: invert(1);
+}
+
 @media screen and (min-width: 768px) {
     .tab__control {
         white-space: normal;

diff --git a/client/src/install/Setup/Setup.css b/client/src/install/Setup/Setup.css
@@ -21,11 +21,16 @@
     margin: 0 auto;
     padding: 30px 20px;
     line-height: 1.6;
-    background-color: #fff;
+    background-color: var(--card-bgcolor);
     box-shadow: 0 1px 4px rgba(74, 74, 74, 0.36);
     border-radius: 3px;
 }
 
+[data-theme=dark] .setup__container {
+    box-shadow: none;
+    border: 1px solid var(--card-border-color);
+}
+
 @media screen and (min-width: 768px) {
     .setup__container {
         width: 650px;
@@ -39,6 +44,10 @@
     max-width: 140px;
 }
 
+[data-theme=dark] .setup__logo {
+    filter: invert(1);
+}
+
 .setup__nav {
     text-align: center;
 }

diff --git a/client/src/login/Login/Login.css b/client/src/login/Login/Login.css
@@ -13,6 +13,10 @@
     min-height: 100vh;
 }
 
+[data-theme=dark] .login__logo {
+    filter: invert(1);
+}
+
 .login__form {
     margin: auto;
     padding: 40px 15px 100px;

diff --git a/client/src/login/Login/index.js b/client/src/login/Login/index.js
@@ -36,7 +36,7 @@ class Login extends Component {
             <div className="login">
                 <div className="login__form">
                     <div className="text-center mb-6">
-                        <img src={logo} className="h-6" alt="logo" />
+                        <img src={logo} className="h-6 login__logo" alt="logo" />
                     </div>
                     <Form onSubmit={this.handleSubmit} processing={processingLogin} />
                     <div className="login__info">

diff --git a/internal/filtering/servicelist.go b/internal/filtering/servicelist.go