Fix dark theme bugs

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

client/src/components/App/index.css

@@ -1,4 +1,5 @@
 :root {
+    --black: #131313;
     --bgcolor: #f5f7fb;
     --mcolor: #495057;
     --scolor: rgba(74, 74, 74, 0.7);
@@ -26,11 +27,13 @@
     --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;
 }
 
 [data-theme="dark"] {
+    --black: #ffffff;
     --bgcolor: #131313;
     --mcolor: #e6e6e6;
     --scolor: #a5a5a5;
@@ -44,16 +47,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 {

client/src/components/Dashboard/Dashboard.css

@@ -54,7 +54,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-top: 1px solid #dee2e6;
+    border-top: 1px solid var(--card-border-color);
     padding: 0.75rem 1.5rem;
 }
 

client/src/components/Header/Header.css

@@ -1,12 +1,12 @@
 .nav-tabs .nav-link.active {
-    border-color: var(--green-74);
-    color: var(--green-74);
+    border-color: var(--btn-success-bgcolor);
+    color: var(--btn-success-bgcolor);
     background: transparent;
 }
 
 .nav-tabs .nav-link.active:hover {
-    border-color: #58a273;
-    color: #58a273;
+    border-color: #4b9400;
+    color: #4b9400;
 }
 
 .nav-icon {

client/src/components/Logs/Cells/IconTooltip.css

@@ -5,7 +5,7 @@
     border-radius: 4px !important;
     pointer-events: auto !important;
     background-color: var(--ctrl-bgcolor);
-    color: var(--scolor);
+    color: var(--mcolor);
     z-index: 102;
     overflow-y: auto;
     max-height: 100%;

client/src/components/Logs/Logs.css

@@ -24,6 +24,12 @@
     --option-border-radius: 4px;
 }
 
+[data-theme="dark"] {
+    --red: rgba(223, 56, 18, 0.25);
+    --green-pale: rgba(103, 178, 121, 0.25);
+    --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;
 }
@@ -66,6 +80,10 @@
     border-radius: 4px;
 }
 
+[data-theme=dark] .icon--selected {
+    opacity: 0.75;
+}
+
 .text-pre {
     white-space: pre-wrap !important;
     overflow-wrap: break-word;
@@ -205,6 +223,12 @@
     position: relative;
 }
 
+@media screen and (min-width: 1025px) {
+    .logs__cell--client {
+        width: 13rem;
+    }
+}
+
 .logs__cell--header__container > .logs__cell--header__item {
     border-right: 0;
     font-size: 1rem;
@@ -340,6 +364,10 @@
     overflow: hidden;
 }
 
+[data-theme="dark"] .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
+    background: var(--ctrl-dropdown-bgcolor-focus);
+}
+
 .button-action--arrow-option-container {
     overflow: visible;
     transform-origin: left;
@@ -482,6 +510,10 @@
     color: var(--green79);
 }
 
