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/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}>