IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Convert SASS styles of explore-active-button to emotion (#50061)

Browse Source 
* 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 <me@giordanoricci.com>

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
This commit is contained in:
Laura 2022-06-10 16:01:28 +02:00 committed by GitHub
parent 9d73264895
commit 85ecf997be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/explore/SecondaryActions.tsx
View File

@ -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"
>

6
public/sass/pages/_explore.scss
View File

@ -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;