fix: dark mode styles for widget inspector (ToolJet#1526)

dan-amoroso · Dec 7, 2021 · 8eca3b4 · 8eca3b4
1 parent d398266
commit 8eca3b4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/frontend/src/_styles/colors.scss b/frontend/src/_styles/colors.scss
@@ -5,6 +5,7 @@ $light-green: #82bf99;
 $dark-green: #3b734f;
 $primary: #4D72FA;
 $disabled: #9E9EA8;
+$dark-background: #1f2936;
 
 .color-primary {
   color: $primary;

diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
@@ -32,7 +32,7 @@ body {
 }
 
 .accordion-item, .accordion-button {
-  background-color: #fff;
+  background-color: inherit;
 }
 
 .accordion-button {
@@ -197,6 +197,10 @@ body {
     }
 
     .inspector {
+      .inspector-add-button {
+        background: inherit;
+      }
+
       .inspector-add-button:hover {
         color: $primary;
         background: #EEF3F9;
@@ -612,6 +616,17 @@ body {
 }
 
 .theme-dark {
+  .accordion-button::after {
+    background-image: url("data:image/svg+xml,%3Csvg id='SvgjsSvg1001' width='288' height='288' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs'%3E%3Cdefs id='SvgjsDefs1002'%3E%3C/defs%3E%3Cg id='SvgjsG1008' transform='matrix(1,0,0,1,0,0)'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='/fffff' viewBox='0 0 16 16' width='288' height='288'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' fill='%23ffffff' class='color000 svgShape'%3E%3C/path%3E%3C/svg%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .form-check-input:not(:checked) {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2390b5e2'/%3e%3c/svg%3e") !important;
+  }
+
+  .inspector {
+    border: 1px solid $dark-background;
+  }
 
   .user-avatar-nav-item {
     border-radius: 4px;
@@ -2651,13 +2666,16 @@ input[type='text'] {
 .tabs-inspector {
   .nav-item {
     width: 50%;
-    background-color: #fff !important;
   }
 
   .nav-item:not(.active) {
     border-bottom: 1px solid #e7eaef;
   }
 
+  .nav-link {
+    border-color: transparent !important;
+  }
+
   .nav-link.active {
     border: 1px solid transparent;
     border-bottom: 1px solid $primary;