v8: Update login page design (#33923)

* Theme: Initial draft of dark login page

* update

* Updated login background

* Updates

* anim test

* Anim tweak

* Animate login box

* Updates

* Updating login page

* Improve footer readability on login page

* Fix sign up button
This commit is contained in:
Torkel Ödegaard
2021-05-11 16:34:44 +02:00
committed by GitHub
parent b3c4b08f03
commit 4fabade35c
15 changed files with 195 additions and 55 deletions

View File

@ -19,7 +19,7 @@ export const TutorialCard: FC<Props> = ({ card }) => {
<div className={cardContent}>
<div className={styles.type}>{card.type}</div>
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
<h4>{card.title}</h4>
<h4 className={styles.cardTitle}>{card.title}</h4>
<div className={styles.info}>{card.info}</div>
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" />
</div>
@ -37,7 +37,6 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
};
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
const textColor = `${complete ? theme.palette.blue95 : '#FFB357'}`;
return {
card: css`
${cardStyle(theme, complete)}
@ -53,14 +52,17 @@ const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
}
`,
type: css`
color: ${textColor};
color: ${theme.colors.textBlue};
text-transform: uppercase;
`,
heading: css`
text-transform: uppercase;
color: ${textColor};
color: ${theme.colors.textBlue};
margin-bottom: ${theme.spacing.sm};
`,
cardTitle: css`
margin-bottom: ${theme.spacing.md};
`,
info: css`
margin-bottom: ${theme.spacing.md};
`,