Explore: Convert SASS styles of explore-active-button to emotion (gra…

…fana#50061) * Chore: replace sass styling by emotion incl. new theme * Chore: remove sass styling * Chore: change colour * Chore: change colour * Chore: clean up Co-authored-by: Giordano Ricci <[email protected]> Co-authored-by: Giordano Ricci <[email protected]>
santihernandezc · Jun 10, 2022 · 85ecf99 · 85ecf99
1 parent 9d73264
commit 85ecf99
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx
@@ -21,6 +21,11 @@ const getStyles = (theme: GrafanaTheme2) => {
     containerMargin: css`
       margin-top: ${theme.spacing(2)};
     `,
+    exploreActiveButton: css`
+      box-shadow: ${theme.shadows.z1};
+      border: 1px solid ${theme.colors.warning.border};
+      color: ${theme.colors.warning.text};
+    `,
   };
 };
 export function SecondaryActions(props: Props) {
@@ -44,7 +49,7 @@ export function SecondaryActions(props: Props) {
           <Button
             variant="secondary"
             aria-label="Rich history button"
-            className={cx({ ['explore-active-button']: props.richHistoryButtonActive })}
+            className={cx({ [styles.exploreActiveButton]: props.richHistoryButtonActive })}
             onClick={props.onClickRichHistoryButton}
             icon="history"
           >
@@ -54,7 +59,7 @@ export function SecondaryActions(props: Props) {
         <Button
           variant="secondary"
           aria-label="Query inspector button"
-          className={cx({ ['explore-active-button']: props.queryInspectorButtonActive })}
+          className={cx({ [styles.exploreActiveButton]: props.queryInspectorButtonActive })}
           onClick={props.onClickQueryInspectorButton}
           icon="info-circle"
         >

diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
@@ -1,9 +1,3 @@
-.explore-active-button {
-  box-shadow: $btn-active-box-shadow;
-  border: 1px solid $orange-dark !important;
-  color: $orange-dark !important;
-}
-
 // TODO: check if this is used
 .explore {
   display: flex;