ux: updated modal header design

public/sass/_variables.dark.scss

@@ -98,6 +98,11 @@ $panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191
 $panel-header-hover-bg:       $dark-4;
 $panel-header-menu-hover-bg:  $dark-5;
 
+// page header
+$page-header-bg: linear-gradient(90deg, #292a2d, black);
+$page-header-shadow: inset 0px -4px 14px $dark-2;
+$page-header-border-color: $dark-4;
+
 $divider-border-color:        #555;
 
 // Graphite Target Editor
@@ -276,7 +281,7 @@ $alert-warning-bg:        linear-gradient(90deg, #d44939, #e0603d);
 $alert-info-bg:           linear-gradient(100deg, #1a4552, #00374a);
 
 // popover
-$popover-bg:              $panel-bg;
+$popover-bg:              $page-bg;
 $popover-color:           $text-color;
 $popover-border-color:    $dark-4;
 $popover-shadow:          0 0 20px black;

public/sass/_variables.light.scss

@@ -70,6 +70,7 @@ $text-shadow-faint: none;
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
 $page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
+$page-header-bg: linear-gradient(90deg, #292a2d, black);
 
 // Links
 // -------------------------
@@ -103,6 +104,11 @@ $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px,
 $panel-header-hover-bg:       $gray-6;
 $panel-header-menu-hover-bg:  $gray-4;
 
+// Page header
+$page-header-bg: linear-gradient(90deg, #292a2d, black);
+$page-header-shadow: inset 0px -4px 14px $dark-2;
+$page-header-border-color: $dark-4;
+
 $divider-border-color:	      $gray-2;
 
 // Graphite Target Editor
@@ -290,7 +296,7 @@ $alert-warning-bg:        linear-gradient(90deg, #d44939, #e04d3d);
 $alert-info-bg:           $blue-dark;
 
 // popover
-$popover-bg:              $panel-bg;
+$popover-bg:              $page-bg;
 $popover-color:           $text-color;
 $popover-border-color:    $gray-5;
 $popover-shadow:          0 0 20px $white;

public/sass/components/_modals.scss

@@ -23,7 +23,7 @@
   position: fixed;
   z-index: $zindex-modal;
   width: 100%;
-	background-color: $panel-bg;
+	background: $page-bg;
   @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
   @include background-clip(padding-box);
   outline: none;
@@ -37,13 +37,10 @@
 }
 
 .modal-header {
-  background-color: $body-bg;
-	@include brand-bottom-border();
-	@include clearfix();
-
-  .gf-tabs-link.active {
-    background-color: $panel-bg;
-  }
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
+  @include clearfix();
 }
 
 .modal-header-title {

public/sass/components/_page_header.scss

 
 .page-header-canvas {
-  background: linear-gradient(90deg, #292a2d, black);
-  box-shadow: inset 0px -4px 14px $dark-2;
-  border-bottom: 1px solid $dark-4;
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
 }
 
 .page-header {

public/sass/mixins/_drop_element.scss

@@ -11,7 +11,6 @@
       background: $theme-bg;
       color: $theme-color;
       padding: 0.65rem;
-      font-size: $font-size-sm;
       word-wrap: break-word;
       max-width: 20rem;
       border: 1px solid $border-color;