Explore: Refactor active buttons css (#22124)

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 (

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

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()}

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

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;