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

Theme: Page styles move to emotion global styles and design tweaks (#33529)

Browse Source 
* Theme: Page styles move to emotion global styles and design tweaks

* More style tweaks

* tweaks

* Updating snapshots

* Another fix

* Another fix

* minor fix

* More style tweaks to page toolbar and alert rule page

* minor polish
This commit is contained in:
Torkel Ödegaard
2021-04-30 10:04:01 +02:00
committed by GitHub
parent aaca022df6
commit f6ecded86b
40 changed files with 367 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
View File

@@ -1,6 +1,6 @@
import React, { FC, useMemo } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { PageToolbar, ToolbarButton, useStyles, CustomScrollbar, Spinner, Alert } from '@grafana/ui';
import { GrafanaThemeV2 } from '@grafana/data';
import { PageToolbar, Button, useStyles2, CustomScrollbar, Spinner, Alert } from '@grafana/ui';
import { css } from '@emotion/css';
import { AlertTypeStep } from './AlertTypeStep';
@@ -24,7 +24,7 @@ type Props = {
};
export const AlertRuleForm: FC<Props> = ({ existing }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const dispatch = useDispatch();
const defaultValues: RuleFormValues = useMemo(() => {
@@ -73,22 +73,22 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
return (
<FormProvider {...formAPI}>
<form onSubmit={handleSubmit((values) => submit(values, false))} className={styles.form}>
<PageToolbar title="Create alert rule" pageIcon="bell" className={styles.toolbar}>
<PageToolbar title="Create alert rule" pageIcon="bell">
<Link to="/alerting/list">
<ToolbarButton variant="default" disabled={submitState.loading} type="button">
<Button variant="secondary" disabled={submitState.loading} type="button" fill="outline">
Cancel
</ToolbarButton>
</Button>
</Link>
<ToolbarButton
variant="primary"
<Button
variant="secondary"
type="button"
onClick={handleSubmit((values) => submit(values, false))}
disabled={submitState.loading}
>
{submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
Save
</ToolbarButton>
<ToolbarButton
</Button>
<Button
variant="primary"
type="button"
onClick={handleSubmit((values) => submit(values, true))}
@@ -96,7 +96,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
>
{submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
Save and exit
</ToolbarButton>
</Button>
</PageToolbar>
<div className={styles.contentOuter}>
<CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
@@ -128,15 +128,10 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
);
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaThemeV2) => {
return {
buttonSpinner: css`
margin-right: ${theme.spacing.sm};
`,
toolbar: css`
padding-top: ${theme.spacing.sm};
padding-bottom: ${theme.spacing.md};
border-bottom: solid 1px ${theme.colors.border2};
margin-right: ${theme.spacing(1)};
`,
form: css`
width: 100%;
@@ -146,19 +141,16 @@ const getStyles = (theme: GrafanaTheme) => {
`,
contentInner: css`
flex: 1;
padding: ${theme.spacing.md};
padding: ${theme.spacing(2)};
`,
contentOuter: css`
background: ${theme.colors.panelBg};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()};
margin: ${theme.spacing(2)};
overflow: hidden;
flex: 1;
`,
formInput: css`
width: 400px;
& + & {
margin-left: ${theme.spacing.sm};
}
`,
flexRow: css`
display: flex;
flex-direction: row;