moved drag handle

public/sass/_variables.dark.scss

@@ -77,6 +77,7 @@ $brand-gradient: linear-gradient(
   rgba(255, 68, 0, 0.7) 99%,
   rgba(255, 68, 0, 0.7) 100%
 );
+
 $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
 
 // Links
@@ -110,7 +111,6 @@ $divider-border-color: #555;
 
 // Graphite Target Editor
 $tight-form-bg: $dark-3;
-
 $tight-form-func-bg: #333334;
 $tight-form-func-highlight-bg: #444445;
 
@@ -128,6 +128,7 @@ $list-item-bg: $card-background;
 $list-item-hover-bg: lighten($gray-blue, 2%);
 $list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
+
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
@@ -152,8 +153,8 @@ $table-bg-hover: $dark-3;
 $btn-primary-bg: #ff6600;
 $btn-primary-bg-hl: #bc3e06;
 
-$btn-secondary-bg: $blue-dark;
 $btn-secondary-bg-hl: lighten($blue-dark, 5%);
+$btn-secondary-bg: $blue-dark;
 
 $btn-success-bg: $green;
 $btn-success-bg-hl: darken($green, 6%);

public/sass/_variables.light.scss

@@ -31,6 +31,7 @@ $white: #fff;
 // Accent colors
 // -------------------------
 $blue: #0083b3;
+$blue-dark: #005f81;
 $blue-light: #00a8e6;
 $green: #3aa655;
 $red: #d44939;

public/sass/components/_buttons.scss

@@ -120,8 +120,8 @@
 // Info appears as a neutral blue
 .btn-secondary {
   @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+  // Inverse appears as dark gray
 }
-// Inverse appears as dark gray
 .btn-inverse {
   @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
   //background: $card-background;

public/sass/components/_viz_editor.scss

@@ -170,26 +170,37 @@
   position: absolute;
   height: 2px;
   width: 100%;
-  top: 1px;
+  top: -23px;
-  padding-left: 32px;
+  text-align: center;
+  height: 1px;
+
+  &:hover {
+    border-bottom: 2px dashed $text-color-faint;
+  }
 }
 
 .panel-editor-resizer__handle {
   display: inline-block;
-  width: 100px;
+  width: 180px;
   position: relative;
-  background: $input-label-bg;
-  top: -12px;
   border-radius: 2px;
-  box-shadow: 0 0 8px $black;
+  height: 10px;
-  height: 8px;
   cursor: grabbing;
+  background: $dark-4;
+  top: -8px;
+
+  &:hover {
+    background: linear-gradient(80deg, $blue-dark, lighten($blue-dark, 10%));
+    .panel-editor-resizer__handle-dots {
+      display: none;
+    }
+  }
 }
 
 .panel-editor-resizer__handle-dots {
-  border-top: 2px dotted $text-color-faint;
+  border-top: 2px dashed $text-color-faint;
   position: relative;
-  top: 3px;
+  top: 4px;
 }
 
 .panel-editor {