From 4fabade35c830be7b82313724f294266a60b5cb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 11 May 2021 16:34:44 +0200 Subject: [PATCH] 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 --- .../src/components/Forms/commonStyles.ts | 5 ++ .../app/core/components/Branding/Branding.tsx | 33 ++++---- .../app/core/components/Login/LoginLayout.tsx | 78 ++++++++++++------- .../app/core/components/Login/UserSignup.tsx | 3 +- public/app/features/users/SignupInvited.tsx | 2 +- .../panel/gettingstarted/GettingStarted.tsx | 2 +- .../gettingstarted/components/DocsCard.tsx | 2 +- .../components/TutorialCard.tsx | 10 ++- .../gettingstarted/components/sharedStyles.ts | 4 +- public/app/plugins/panel/welcome/Welcome.tsx | 2 +- public/img/g8_home_v2.svg | 33 ++++++++ public/img/g8_login_dark.svg | 39 ++++++++++ public/img/g8_login_light.svg | 27 +++++++ public/sass/base/_forms.scss | 1 + public/sass/components/_footer.scss | 9 +++ 15 files changed, 195 insertions(+), 55 deletions(-) create mode 100644 public/img/g8_home_v2.svg create mode 100644 public/img/g8_login_dark.svg create mode 100644 public/img/g8_login_light.svg diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index 8338a072044..a0ba0132352 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -15,6 +15,10 @@ export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => { const background = theme.components.input.background; const textColor = theme.components.input.text; + // Cannot use our normal borders for this color for some reason due the alpha values in them. + // Need to colors without alpha channel + const autoFillBorder = theme.isDark ? '#2e2f35' : '#bab4ca'; + return css` background: ${background}; line-height: ${theme.typography.body.lineHeight}; @@ -28,6 +32,7 @@ export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => { /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important; -webkit-text-fill-color: ${textColor} !important; + border-color: ${autoFillBorder}; } &:-webkit-autofill:focus { diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx index cf9c4de6a4a..9df89757dc0 100644 --- a/public/app/core/components/Branding/Branding.tsx +++ b/public/app/core/components/Branding/Branding.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { css, cx } from '@emotion/css'; -import { useTheme } from '@grafana/ui'; +import { useTheme2 } from '@grafana/ui'; +import { colorManipulator } from '@grafana/data'; export interface BrandComponentProps { className?: string; @@ -12,10 +13,21 @@ const LoginLogo: FC = ({ className }) => { }; const LoginBackground: FC = ({ className, children }) => { - const theme = useTheme(); + const theme = useTheme2(); + const background = css` - background: url(public/img/login_background_${theme.isDark ? 'dark' : 'light'}.svg); - background-size: cover; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg); + background-size: cover; + opacity: 0; + transition: opacity 3s ease-in-out; + } `; return
{children}
; @@ -26,9 +38,9 @@ const MenuLogo: FC = ({ className }) => { }; const LoginBoxBackground = () => { - const theme = useTheme(); + const theme = useTheme2(); return css` - background: ${theme.isLight ? 'rgba(6, 30, 200, 0.1 )' : 'rgba(18, 28, 41, 0.65)'}; + background: ${colorManipulator.alpha(theme.colors.background.primary, 0.7)}; background-size: cover; `; }; @@ -41,13 +53,6 @@ export class Branding { static AppTitle = 'Grafana'; static LoginTitle = 'Welcome to Grafana'; static GetLoginSubTitle = () => { - const slogans = [ - "Don't get in the way of the data", - 'Your single pane of glass', - 'Built better together', - 'Democratising data', - ]; - const count = slogans.length; - return slogans[Math.floor(Math.random() * count)]; + return null; }; } diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx index dbf8195243b..cadecb9f0c2 100644 --- a/public/app/core/components/Login/LoginLayout.tsx +++ b/public/app/core/components/Login/LoginLayout.tsx @@ -1,28 +1,33 @@ -import React, { FC } from 'react'; +import React, { FC, useEffect, useState } from 'react'; import { cx, css, keyframes } from '@emotion/css'; -import { useStyles } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui'; import { Branding } from '../Branding/Branding'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { Footer } from '../Footer/Footer'; interface InnerBoxProps { enterAnimation?: boolean; } export const InnerBox: FC = ({ children, enterAnimation = true }) => { - const loginStyles = useStyles(getLoginStyles); + const loginStyles = useStyles2(getLoginStyles); return
{children}
; }; export const LoginLayout: FC = ({ children }) => { - const loginStyles = useStyles(getLoginStyles); + const loginStyles = useStyles2(getLoginStyles); + const subTitle = Branding.GetLoginSubTitle(); + const [startAnim, setStartAnim] = useState(false); + + useEffect(() => setStartAnim(true), []); + return ( - -
+ +

{Branding.LoginTitle}

-

{Branding.GetLoginSubTitle()}

+ {subTitle &&

{Branding.GetLoginSubTitle()}

}
{children}
@@ -43,20 +48,33 @@ to{ transform: translate(0px, 0px); }`; -export const getLoginStyles = (theme: GrafanaTheme) => { - const bgColor = theme.isDark ? theme.palette.black : theme.palette.white; +export const getLoginStyles = (theme: GrafanaTheme2) => { + const bgColor = theme.isDark ? '#000' : theme.colors.background.canvas; + return { - container: css` - min-height: 100vh; - background-position: center; - background-repeat: no-repeat; - background-color: ${bgColor}; - min-width: 100%; - margin-left: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + container: css({ + minHeight: '100vh', + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + backgroundColor: bgColor, + minWidth: '100%', + marginLeft: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + + [theme.breakpoints.up('md')]: { + justifyContent: 'center', + }, + }), + loginAnim: css` + &:before { + opacity: 1; + } + + .login-content-box { + opacity: 1; + } `, submitButton: css` justify-content: center; @@ -72,7 +90,7 @@ export const getLoginStyles = (theme: GrafanaTheme) => { align-items: center; justify-content: center; flex-direction: column; - padding: ${theme.spacing.lg}; + padding: ${theme.spacing(3)}; `, titleWrapper: css` text-align: center; @@ -82,10 +100,10 @@ export const getLoginStyles = (theme: GrafanaTheme) => { `, subTitle: css` font-size: ${theme.typography.size.md}; - color: ${theme.colors.textSemiWeak}; + color: ${theme.colors.text.secondary}; `, loginContent: css` - max-width: 550px; + max-width: 478px; width: 100%; display: flex; align-items: stretch; @@ -94,8 +112,10 @@ export const getLoginStyles = (theme: GrafanaTheme) => { justify-content: center; z-index: 1; min-height: 320px; - border-radius: 3px; - padding: 20px 0; + border-radius: ${theme.shape.borderRadius(4)}; + padding: ${theme.spacing(2, 0)}; + opacity: 0; + transition: opacity 0.5s ease-in-out; `, loginOuterBox: css` display: flex; @@ -104,10 +124,8 @@ export const getLoginStyles = (theme: GrafanaTheme) => { justify-content: center; `, loginInnerBox: css` - padding: ${theme.spacing.xl}; - @media (max-width: 320px) { - padding: ${theme.spacing.lg}; - } + padding: ${theme.spacing(2)}; + display: flex; flex-direction: column; align-items: center; diff --git a/public/app/core/components/Login/UserSignup.tsx b/public/app/core/components/Login/UserSignup.tsx index c21a3c59b5d..3f80b49b1fa 100644 --- a/public/app/core/components/Login/UserSignup.tsx +++ b/public/app/core/components/Login/UserSignup.tsx @@ -17,8 +17,9 @@ export const UserSignup: FC<{}> = () => { `} href={href} variant="secondary" + fill="outline" > - Sign Up + Sign up ); diff --git a/public/app/features/users/SignupInvited.tsx b/public/app/features/users/SignupInvited.tsx index 2ce7a0ac835..57cfe41a5df 100644 --- a/public/app/features/users/SignupInvited.tsx +++ b/public/app/features/users/SignupInvited.tsx @@ -96,7 +96,7 @@ export const SignupInvitedPage: FC = ({ match }) => { /> - + )} diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx index a762ecd5b8a..7203b1ea62b 100644 --- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx +++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx @@ -124,7 +124,7 @@ const getStyles = stylesFactory(() => { display: flex; flex-direction: column; height: 100%; - background: url(public/img/getting_started_bg_${theme.type}.svg) no-repeat; + // background: url(public/img/getting_started_bg_${theme.type}.svg) no-repeat; background-size: cover; padding: ${theme.spacing.xl} ${theme.spacing.md} 0; `, diff --git a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx index af38f9e388f..6b4d57b22e5 100644 --- a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx +++ b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx @@ -53,7 +53,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => { margin-bottom: ${theme.spacing.md}; `, title: css` - margin-bottom: 48px; + margin-bottom: ${theme.spacing.md}; `, url: css` border-top: 1px solid ${theme.colors.border1}; diff --git a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx index 9a0fa796c64..d0d4dc38ebb 100644 --- a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx +++ b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx @@ -19,7 +19,7 @@ export const TutorialCard: FC = ({ card }) => {
{card.type}
{card.done ? 'complete' : card.heading}
-

{card.title}

+

{card.title}

{card.info}
@@ -37,7 +37,6 @@ const handleTutorialClick = (event: MouseEvent, 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}; `, diff --git a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts index 00c00f61ecd..b89966f84de 100644 --- a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts +++ b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts @@ -10,7 +10,7 @@ export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean) const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients; return ` - background-color: ${theme.colors.bg1}; + background-color: ${theme.colors.bg2}; margin-right: ${theme.spacing.xl}; border: 1px solid ${theme.colors.border1}; border-bottom-left-radius: ${theme.border.radius.md}; @@ -45,5 +45,5 @@ export const iconStyle = stylesFactory( ); export const cardContent = css` - padding: 24px 16px; + padding: 16px; `; diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx index 2afcb26822c..d2194971b8e 100644 --- a/public/app/plugins/panel/welcome/Welcome.tsx +++ b/public/app/plugins/panel/welcome/Welcome.tsx @@ -40,7 +40,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { return { container: css` display: flex; - background: url(public/img/login_background_${theme.type}.svg) no-repeat; + /// background: url(public/img/g8_home_v2.svg) no-repeat; background-size: cover; height: 100%; align-items: center; diff --git a/public/img/g8_home_v2.svg b/public/img/g8_home_v2.svg new file mode 100644 index 00000000000..290541d7678 --- /dev/null +++ b/public/img/g8_home_v2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/g8_login_dark.svg b/public/img/g8_login_dark.svg new file mode 100644 index 00000000000..844f2640066 --- /dev/null +++ b/public/img/g8_login_dark.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/g8_login_light.svg b/public/img/g8_login_light.svg new file mode 100644 index 00000000000..4f8835fa0f6 --- /dev/null +++ b/public/img/g8_login_light.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 06edf724c5b..b9ab130e1fc 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -244,4 +244,5 @@ select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px $input-bg inset !important; -webkit-text-fill-color: $input-color !important; box-shadow: 0 0 0px 1000px $input-bg inset; + border: 1px solid $input-bg; } diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index b52b1935718..ce3c74e4c2d 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -49,6 +49,15 @@ bottom: $spacer; position: absolute; padding: $space-md 0 $space-md 0; + color: $text-color; + + a { + color: $text-color; + + &:hover { + color: $text-color-strong; + } + } } }