Login: Better auto sizing of login logo (#21645)

This commit is contained in:
Torkel Ödegaard 2020-01-22 11:06:12 +01:00 committed by GitHub
parent 5dddc91ba5
commit 741e1bb7e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 16 deletions

View File

@ -7,9 +7,13 @@ export interface BrandComponentProps {
}
export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
const maxSize = css`
max-width: 150px;
`;
return (
<>
<img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />
<img className={cx(className, maxSize)} src="public/img/grafana_icon.svg" alt="Grafana" />
<div className="logo-wordmark" />
</>
);

View File

@ -15,7 +15,7 @@ export const LoginPage: FC = () => {
<Branding.LoginBackground className="login container">
<div className="login-content">
<div className="login-branding">
<Branding.LoginLogo className="logo-icon" />
<Branding.LoginLogo className="login-logo" />
</div>
<LoginCtrl>
{({

View File

@ -57,7 +57,6 @@ export const LicenseChrome: React.FC<Props> = ({ header, editionNotice, subheade
}}
>
<img
className="logo-icon"
src="/public/img/grafana_icon.svg"
alt="Grafana"
width="80px"

View File

@ -115,12 +115,13 @@ select:-webkit-autofill:focus {
align-items: center;
justify-content: center;
flex-grow: 0;
padding-top: $space-xl;
padding: $space-xl;
}
.logo-icon {
width: 70px;
margin-bottom: 15px;
}
.login-logo {
width: 100%;
max-width: 250px;
margin-bottom: 15px;
}
.app-grafana {
@ -285,10 +286,6 @@ select:-webkit-autofill:focus {
@include media-breakpoint-up(sm) {
.login-branding {
padding: $space-md;
.logo-icon {
width: 80px;
}
}
}
@ -309,10 +306,6 @@ select:-webkit-autofill:focus {
padding: $space-xl;
flex-grow: 1;
border-right: 1px solid $login-border;
.logo-icon {
width: 130px;
}
}
.login-button-group {