From c8e42c021699137033d4a44223c766c59fb5a6b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 23 Nov 2018 07:31:13 +0100
Subject: [PATCH] styling tweaks

---
 .../dashboard/dashgrid/GeneralTab.tsx         |  2 +-
 .../dashboard/dashgrid/PanelEditor.tsx        |  6 +++-
 .../dashboard/dashgrid/VizTypePicker.tsx      |  4 ---
 public/img/panel-tabs/alert-selected.svg      |  9 ++++++
 public/img/panel-tabs/general-selected.svg    | 31 +++++++++++++++++++
 public/img/panel-tabs/general.svg             |  8 +++++
 public/sass/_variables.dark.scss              |  4 +--
 public/sass/components/_gf-form.scss          |  1 +
 public/sass/components/_panel_editor.scss     |  8 ++---
 public/sass/components/_toolbar.scss          |  1 +
 10 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 public/img/panel-tabs/alert-selected.svg
 create mode 100644 public/img/panel-tabs/general-selected.svg
 create mode 100644 public/img/panel-tabs/general.svg

diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/dashgrid/GeneralTab.tsx
index 2814b825f17..96694e346df 100644
--- a/public/app/features/dashboard/dashgrid/GeneralTab.tsx
+++ b/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>
     );
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 24856006e28..eef7431eec5 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/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({
diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
index 4d886c86d74..2dd1b0284b6 100644
--- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+++ b/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>
       </>
     );
   }
diff --git a/public/img/panel-tabs/alert-selected.svg b/public/img/panel-tabs/alert-selected.svg
new file mode 100644
index 00000000000..482b3c16e73
--- /dev/null
+++ b/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>
diff --git a/public/img/panel-tabs/general-selected.svg b/public/img/panel-tabs/general-selected.svg
new file mode 100644
index 00000000000..d200bbc367b
--- /dev/null
+++ b/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>
diff --git a/public/img/panel-tabs/general.svg b/public/img/panel-tabs/general.svg
new file mode 100644
index 00000000000..994b8512bc9
--- /dev/null
+++ b/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>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 43aa7df7683..2e98bc48aae 100644
--- a/public/sass/_variables.dark.scss
+++ b/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;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 48e886e4c93..b15283e00e3 100644
--- a/public/sass/components/_gf-form.scss
+++ b/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+.
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index 656c1eb429b..ba4f8af633f 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/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 {
diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss
index 6eb4e4f7e7f..38b482d8188 100644
--- a/public/sass/components/_toolbar.scss
+++ b/public/sass/components/_toolbar.scss
@@ -8,6 +8,7 @@
   flex: 0 0 auto;
   background: $toolbar-bg;
   border-radius: 3px;
+  height: 44px;
 }
 
 .toolbar__heading {