Explore: updates clear all button to responsive button (#19719)

* Explore: updates clear all button to responsive button

* Explore: update toolbar icons alignment

* Explore: adds responsive styles for explore icon alignment

public/app/features/explore/ExploreToolbar.tsx

@@ -251,7 +251,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
             )}
 
             {exploreId === 'left' && !splitted ? (
-              <div className="explore-toolbar-content-item">
+              <div className="explore-toolbar-content-item explore-icon-align">
                 <ResponsiveButton
                   splitted={splitted}
                   title="Split"
@@ -275,10 +275,14 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
               </div>
             )}
 
-            <div className="explore-toolbar-content-item">
-              <button className="btn navbar-button" onClick={this.onClearAll}>
-                Clear All
-              </button>
+            <div className="explore-toolbar-content-item explore-icon-align">
+              <ResponsiveButton
+                splitted={splitted}
+                title="Clear All"
+                onClick={this.onClearAll}
+                iconClassName="fa fa-fw fa-trash icon-margin-right"
+                disabled={isLive}
+              />
             </div>
             <div className="explore-toolbar-content-item">
               <RunButton

public/app/features/explore/ResponsiveButton.tsx

@@ -15,6 +15,10 @@ type Props = {
   disabled?: boolean;
 };
 
+function formatBtnTitle(title: string, iconSide?: string): string {
+  return iconSide === IconSide.left ? '\xA0' + title : iconSide === IconSide.right ? title + '\xA0' : title;
+}
+
 export const ResponsiveButton = (props: Props) => {
   const defaultProps = {
     iconSide: IconSide.left,
@@ -28,19 +32,9 @@ export const ResponsiveButton = (props: Props) => {
       onClick={onClick}
       disabled={disabled || false}
     >
-      {iconClassName && iconSide === IconSide.left ? (
-        <>
-          <i className={`${iconClassName}`} />
-          &nbsp;
-        </>
-      ) : null}
-      <span className="btn-title">{!splitted ? title : ''}</span>
-      {iconClassName && iconSide === IconSide.right ? (
-        <>
-          &nbsp;
-          <i className={`${iconClassName}`} />
-        </>
-      ) : null}
+      {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
+      <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
+      {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
     </button>
   );
 };

public/sass/pages/_explore.scss

@@ -1,9 +1,17 @@
 .icon-margin-right {
   margin-right: 0.25em;
+
+  @media only screen and (max-width: 1320px) {
+    margin-right: 0;
+  }
 }
 
 .icon-margin-left {
   margin-left: 0.25em;
+
+  @media only screen and (max-width: 1320px) {
+    margin-left: 0;
+  }
 }
 
 .datasource-picker {
@@ -126,6 +134,29 @@
   }
 }
 
+.explore-icon-align {
+  .navbar-button {
+    i {
+      position: relative;
+      top: -1px;
+
+      @media only screen and (max-width: 1320px) {
+        margin: 0 -3px;
+      }
+    }
+  }
+}
+
+.explore-toolbar.splitted {
+  .explore-icon-align {
+    .navbar-button {
+      i {
+        margin: 0 -3px;
+      }
+    }
+  }
+}
+
 .explore {
   display: flex;
   flex: 1 1 auto;
@@ -221,6 +252,7 @@
   from {
     color: $text-color-faint;
   }
+
   to {
     color: $blue;
   }
@@ -266,51 +298,63 @@
   border-bottom: 2px solid $body-bg;
   height: 2em;
 }
+
 .ReactTable .rt-thead.-header .rt-th {
   text-align: left;
   color: $blue;
   font-weight: $font-weight-semi-bold;
 }
+
 .ReactTable .rt-thead .rt-td,
 .ReactTable .rt-thead .rt-th {
   padding: 0.45em 0 0.45em 1.1em;
   border-right: none;
   box-shadow: none;
 }
+
 .ReactTable .rt-tbody .rt-td {
   padding: 0.45em 0 0.45em 1.1em;
   border-bottom: 2px solid $body-bg;
   border-right: 2px solid $body-bg;
 }
+
 .ReactTable .rt-tbody .rt-td:last-child {
   border-right: none;
 }
+
 .ReactTable .-pagination {
   border-top: none;
   box-shadow: none;
   margin-top: $space-sm;
 }
+
 .ReactTable .-pagination .-btn {
   color: $blue;
   background: $list-item-bg;
 }
+
 .ReactTable .-pagination input,
 .ReactTable .-pagination select {
   color: $input-color;
   background-color: $input-bg;
 }
+
 .ReactTable .-loading {
   background: $input-bg;
 }
+
 .ReactTable .-loading.-active {
   opacity: 0.8;
 }
+
 .ReactTable .-loading > div {
   color: $input-color;
 }
+
 .ReactTable .rt-tr .rt-td:last-child {
   text-align: right;
 }
+
 .ReactTable .rt-noData {
   top: 60px;
   z-index: inherit;