UX: Minor style tweaks and fixes (#23614)

* UX: Minor style tweaks and fixes

* Updated

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">
           <div className="add-panel-widget__header grid-drag-handle">
             <Icon name="panel-add" type="mono" size="xl" style={{ margin: '4px', marginRight: '8px' }} />
             <Icon name="panel-add" type="mono" size="xl" style={{ margin: '4px', marginRight: '8px' }} />
             <span className="add-panel-widget__title">New Panel</span>
             <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>
           <div className="add-panel-widget__btn-container">
           <div className="add-panel-widget__btn-container">
             <div className="add-panel-widget__create">
             <div className="add-panel-widget__create">

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -9,7 +9,7 @@
 .add-panel-widget__header {
 .add-panel-widget__header {
   top: 0;
   top: 0;
   position: absolute;
   position: absolute;
-  padding: 0 15px;
+  padding: 0 8px;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   width: 100%;
   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 {
 .add-panel-widget__create {
   display: inherit;
   display: inherit;
   margin-bottom: $space-lg;
   margin-bottom: $space-lg;

public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap

@@ -26,14 +26,15 @@ exports[`Render should render component 1`] = `
       >
       >
         New Panel
         New Panel
       </span>
       </span>
-      <button
+      <div
+        className="flex-grow-1"
+      />
+      <IconButton
         className="add-panel-widget__close"
         className="add-panel-widget__close"
+        name="times"
         onClick={[Function]}
         onClick={[Function]}
-      >
-        <IconButton
-          name="times"
-        />
-      </button>
+        surface="header"
+      />
     </div>
     </div>
     <div
     <div
       className="add-panel-widget__btn-container"
       className="add-panel-widget__btn-container"

public/sass/components/_gf-form.scss

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

public/sass/components/_navbar.scss

@@ -125,6 +125,8 @@ i.navbar-page-btn__search {
   font-weight: $btn-font-weight;
   font-weight: $btn-font-weight;
   padding: 0 $space-sm;
   padding: 0 $space-sm;
   height: 32px;
   height: 32px;
+  // 2px less then border
+  line-height: 30px;
   color: $text-muted;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
   border: 1px solid $navbar-button-border;
   margin-left: $space-xs;
   margin-left: $space-xs;