Implement green headers in light mode, grey in dark

Author: Bård Øien

src/devtools/components/ScrollPane.vue

@@ -45,6 +45,12 @@ export default {
   flex-direction column
   height 100%
 
+  .header
+    background $white
+
+    .app.dark &
+      background transparent
+
 .scroll
   flex 1
   overflow auto

src/devtools/components/SplitPane.vue

@@ -55,6 +55,12 @@ export default {
 .left, .right
   position relative
 
+.right
+  background darken($white, 10%)
+
+  .app.dark &
+    background transparent
+
 .left
   border-right 1px solid $border-color
   .app.dark &

src/devtools/components/StateInspector.vue

@@ -64,31 +64,36 @@ export default {
 @import "../variables"
 
 .data-wrapper
-  padding 10px 0 20px 0
-  background darken($white, 10%)
+  padding 10px 0
 
   .app.dark &
     background $slate
 
-  .data-fields
-    padding 20px
-    background $white
-    border-bottom-left-radius 3px
-    border-bottom-right-radius 3px
-
-    .app.dark &
-      border 1px solid $green
-      background transparent
-
   .data-el
-    margin-bottom 10px
-    padding 0px 10px
+    margin 0 10px 10px 10px
     font-size 14px
+    box-shadow 0px 0px 5px darken($white, 20%)
+
+    .app.dark &
+      box-shadow none
 
     .data-type
       color $white
       background $green
       padding 5px 10px 5px 20px
       border-top-left-radius 3px
       border-top-right-radius 3px
+
+      .app.dark &
+        background $dark-border-color
+
+  .data-fields
+    padding 20px
+    background $white
+    border-radius 3px
+
+    .app.dark &
+      border 1px solid $dark-border-color
+      background transparent
+
 </style>