fix: dark mode improvements (#462)

Signed-off-by: Rafal Pelczar <[email protected]>

src/components/popup/popup.scss

@@ -1,4 +1,5 @@
 @import '../../styles/config';
+@import '../../styles/theme';
 
 $popup-border-radius: 8px;
 
@@ -9,12 +10,17 @@ $popup-border-radius: 8px;
     width: 100%;
     height: 100%;
     z-index: 200;
+    // Just in case the theme class is not added
     background-color: rgba(222, 222, 222, 0.62); /*dim the background*/
-    border: 1px solid $argo-color-gray-4;
+    @include themify($themes) {
+        background-color: themed('overlay');        
+    }
 
     .popup-container {
         position: relative;
-        box-shadow: 3px 3px 20px #888888;
+        @include themify($themes) {
+            box-shadow: 3px 3px 20px themed('shadow');
+        }
         margin: 0 auto;
         top: 50%;
         transform: translateY(-50%);
@@ -47,7 +53,11 @@ $popup-border-radius: 8px;
             }
 
             &__normal {
+                // Just in case the theme class is not added
                 background-color: $argo-color-gray-2;
+                @include themify($themes) {
+                    background-color: themed('light-argo-gray-2');
+                }
             }
 
             &__red {
@@ -61,7 +71,11 @@ $popup-border-radius: 8px;
         }
 
         &__footer {
+            // Just in case the theme class is not added
             background-color: $argo-color-gray-1;
+            @include themify($themes) {
+                background-color: themed('background-2');        
+            }
             bottom: 0;
             padding-top: 20px;
             padding-left: 30px;
@@ -80,7 +94,11 @@ $popup-border-radius: 8px;
         }
 
         &__body {
+            // Just in case the theme class is not added
             background-color: $argo-color-gray-1;
+            @include themify($themes) {
+                background-color: themed('background-2');        
+            }
 
             &__hasNoIcon {
                 padding-left: 30px;
@@ -101,7 +119,12 @@ $popup-border-radius: 8px;
                 font-size: 15px;
                 margin-top: 10px;
                 margin-bottom: 10px;
+                // Just in case the theme class is not added
                 color: $argo-color-gray-6;
+
+                @include themify($themes) {
+                    color: themed('light-argo-gray-6');        
+                }
             }
         }
 

src/components/select/select.scss

@@ -1,4 +1,5 @@
 @import '../../styles/config';
+@import '../../styles/theme';
 
 .select {
     position: relative;
@@ -15,12 +16,14 @@
         position: relative;
         padding: 8px 20px 8px 0;
         font-size: 15px;
-        border-bottom: 2px solid #ccc;
         transition: border .2s;
         cursor: pointer;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        @include themify($themes) {      
+            border-bottom: 2px solid themed('border');;
+        }
     }
 
     &__value-arrow {

src/components/sliding-panel/sliding-panel.scss

@@ -103,8 +103,8 @@ $sliding-panel-middle-width: 600px;
         color: $argo-color-gray-5;
         @include themify($themes) {                  
             background-color: themed('light-argo-gray-2');
+            border-bottom: 1px solid themed('border');
         }
-        border-bottom: 1px solid #c6cfd1;
         font-weight: 500;
         font-size: .925em;
 

src/components/tabs/tabs.scss

@@ -57,6 +57,10 @@
             box-shadow: none;
             border-bottom: 1px solid $argo-color-gray-4;
 
+            .theme-dark & {
+                border-color: $argo-color-gray-7;
+            }
+
             a {
                 color: $argo-color-teal-5;
 

src/components/top-bar/top-bar.scss

@@ -5,11 +5,15 @@
 .top-bar {
     line-height: $top-bar-height;
     @include themify($themes) {
-        background: themed('background-2');        
+        background: themed('background-2');
     }
     transition: right .5s;
     border-bottom: 1px solid $argo-color-gray-2;
 
+    .theme-dark & {
+        border-color: $argo-color-gray-7;
+    }
+
     &__left-side {
         padding-left: 20px;
         white-space: nowrap;

src/styles/elements/containers.scss

@@ -95,12 +95,15 @@
                 color: themed('text-2');    
             }
             .columns {
-                border-bottom: 1px solid $argo-color-gray-3;
                 padding: 0;
                 vertical-align: middle;
                 line-height: 50px;
                 overflow-wrap: break-word;
 
+                @include themify($themes) {
+                    border-bottom: 1px solid themed('border');    
+                }
+
                 &--narrower-height {
                     line-height: 20px;
                     padding: 14px 0;

src/styles/elements/form-controls.scss

@@ -74,9 +74,9 @@
     background-color: transparent;
     @include themify($themes) {                  
         color: themed('text-2');
+        border-bottom: 2px solid themed('border');;
     }
     border: 0;
-    border-bottom: 2px solid #ccc;
     transition: border .2s;
 
     .error & {

src/styles/theme.scss

@@ -12,7 +12,10 @@ $themes: (
         light-argo-teal-7: $argo-color-teal-7,
         light-argo-teal-5: $argo-color-teal-5,
         pod-cyan: lightcyan,
-        layout-loader-bg: rgba($argo-color-gray-7, 0.4),  
+        layout-loader-bg: rgba($argo-color-gray-7, 0.4),
+        overlay: rgba(222, 222, 222, 0.62),
+        shadow: $argo-color-gray-5,
+        border: $argo-color-gray-3
     ),
     dark: (
         background-1: $dark-theme-background-1,
@@ -26,7 +29,9 @@ $themes: (
         light-argo-teal-5: $argo-color-teal-4,
         pod-cyan: $argo-color-teal-8,
         layout-loader-bg: rgba($argo-color-gray-3, 0.4),
-
+        overlay: rgba(70, 70, 70, 0.62),
+        shadow: $dark-theme-background-1,
+        border: $argo-color-gray-7
     )
 );