Review fix

AdguardTeam · Jan 31, 2023 · 8b48c52 · 8b48c52
1 parent 3b8cd94
commit 8b48c52
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 30 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
@@ -1,4 +1,5 @@
 :root {
+    --black: #131313;
     --bgcolor: #f5f7fb;
     --mcolor: #495057;
     --scolor: rgba(74, 74, 74, 0.7);
@@ -32,6 +33,7 @@
 }
 
 [data-theme="dark"] {
+    --black: #ffffff;
     --bgcolor: #131313;
     --mcolor: #e6e6e6;
     --scolor: #a5a5a5;

diff --git a/client/src/components/Dashboard/Dashboard.css b/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;
 }
 

diff --git a/client/src/components/Header/Header.css b/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 {

diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -25,8 +25,8 @@
 }
 
 [data-theme="dark"] {
-    --red: rgba(223, 56, 18, 0.4);
-    --green-pale: rgba(103, 178, 121, 0.4);
+    --red: rgba(223, 56, 18, 0.25);
+    --green-pale: rgba(103, 178, 121, 0.25);
     --yellow: rgba(247, 181, 0, 0.2);
 }
 
@@ -80,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;

diff --git a/client/src/components/Settings/Clients/Service.css b/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;
 }

diff --git a/client/src/components/ui/Dropdown.css b/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 {

diff --git a/client/src/components/ui/Line.css b/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);
 }
diff --git a/client/src/components/ui/Line.js b/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,
                 },
             },
         }}

diff --git a/client/src/components/ui/ReactTable.css b/client/src/components/ui/ReactTable.css
@@ -32,24 +32,20 @@
     background-color: var(--rt-nodata-bgcolor);
 }
 
-[data-theme=dark] .ReactTable .-pagination .-btn {
-    border: 1px solid #868e96;
-    color: #868e96;
-    background-color: transparent;
+[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-track {
+    background-color: var(--card-bgcolor);
 }
 
-[data-theme=dark] .ReactTable .-pagination .-btn:hover {
-    color: #fff;
-    background-color: #868e96;
+[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-thumb {
+    background-color: #888888;
 }
 
-[data-theme=dark] .ReactTable .-pagination .-btn:disabled {
-    opacity: 0.75;
+[data-theme=dark] .ReactTable .-pagination .-btn {
+    filter: invert(1);
 }
 
-[data-theme=dark] .ReactTable .-pagination .-btn:disabled:hover {
-    background-color: transparent;
-    color: #868e96;
+[data-theme=dark] .ReactTable .-pagination .-btn:disabled {
+    opacity: 1;
 }
 
 .rt-tr-group.logs__row--red {

diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
@@ -2579,16 +2579,57 @@ 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;
+}
+
+[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 +2649,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,
@@ -5513,7 +5554,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;
 }
@@ -5543,7 +5584,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) {
@@ -11842,6 +11883,10 @@ a.icon:hover {
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
 }
 
+.btn-secondary--services {
+
+}
+
 .btn-secondary:hover {
     color: #495057;
     background-color: #f6f6f6;
@@ -13684,7 +13729,7 @@ Card alert
 }
 
 [data-theme=dark] .dropdown-item {
-    color: #d2d2d2;
+    color: #ffffff;
 }
 
 .dropdown-menu-arrow:before {

diff --git a/client/src/components/ui/Tabs.css b/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;
 }