+[data-theme="dark"] .logs__question.icon--lightgray {
+    color: var(--gray-f3);
+}
+
 @media (max-width: 1024px) {
     .logs__question {
         display: none;
@@ -491,3 +523,8 @@
 .logs__modal {
     max-width: 720px;
 }
+
+.logs__modal-wrap {
+    padding: 1rem 1.5rem;
+    background-color: var(--card-bgcolor);
+}

client/src/components/Logs/index.js

@@ -195,11 +195,11 @@ const Logs = () => {
             onRequestClose={closeModal}
             style={{
                 content: {
-                    width: '100%',
+                    width: 'calc(100% - 32px)',
                     height: 'fit-content',
                     left: '50%',
                     top: 47,
-                    padding: '1rem 1.5rem 1rem',
+                    padding: '0',
                     maxWidth: '720px',
                     transform: 'translateX(-50%)',
                 },

client/src/components/Settings/Clients/Service.css

@@ -4,7 +4,7 @@
     align-items: center;
     margin-bottom: 15px;
     padding: 10px 15px;
-    border: 1px solid #eee;
+    border: 1px solid var(--card-border-color);
     border-radius: 4px;
     cursor: pointer;
 }

client/src/components/ui/Dropdown.css

@@ -1,6 +1,6 @@
 .dropdown-item.active,
 .dropdown-item:active {
-    background-color: var(--green-74);
+    background-color: var(--btn-success-bgcolor);
 }
 
 .dropdown-menu {

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

client/src/components/ui/Line.css

@@ -11,6 +11,10 @@
     font-size: 0.7rem;
 }
 
+.card-chart-bg {
+    color: var(--black);
+}
+
 .card-chart-bg path[d^="M0,32"] {
     transform: translateY(32px);
 }

client/src/components/ui/Line.js

@@ -25,9 +25,9 @@ const Line = ({
         theme={{
             crosshair: {
                 line: {
-                    stroke: 'black',
+                    stroke: 'currentColor',
                     strokeWidth: 1,
-                    strokeOpacity: 0.35,
+                    strokeOpacity: 0.5,
                 },
             },
         }}

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 {

client/src/components/ui/ReactTable.css

@@ -23,14 +23,29 @@
     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 .rt-table::-webkit-scrollbar-track {
+    background-color: var(--card-bgcolor);
+}
+
+[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-thumb {
+    background-color: #888888;
+}
+
 [data-theme=dark] .ReactTable .-pagination .-btn {
-    color: var(--scolor);
-    background-color: var(--ctrl-bgcolor);
+    filter: invert(1);
+}
+
+[data-theme=dark] .ReactTable .-pagination .-btn:disabled {
+    opacity: 1;
 }
 
 .rt-tr-group.logs__row--red {

client/src/components/ui/Tabler.css

@@ -2579,16 +2579,58 @@ fieldset:disabled a.btn {
     box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
 }
 
+[data-theme=dark] .btn-secondary {
+    color: #868e96;
+    background-color: transparent;
+    background-image: none;
+    border-color: #868e96;
+}
+
+[data-theme=dark] .btn-secondary:hover {
+    color: #fff;
+    background-color: #868e96;
+    border-color: #868e96;
+}
+
+[data-theme=dark] .btn-secondary:focus,
+[data-theme=dark] .btn-secondary.focus {
+    box-shadow: none;
+}
+
+[data-theme=dark] .btn-secondary:focus-visible,
+[data-theme=dark] .btn-secondary.focus {
+    box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
+}
+
+[data-theme=dark] .btn-secondary.disabled,
+[data-theme=dark] .btn-secondary:disabled {
+    color: #868e96;
+    background-color: transparent;
+    border: none;
+}
+
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled):active,
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled).active {
+    color: #fff;
+    background-color: #868e96;
+    border-color: #868e96;
+}
+
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled):active:focus,
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled).active:focus {
+    box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
+}
+
 .btn-success {
     color: #fff;
     background-color: var(--btn-success-bgcolor);
-    border-color: #5eba00;
+    border-color: var(--btn-success-bgcolor);
 }
 
 .btn-success:hover {
     color: #fff;
     background-color: #4b9400;
-    border-color: #448700;
+    border-color: #4b9400;
 }
 
 .btn-success:focus,
@@ -2608,7 +2650,7 @@ fieldset:disabled a.btn {
 .show>.btn-success.dropdown-toggle {
     color: #fff;
     background-color: #448700;
-    border-color: #3e7a00;
+    border-color: #448700;
 }
 
 .btn-success:not(:disabled):not(.disabled):active:focus,
@@ -3251,6 +3293,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;
@@ -5509,7 +5555,7 @@ button.close {
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 1rem;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--card-border-color);
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 }
@@ -5539,7 +5585,7 @@ button.close {
     -ms-flex-pack: end;
     justify-content: flex-end;
     padding: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--card-border-color);
 }
 
 .modal-footer> :not(:first-child) {
@@ -13679,6 +13725,10 @@ Card alert
     color: #6e7687;
 }
 
+[data-theme=dark] .dropdown-item {
+    color: #ffffff;
+}
+
 .dropdown-menu-arrow:before {
     position: absolute;
     top: -6px;
@@ -13706,6 +13756,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 +15527,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;

client/src/components/ui/Tabs.css

@@ -3,7 +3,7 @@
     justify-content: space-between;
     margin-bottom: 15px;
     padding: 10px 0;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid var(--card-border-color);
     overflow: auto;
 }
 
@@ -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;

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;
 }

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;

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">