styling tweaks

public/app/features/dashboard/dashgrid/GeneralTab.tsx

@@ -44,7 +44,7 @@ export class GeneralTab extends PureComponent<Props> {
 
   render() {
     return (
-      <EditorTabBody heading="General" toolbarItems={[]}>
+      <EditorTabBody heading="Basic Panel Options" toolbarItems={[]}>
         <div ref={element => (this.element = element)} />
       </EditorTabBody>
     );

public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -72,7 +72,11 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     const { plugin } = this.props;
     const activeTab = store.getState().location.query.tab || 'queries';
 
-    const tabs = [{ id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }];
+    const tabs = [
+      { id: 'queries', text: 'Queries' },
+      { id: 'visualization', text: 'Visualization' },
+      { id: 'general', text: 'General' },
+    ];
 
     if (config.alertingEnabled && plugin.id === 'graph') {
       tabs.push({

public/app/features/dashboard/dashgrid/VizTypePicker.tsx

@@ -67,10 +67,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
           />
           <i className="gf-form-input-icon fa fa-search" />
         </label>
-        <div className="p-l-1">
-          <button className="btn toggle-btn gf-form-btn active">Basic Types</button>
-          <button className="btn toggle-btn gf-form-btn">Master Types</button>
-        </div>
       </>
     );
   }

public/img/panel-tabs/alert-selected.svg

@@ -0,0 +1,9 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<line x1="12.5925" y1="28.1482" x2="31.4073" y2="28.1482" stroke="#8E8E8E" stroke-width="4" stroke-linecap="round"/>
+<ellipse cx="22.0001" cy="20.3704" rx="8.96296" ry="9.77778" fill="#8E8E8E"/>
+<circle cx="22.0001" cy="30.1482" r="2.44444" fill="#8E8E8E"/>
+<line x1="18.7407" y1="30.463" x2="25.2592" y2="30.463" stroke="#09090B"/>
+<rect x="13.0371" y="20.3704" width="17.9259" height="6.51852" fill="#8E8E8E"/>
+<ellipse cx="22.0001" cy="11.0001" rx="0.814815" ry="1.22222" fill="#8E8E8E"/>
+</svg>

public/img/panel-tabs/general-selected.svg

@@ -0,0 +1,31 @@
+<svg width="65" height="54" viewBox="0 0 65 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27" cy="27" r="25" fill="#09090B" stroke="url(#paint0_linear)" stroke-width="4"/>
+<ellipse cx="27" cy="33" rx="14" ry="6" fill="url(#paint1_linear)"/>
+<ellipse cx="27" cy="30" rx="14" ry="6" fill="#09090B"/>
+<ellipse cx="27" cy="27" rx="14" ry="6" fill="url(#paint2_linear)"/>
+<ellipse cx="27" cy="24" rx="14" ry="6" fill="#09090B"/>
+<ellipse cx="27" cy="21" rx="14" ry="6" fill="url(#paint3_linear)"/>
+<path d="M52 37L65 26.9999L52 17L52 37Z" fill="url(#paint4_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="27" y1="2.01165e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="27" y1="1.40816e-06" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="27" y1="-6.03497e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="57" y1="54" x2="57" y2="7.55191e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EB7B18"/>
+<stop offset="1" stop-color="#D44A3A"/>
+</linearGradient>
+</defs>
+</svg>

public/img/panel-tabs/general.svg

@@ -0,0 +1,8 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<ellipse cx="21.9999" cy="26.8889" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+<ellipse cx="21.9999" cy="24.4444" rx="11.4074" ry="4.88889" fill="#09090B"/>
+<ellipse cx="21.9999" cy="22" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+<ellipse cx="21.9999" cy="19.5555" rx="11.4074" ry="4.88889" fill="#09090B"/>
+<ellipse cx="21.9999" cy="17.1111" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+</svg>

public/sass/_variables.dark.scss

@@ -79,7 +79,7 @@ $brand-gradient: linear-gradient(
 );
 
 $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
-$edit-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 00px, #090909 50%);
+$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 00px, #090909 60%);
 
 // Links
 // -------------------------
@@ -366,6 +366,6 @@ $switch-slider-shadow: 0 0 3px black;
 //Checkbox
 // -------------------------
 $checkbox-bg: $dark-1;
-$checkbox-border: 1px solid $gray-2;
+$checkbox-border: 1px solid $gray-1;
 $checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
 $checkbox-color: $dark-1;

public/sass/components/_gf-form.scss

@@ -181,6 +181,7 @@ $input-border: 1px solid $input-border-color;
   @at-root textarea#{&} {
     overflow: auto;
     white-space: pre-wrap;
+    height: auto;
   }
 
   // Unstyle the caret on `<select>`s in IE10+.

public/sass/components/_panel_editor.scss

@@ -37,6 +37,7 @@
   margin: 0 62px;
   border-left: 2px solid #ac5224;
   border-radius: 3px;
+  box-shadow: $popover-shadow;
 }
 
 .panel-editor__scroll {
@@ -167,8 +168,8 @@
   flex-direction: column;
   position: absolute;
   top: 79px;
-  left: 5px;
-  align-items: center;
+  left: 9px;
+  align-items: flex-start;
 
   &::before {
     content: '';
@@ -176,7 +177,7 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 25px;
+    left: 21px;
     width: 2px;
     background: #8e8e8e;
   }
@@ -198,7 +199,6 @@
 
   &.active {
     position: relative;
-    left: 4px;
   }
 
   img {

public/sass/components/_toolbar.scss

@@ -8,6 +8,7 @@
   flex: 0 0 auto;
   background: $toolbar-bg;
   border-radius: 3px;
+  height: 44px;
 }
 
 .toolbar__heading {