From 2be4d8dfd08c5f58570eb3632e627025e422fc42 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 12 Feb 2020 20:11:40 +0100
Subject: [PATCH] Explore: Refactor active buttons css (#22124)

---
 .../src/components/TimePicker/TimePicker.tsx     | 15 +--------------
 public/app/features/explore/LiveTailButton.tsx   |  4 ++--
 public/app/features/explore/TimeSyncButton.tsx   | 15 +--------------
 .../__snapshots__/TimeSyncButton.test.tsx.snap   |  2 +-
 public/sass/pages/_explore.scss                  | 16 +++++++++++++++-
 5 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
index ebea926d9dc..5e16255a545 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
@@ -69,19 +69,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         font-size: ${theme.typography.size.md};
       }
     `,
-    syncedTimePicker: css`
-      label: syncedTimePicker;
-      border-color: ${theme.colors.orangeDark};
-      background-image: none;
-      background-color: transparent;
-      color: ${theme.colors.orangeDark};
-      &:focus,
-      :hover {
-        color: ${theme.colors.orangeDark};
-        background-image: none;
-        background-color: transparent;
-      }
-    `,
     noRightBorderStyle: css`
       label: noRightBorderStyle;
       border-right: 0;
@@ -160,7 +147,7 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
     const timePickerIconClass = cx('fa fa-clock-o fa-fw', { ['icon-brand-gradient']: syncedTimePicker });
     const timePickerButtonClass = cx('btn navbar-button navbar-button--tight', {
       [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: !!timeSyncButton,
-      [`explore-active-button-glow ${styles.syncedTimePicker}`]: syncedTimePicker,
+      [`explore-active-button`]: syncedTimePicker,
     });
 
     return (
diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index 80aeeb26820..0528a6e4b10 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -124,7 +124,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
         <ResponsiveButton
           splitted={splitted}
           buttonClassName={classNames('btn navbar-button', styles.liveButton, {
-            [`btn--radius-right-0 explore-active-button-glow ${styles.noRightBorderStyle}`]: isLive,
+            [`btn--radius-right-0 explore-active-button ${styles.noRightBorderStyle}`]: isLive,
             [styles.isLive]: isLive && !isPaused,
             [styles.isPaused]: isLive && isPaused,
           })}
@@ -151,7 +151,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
       >
         <div>
           <button
-            className={`btn navbar-button navbar-button--attached explore-active-button-glow ${styles.isLive}`}
+            className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
             onClick={stop}
           >
             <i className={classNames('fa fa-stop icon-brand-gradient')} />
diff --git a/public/app/features/explore/TimeSyncButton.tsx b/public/app/features/explore/TimeSyncButton.tsx
index ab2d3788497..602ba9b4dc9 100644
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -7,19 +7,6 @@ import { GrafanaTheme } from '@grafana/data';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
-    timePickerSynced: css`
-      label: timePickerSynced;
-      border-color: ${theme.colors.orangeDark};
-      background-image: none;
-      background-color: transparent;
-      color: ${theme.colors.orangeDark};
-      &:focus,
-      :hover {
-        color: ${theme.colors.orangeDark};
-        background-image: none;
-        background-color: transparent;
-      }
-    `,
     noRightBorderStyle: css`
       label: noRightBorderStyle;
       border-right: 0;
@@ -55,7 +42,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
     <Tooltip content={syncTimesTooltip} placement="bottom">
       <button
         className={classNames('btn navbar-button navbar-button--attached', {
-          [`explore-active-button-glow ${styles.timePickerSynced}`]: isSynced,
+          [`explore-active-button`]: isSynced,
         })}
         aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
         onClick={() => onClick()}
diff --git a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
index 1bd5c19c1f4..5f193a535a1 100644
--- a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`TimeSyncButton should render component 1`] = `
     >
       <button
         aria-label="Synced times"
-        className="btn navbar-button navbar-button--attached explore-active-button-glow css-1tn4rnx-timePickerSynced"
+        className="btn navbar-button navbar-button--attached explore-active-button"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 8167c7bb3e7..8337b7aa5d5 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -22,8 +22,22 @@
   }
 }
 
-.explore-active-button-glow {
+.explore-active-button {
   box-shadow: $btn-active-box-shadow;
+  border-color: $orange-dark;
+  background-image: none;
+  background-color: transparent;
+  color: $orange-dark !important;
+  &:focus {
+    background-color: transparent;
+  }
+  i {
+    text-shadow: none;
+    background: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -moz-text-fill-color: transparent;
+  }
 }
 .explore-ds-picker {
   min-width: 200px;