UX: BackButton left arrow icon (#22369)

* Adding new svg for back arrow button

* Created new back button component

* same stroke width

* minor fix

* Style changes

* hover animation

* Minor tweak

public/app/core/components/BackButton/BackButton.tsx

@@ -0,0 +1,79 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
+import { stylesFactory, useTheme, Tooltip, selectThemeVariant } from '@grafana/ui';
+
+export type Props = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const BackButton: React.FC<Props> = props => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <Tooltip content="Go back (Esc)" placement="bottom">
+      <button className={styles.wrapper} {...props}>
+        <i className="gicon gicon-arrow-left" />
+      </button>
+    </Tooltip>
+  );
+};
+
+BackButton.displayName = 'BackButton';
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const hoverColor = selectThemeVariant({ dark: theme.colors.gray25, light: theme.colors.gray85 }, theme.type);
+
+  return {
+    wrapper: css`
+      background: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      box-shadow: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      &:before {
+        content: '';
+        display: block;
+        opacity: 1;
+        position: absolute;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: -1;
+        bottom: -10px;
+        left: -10px;
+        right: -10px;
+        top: -10px;
+        background: none;
+        border-radius: 50%;
+        box-sizing: border-box;
+        transform: scale(0);
+        transition-property: transform, opacity;
+      }
+
+      .gicon {
+        opacity: 0.9;
+        font-size: 26px;
+      }
+
+      &:hover {
+        &:before {
+          background-color: ${hoverColor};
+          border: none;
+          box-shadow: none;
+          opacity: 1;
+          transform: scale(0.8);
+        }
+
+        .gicon {
+          opacity: 1;
+          transition: opacity 0.2s ease-in-out;
+        }
+      }
+    `,
+  };
+});

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -8,7 +8,7 @@ import { PlaylistSrv } from 'app/features/playlist/playlist_srv';
 // Components
 import { DashNavButton } from './DashNavButton';
 import { DashNavTimeControls } from './DashNavTimeControls';
-import { Tooltip } from '@grafana/ui';
+import { BackButton } from 'app/core/components/BackButton/BackButton';
 // State
 import { updateLocation } from 'app/core/actions';
 // Types
@@ -156,15 +156,7 @@ export class DashNav extends PureComponent<Props> {
   renderBackButton() {
     return (
       <div className="navbar-edit">
-        <Tooltip content="Go back (Esc)">
-          <button
-            className="navbar-edit__back-btn"
-            onClick={this.onClose}
-            aria-label={e2e.pages.Dashboard.Toolbar.selectors.backArrow}
-          >
-            <i className="fa fa-arrow-left" />
-          </button>
-        </Tooltip>
+        <BackButton onClick={this.onClose} aria-label={e2e.pages.Dashboard.Toolbar.selectors.backArrow} />
       </div>
     );
   }

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

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
-import { CustomScrollbar, Forms, Icon, selectThemeVariant, stylesFactory } from '@grafana/ui';
+import { CustomScrollbar, Forms, selectThemeVariant, stylesFactory } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import config from 'app/core/config';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -18,6 +18,7 @@ import { PanelTitle } from './PanelTitle';
 import { DisplayMode, displayModes, PanelEditorTab } from './types';
 import { PanelEditorTabs } from './PanelEditorTabs';
 import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
+import { BackButton } from 'app/core/components/BackButton/BackButton';
 import { LocationState } from 'app/types';
 import { calculatePanelSize } from './utils';
 import { initPanelEditor, panelEditorCleanUp, updatePanelEditorUIState } from './state/actions';
@@ -231,9 +232,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
       <div className={styles.wrapper}>
         <div className={styles.toolbar}>
           <div className={styles.toolbarLeft}>
-            <button className="navbar-edit__back-btn" onClick={this.onPanelExit}>
-              <Icon name="arrow-left" />
-            </button>
+            <BackButton onClick={this.onPanelExit} />
             <PanelTitle value={panel.title} onChange={this.onPanelTitleChange} />
           </div>
           <div className={styles.toolbarLeft}>

public/img/icons_dark_theme/icon_arrow_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d8d9da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

public/img/icons_dark_theme/icon_arrow_left_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d8d9da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>

public/img/icons_dark_theme/icon_remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d8d9da" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

public/img/icons_light_theme/icon_arrow_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#52545c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

public/img/icons_light_theme/icon_arrow_left_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#52545c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>

public/sass/base/_icons.scss

@@ -66,6 +66,18 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
 }
 
+.gicon-remove {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_remove.svg');
+}
+
+.gicon-arrow-left {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_arrow_left.svg');
+}
+
+.gicon-arrow-left-circle {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_arrow_left_circle.svg');
+}
+
 //not used
 .gicon-alert-alt {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg');

public/sass/components/_navbar.scss

@@ -207,28 +207,6 @@ i.navbar-page-btn__search {
   padding-right: 13px;
 }
 
-.navbar-edit__back-btn {
-  background: transparent;
-  border: 2px solid $text-color;
-  border-radius: 50%;
-  width: 34px;
-  height: 34px;
-  transition: transform 0.1s ease 0.1s;
-  color: $text-color;
-
-  i {
-    font-size: $font-size-lg;
-    position: relative;
-    top: 1px;
-    right: 1px;
-  }
-
-  &:hover {
-    color: $text-color-strong;
-    border-color: $text-color-strong;
-  }
-}
-
 .navbar-settings-title {
   display: block;
   margin: 0;