From 304f2ba2cc637442ba4b1aa9809aab142ee9f64d Mon Sep 17 00:00:00 2001
From: Arseny Lisin <a.lisin@adguard.com>
Date: Wed, 22 Feb 2023 14:12:53 +0300
Subject: [PATCH] Fix dark theme bugs

Updates #5433.
Updates #5439.
Updates #5441.
Updates #5442.

Squashed commit of the following:

commit 8a250106c73dfdde503f9bcb3fa8f43e6a6cb855
Merge: a336858f 3a0b27e7
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Wed Feb 22 13:04:58 2023 +0200

    Merge branch 'master' into 5433-dark-theme-bugs

commit a336858fcd9db6361a2ba716317e3d80b2536c62
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Wed Feb 22 11:08:29 2023 +0200

    Review fix

commit 42606014394d10651aef8e9219474e9ee5307c10
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Feb 21 15:47:41 2023 +0200

    Fix checkbox, dots bg color in dark mode

commit ea5602f5d825e60bca39ea2afc5f37a24de6db43
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Feb 21 13:59:12 2023 +0200

    Fix dark theme bugs
---
 client/src/components/App/index.css   | 10 ++++++++++
 client/src/components/Logs/Logs.css   |  8 ++++++++
 client/src/components/ui/Checkbox.css |  2 +-
 client/src/components/ui/Tabler.css   | 14 +++++++-------
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
index b20bd424..e11400b9 100644
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -30,6 +30,11 @@
     --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;
+    --alert-message-color: #24426c;
+    --alert-message-border: #cbdbf2;
+    --alert-message-bg: #dae5f5;
+    --checkbox-bg: #e2e2e2;
+    --radio-bg: #ffffff;
 }
 
 [data-theme="dark"] {
@@ -59,6 +64,11 @@
     --detailed-info-color: #fff;
     --gray300: #f3f3f3;
     --loading-bg: #131313;
+    --alert-message-color: #e6e6e6;
+    --alert-message-border: #363648;
+    --alert-message-bg: #363648;
+    --checkbox-bg: #a4a4a4;
+    --radio-bg: #a4a4a4;
 }
 
 body {
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index bf0689e6..273eeb0c 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -130,6 +130,10 @@
     background-color: transparent !important;
 }
 
+[data-theme="dark"] .form-control--transparent option {
+    background-color: var(--card-bgcolor);
+}
+
 .input-group-search {
     background-color: transparent;
     position: relative;
@@ -400,6 +404,10 @@
     background-color: var(--logs__row--blue-bgcolor);
 }
 
+[data-theme="dark"] .logs__row--blue .logs__text--link {
+    color: var(--white);
+}
+
 .logs__row--green {
     background-color: var(--green-pale);
 }
diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
index 2a556fb0..111f0af0 100644
--- a/client/src/components/ui/Checkbox.css
+++ b/client/src/components/ui/Checkbox.css
@@ -48,7 +48,7 @@
     height: 20px;
     min-width: 20px;
     margin-right: 10px;
-    background-color: #e2e2e2;
+    background-color: var(--checkbox-bg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 12px 10px;
diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
index a8eab1ec..3ac81476 100644
--- a/client/src/components/ui/Tabler.css
+++ b/client/src/components/ui/Tabler.css
@@ -5047,9 +5047,9 @@ tbody.collapse.show {
 }
 
 .alert-primary {
-    color: #24426c;
-    background-color: #dae5f5;
-    border-color: #cbdbf2;
+    color: var(--alert-message-color);
+    background-color: var(--alert-message-bg);
+    border-color: var(--alert-message-border);
 }
 
 .alert-primary hr {
@@ -5089,9 +5089,9 @@ tbody.collapse.show {
 }
 
 .alert-info {
-    color: #24587e;
-    background-color: #daeefc;
-    border-color: #cbe7fb;
+    color: var(--alert-message-color);
+    background-color: var(--alert-message-bg);
+    border-color: var(--alert-message-border);
 }
 
 .alert-info hr {
@@ -14317,7 +14317,7 @@ textarea[cols] {
 
 .custom-control-label:before {
     border: 1px solid rgba(0, 40, 100, 0.12);
-    background-color: #fff;
+    background-color: var(--radio-bg);
     background-size: 0.5rem;
 }