mirror of
https://github.com/grafana/grafana.git
synced 2024-11-26 02:40:26 -06:00
Login: Better auto sizing of login logo (#21645)
This commit is contained in:
parent
5dddc91ba5
commit
741e1bb7e9
@ -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" />
|
||||
</>
|
||||
);
|
||||
|
@ -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>
|
||||
{({
|
||||
|
@ -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"
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user