Merge pull request #15120 from grafana/panel-option-styles

Tweaked panel option group styles

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -10,6 +10,7 @@
   font-size: 1.1rem;
   background: $panel-options-group-header-bg;
   position: relative;
+  border-radius: $border-radius $border-radius 0 0;
 
   .btn {
     position: absolute;

public/sass/_variables.dark.scss

@@ -392,8 +392,8 @@ $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
 
-$panel-options-group-border: 1px solid $dark-3;
-$panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
+$panel-options-group-border: none;
+$panel-options-group-header-bg: $gray-blue;
 
 $panel-grid-placeholder-bg: darken($blue, 47%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue;

public/sass/_variables.light.scss

@@ -400,8 +400,8 @@ $panel-editor-tabs-line-color: $dark-5;
 $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
 $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
 
-$panel-options-group-border: 1px solid $gray-6;
-$panel-options-group-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
+$panel-options-group-border: none;
+$panel-options-group-header-bg: $gray-5;
 
 $panel-grid-placeholder-bg: lighten($blue, 62%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue-light;