root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 75 Packages Projects Releases Wiki Activity

Convert getting started styles to object syntax

This commit is contained in:
Tom Ratcliffe 2024-03-07 16:17:46 +00:00 committed by Tom Ratcliffe
parent 30a791d77a
commit fb2ba574c6
2 changed files with 68 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.betterer.results
View File

@ -2225,18 +2225,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "3"], [0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"] [0, 0, 0, "Styles should be written using objects.", "4"]
], ],
"public/app/features/alerting/unified/home/GettingStarted.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"]
],
"public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [ "public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],

137
public/app/features/alerting/unified/home/GettingStarted.tsx
View File

@ -76,31 +76,31 @@ export default function GettingStarted() {
} }
const getWelcomePageStyles = (theme: GrafanaTheme2) => ({ const getWelcomePageStyles = (theme: GrafanaTheme2) => ({
grid: css` grid: css({
display: grid; display: 'grid',
grid-template-rows: min-content auto auto; gridTemplateRows: 'min-content auto auto',
grid-template-columns: 1fr; gridTemplateColumns: '1fr',
gap: ${theme.spacing(2)}; gap: theme.spacing(2),
width: 100%; width: '100%',
${theme.breakpoints.up('lg')} { [theme.breakpoints.up('lg')]: {
grid-template-columns: 3fr 2fr; gridTemplateColumns: '3fr 2fr',
} },
`, }),
ctaContainer: css` ctaContainer: css({
grid-column: 1 / span 5; gridColumn: '1 / span 5',
`, }),
svgContainer: css` svgContainer: css({
& svg { '& svg': {
max-width: 900px; maxWidth: '900px',
} },
`, }),
list: css` list: css({
margin: ${theme.spacing(0, 2)}; margin: theme.spacing(0, 2),
& > li { '& > li': {
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
} },
`, }),
}); });
export function WelcomeHeader({ className }: { className?: string }) { export function WelcomeHeader({ className }: { className?: string }) {
@ -144,26 +144,25 @@ const getWelcomeHeaderStyles = (theme: GrafanaTheme2) => ({
color: theme.colors.text.secondary, color: theme.colors.text.secondary,
paddingBottom: theme.spacing(2), paddingBottom: theme.spacing(2),
}), }),
ctaContainer: css` ctaContainer: css({
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
display: flex; display: 'flex',
gap: ${theme.spacing(4)}; gap: theme.spacing(4),
justify-content: space-between; justifyContent: 'space-between',
flex-wrap: wrap; flexWrap: 'wrap',
${theme.breakpoints.down('lg')} { [theme.breakpoints.down('lg')]: {
flex-direction: column; flexDirection: 'column',
} },
`, }),
separator: css({
width: '1px',
backgroundColor: theme.colors.border.medium,
separator: css` [theme.breakpoints.down('lg')]: {
width: 1px; display: 'none',
background-color: ${theme.colors.border.medium}; },
}),
${theme.breakpoints.down('lg')} {
display: none;
}
`,
}); });
interface WelcomeCTABoxProps { interface WelcomeCTABoxProps {
@ -192,31 +191,31 @@ function WelcomeCTABox({ title, description, href, hrefText }: WelcomeCTABoxProp
} }
const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({ const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
flex: 1; flex: 1,
min-width: 240px; minWidth: '240px',
display: grid; display: 'grid',
row-gap: ${theme.spacing(1)}; rowGap: theme.spacing(1),
grid-template-columns: min-content 1fr 1fr 1fr; gridTemplateColumns: 'min-content 1fr 1fr 1fr',
grid-template-rows: min-content auto min-content; gridTemplateRows: 'min-content auto min-content',
& h2 { '& h2': {
margin-bottom: 0; marginBottom: 0,
grid-column: 2 / span 3; gridColumn: '2 / span 3',
grid-row: 1; gridRow: 1,
} },
`, }),
desc: css` desc: css({
grid-column: 2 / span 3; gridColumn: '2 / span 3',
grid-row: 2; gridRow: 2,
`, }),
actionRow: css` actionRow: css({
grid-column: 2 / span 3; gridColumn: '2 / span 3',
grid-row: 3; gridRow: 3,
max-width: 240px; maxWidth: '240px',
`, }),
}); });
function ContentBox({ children, className }: React.PropsWithChildren<{ className?: string }>) { function ContentBox({ children, className }: React.PropsWithChildren<{ className?: string }>) {
@ -226,9 +225,9 @@ function ContentBox({ children, className }: React.PropsWithChildren<{ className
} }
const getContentBoxStyles = (theme: GrafanaTheme2) => ({ const getContentBoxStyles = (theme: GrafanaTheme2) => ({
box: css` box: css({
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
`, }),
}); });