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 { css, cx } from 'emotion';
export interface BrandComponentProps {
className?: string;
children?: JSX.Element | JSX.Element[];
}
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 }) => {
return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
};
export class Branding {
static LoginLogo = LoginLogo;
static LoginBackground = LoginBackground;
static MenuLogo = MenuLogo;
}

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

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

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

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