From ba60be97fe9013fcaea1135318d3b44e5d613f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 16 Apr 2020 17:55:08 +0200
Subject: [PATCH] UX: Minor style tweaks and fixes (#23614)

* UX: Minor style tweaks and fixes

* Updated
---
 .../components/AddPanelWidget/AddPanelWidget.tsx    | 10 +++++++---
 .../components/AddPanelWidget/_AddPanelWidget.scss  |  9 +--------
 .../__snapshots__/AddPanelWidget.test.tsx.snap      | 13 +++++++------
 public/sass/components/_gf-form.scss                |  3 ++-
 public/sass/components/_navbar.scss                 |  2 ++
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index c3f80d71454..ad1a504e5aa 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -164,9 +164,13 @@ export class AddPanelWidgetUnconnected extends React.Component<Props, State> {
           <div className="add-panel-widget__header grid-drag-handle">
             <Icon name="panel-add" type="mono" size="xl" style={{ margin: '4px', marginRight: '8px' }} />
             <span className="add-panel-widget__title">New Panel</span>
-            <button className="add-panel-widget__close" onClick={this.handleCloseAddPanel}>
-              <IconButton name="times" />
-            </button>
+            <div className="flex-grow-1"></div>
+            <IconButton
+              name="times"
+              onClick={this.handleCloseAddPanel}
+              surface="header"
+              className="add-panel-widget__close"
+            />
           </div>
           <div className="add-panel-widget__btn-container">
             <div className="add-panel-widget__create">
diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
index 3ddc7e6acdb..ccb5d7fe667 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
@@ -9,7 +9,7 @@
 .add-panel-widget__header {
   top: 0;
   position: absolute;
-  padding: 0 15px;
+  padding: 0 8px;
   display: flex;
   align-items: center;
   width: 100%;
@@ -54,13 +54,6 @@
   }
 }
 
-.add-panel-widget__close {
-  margin: 7px -10px 0 auto;
-  background-color: transparent;
-  border: 0;
-  font-size: 16px;
-}
-
 .add-panel-widget__create {
   display: inherit;
   margin-bottom: $space-lg;
diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
index 57c5cfcdd3d..0a643452906 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+++ b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
@@ -26,14 +26,15 @@ exports[`Render should render component 1`] = `
       >
         New Panel
       </span>
-      <button
+      <div
+        className="flex-grow-1"
+      />
+      <IconButton
         className="add-panel-widget__close"
+        name="times"
         onClick={[Function]}
-      >
-        <IconButton
-          name="times"
-        />
-      </button>
+        surface="header"
+      />
     </div>
     <div
       className="add-panel-widget__btn-container"
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 692163a1b52..c906581bb1a 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -194,7 +194,8 @@ $input-border: 1px solid $input-border-color;
   @at-root textarea#{&} {
     overflow: auto;
     white-space: pre-wrap;
-    height: auto;
+    padding: 6px $space-sm;
+    min-height: $input-height;
   }
 
   // Unstyle the caret on `<select>`s in IE10+.
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index e66f6b06e89..0940a135441 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -125,6 +125,8 @@ i.navbar-page-btn__search {
   font-weight: $btn-font-weight;
   padding: 0 $space-sm;
   height: 32px;
+  // 2px less then border
+  line-height: 30px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
   margin-left: $space-xs;