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

Login: Refactoring how login background is rendered (#21446)

Browse Source 
* Login: Refactoring how login background is rendered

* Tweak
This commit is contained in:
Torkel Ödegaard 2020-01-13 09:42:21 +01:00 committed by GitHub
parent 27a77f588c
commit b6c75b10d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/Branding/Branding.tsx
View File

@ -1,7 +1,9 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { css, cx } from 'emotion';
export interface BrandComponentProps { export interface BrandComponentProps {
className?: string; className?: string;
children?: JSX.Element | JSX.Element[];
} }
export const LoginLogo: FC<BrandComponentProps> = ({ className }) => { export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
@ -13,11 +15,21 @@ export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
); );
}; };
export const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
const background = css`
background: url(public/img/heatmap_bg_test.svg);
background-size: cover;
`;
return <div className={cx(background, className)}>{children}</div>;
};
export const MenuLogo: FC<BrandComponentProps> = ({ className }) => { export const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />; return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
}; };
export class Branding { export class Branding {
static LoginLogo = LoginLogo; static LoginLogo = LoginLogo;
static LoginBackground = LoginBackground;
static MenuLogo = MenuLogo; static MenuLogo = MenuLogo;
} }

9
public/app/core/components/Login/LoginPage.tsx
View File

@ -1,15 +1,18 @@
// Libraries
import React, { FC } from 'react'; import React, { FC } from 'react';
import { CSSTransition } from 'react-transition-group';
// Components
import { UserSignup } from './UserSignup'; import { UserSignup } from './UserSignup';
import { LoginServiceButtons } from './LoginServiceButtons'; import { LoginServiceButtons } from './LoginServiceButtons';
import LoginCtrl from './LoginCtrl'; import LoginCtrl from './LoginCtrl';
import { LoginForm } from './LoginForm'; import { LoginForm } from './LoginForm';
import { ChangePassword } from './ChangePassword'; import { ChangePassword } from './ChangePassword';
import { CSSTransition } from 'react-transition-group';
import { Branding } from 'app/core/components/Branding/Branding'; import { Branding } from 'app/core/components/Branding/Branding';
export const LoginPage: FC = () => { export const LoginPage: FC = () => {
return ( return (
<div className="login container"> <Branding.LoginBackground className="login container">
<div className="login-content"> <div className="login-content">
<div className="login-branding"> <div className="login-branding">
<Branding.LoginLogo className="logo-icon" /> <Branding.LoginLogo className="logo-icon" />
@ -59,6 +62,6 @@ export const LoginPage: FC = () => {
<div className="clearfix" /> <div className="clearfix" />
</div> </div>
</div> </Branding.LoginBackground>
); );
}; };

2
public/sass/pages/_login.scss
View File

@ -10,8 +10,6 @@ $login-border: #8daac5;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-image: url(../img/heatmap_bg_test.svg);
background-size: cover;
color: #d8d9da; color: #d8d9da;
& a { & a {