mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-09 00:18:00 +01:00
fix: add logo in login screen for small size screen (#523)
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
This commit is contained in:
Youssef Khedher
GitHub
parent
f2a85ebf79
commit
3281783fea
@ -0,0 +1 @@
|
||||
<svg id="bg" width="100%" height="100%" viewBox="0 0 622 318" fill="none"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#1a4049;}.cls-3{fill:#817afe;}</style></defs><circle class="cls-1" cx="125.62" cy="125.62" r="80"/><polygon class="cls-1" points="137.05 91.33 137.05 114.19 137.05 137.05 159.9 137.05 159.9 114.19 159.9 91.33 137.05 91.33"/><polygon class="cls-1" points="114.19 114.19 114.19 91.33 91.33 91.33 91.33 114.19 91.33 137.05 91.33 159.9 114.19 159.9 137.05 159.9 137.05 137.05 114.19 137.05 114.19 114.19"/><polygon class="cls-2" points="137.05 91.33 137.05 114.19 137.05 137.05 159.9 137.05 159.9 114.19 159.9 91.33 137.05 91.33"/><polygon class="cls-2" points="114.19 114.19 114.19 91.33 91.33 91.33 91.33 114.19 91.33 137.05 91.33 159.9 114.19 159.9 137.05 159.9 137.05 137.05 114.19 137.05 114.19 114.19"/><rect class="cls-3" x="137.05" y="137.05" width="22.86" height="22.86"/><path class="cls-1" d="M251.58,139.13V112.77h11.93v25.06c0,7.36,3.91,12.2,11.27,12.2s11.27-4.84,11.27-12.2V112.77h12v26.36c0,12.67-8.48,21.8-23.1,21.8C260.06,160.93,251.58,151.8,251.58,139.13Z"/><path class="cls-1" d="M321.91,159.9H310.08V112.77h11.83v7.92a17.93,17.93,0,0,1,15.65-9c11.83,0,19.66,8.67,19.66,20.68V159.9h-12V134.75c0-7.45-4.38-12.39-11.46-12.39s-11.83,5-11.83,12.39Z"/><path class="cls-1" d="M369.42,91.34h11.92V159.9H369.42Z"/><path class="cls-1" d="M441.24,137v1.3H403.79c.47,7.36,5.87,13,13.69,13,7.55,0,10.62-3.82,11.46-5.12h11.74c-.75,4.84-7.17,15-23.2,15-15.27,0-25.61-10.61-25.61-24.77,0-14.63,10.24-24.78,24.68-24.78S441.24,121.62,441.24,137Zm-37.08-6.9h24.6c-1.77-6-6.15-9.31-12.21-9.31C410.12,120.78,405.65,124.23,404.16,130.09Z"/><path class="cls-1" d="M467.78,130.37h15.47c0-5.68-4.29-9.31-11.27-9.31-6.62,0-9,3.54-9.78,4.75h-12c1-4.94,6.89-14.25,21.8-14.25,14.62,0,22.73,7.64,22.73,18.81V146.3c0,2.89,1,4,3.72,4.29v9.59h-3.72c-6.06-.09-9.69-2.33-11-6.52-2.23,3.45-7.26,7.27-15.27,7.27-11.09,0-19.47-6.24-19.47-15.93S456.14,130.37,467.78,130.37Zm15.47,12.11v-4H469.74c-5.59,0-9,2-9,6.33,0,4.57,4.29,7.27,10.25,7.27C477.66,152.08,483.25,148.82,483.25,142.48Z"/><path class="cls-1" d="M523.12,140.62c-10.34-.74-17.33-5.59-17.33-14.72,0-8.85,8.1-14.44,20.77-14.44,17,0,21.8,8.76,23.1,13.32H537.09c-.84-1-3.54-4.28-10.62-4.28-5.68,0-8.66,1.86-8.66,4.75,0,2.61,2,4.29,6.7,4.94l8,.84c12.77,1.11,18,6,18,15.27,0,8.85-7.36,14.91-21.8,14.91-17.51,0-23.19-10.16-24.12-14.53h12.76c.47,1.11,3.35,5.31,11.36,5.31,6.62,0,9.69-2.24,9.69-5.22s-1.67-4.66-7-5.31C528.05,141.18,526.38,141,523.12,140.62Z"/><path class="cls-1" d="M571.55,159.9H559.72V91.34h11.83v29.35a17.93,17.93,0,0,1,15.65-9c11.83,0,19.66,8.67,19.66,20.68V159.9h-12V134.75c0-7.45-4.38-12.39-11.46-12.39s-11.83,5-11.83,12.39Z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,15 +1,21 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
gradient: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
borderBottomLeftRadius: '3px',
|
||||
borderTopLeftRadius: '3px',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
color: '#fff',
|
||||
marginBottom: '1rem',
|
||||
fontSize: '2rem',
|
||||
marginTop: '5rem',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
textAlign: 'left',
|
||||
fontSize: '1.75rem',
|
||||
marginTop: 0,
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
container: {
|
||||
@ -28,9 +34,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
bannerSubtitle: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
maxWidth: '300px',
|
||||
fontSize: '1.75rem',
|
||||
textAlign: 'left',
|
||||
display: 'none',
|
||||
},
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
display: 'none',
|
||||
@ -40,16 +44,18 @@ export const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
logoContainer: {
|
||||
position: 'absolute',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
bottom: '-50px',
|
||||
left: '-50px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
logo: {
|
||||
width: '200px',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
width: '240px',
|
||||
height: '240px',
|
||||
height: '200px',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { FC } from 'react';
|
||||
|
||||
import { Typography, useTheme } from '@material-ui/core';
|
||||
import { Typography, useTheme, useMediaQuery } from '@material-ui/core';
|
||||
import Gradient from '../../common/Gradient/Gradient';
|
||||
|
||||
import { ReactComponent as Logo } from '../../../assets/icons/logo-white-bg.svg';
|
||||
|
||||
import { ReactComponent as LogoWithText } from '../../../assets/img/Logo_White_Transparent_Horizontal.svg';
|
||||
import { useStyles } from './StandaloneBanner.styles';
|
||||
import ConditionallyRender from '../../common/ConditionallyRender';
|
||||
|
||||
interface IStandaloneBannerProps {
|
||||
title: string;
|
||||
@ -14,14 +13,14 @@ interface IStandaloneBannerProps {
|
||||
const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
|
||||
const theme = useTheme();
|
||||
const styles = useStyles();
|
||||
const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
console.log(smallScreen);
|
||||
|
||||
return (
|
||||
<Gradient
|
||||
from={theme.palette.primary.main}
|
||||
to={theme.palette.login.gradient.bottom}
|
||||
style={{
|
||||
borderBottomLeftRadius: '3px',
|
||||
borderTopLeftRadius: '3px',
|
||||
}}
|
||||
className={styles.gradient}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
<Typography variant="h1" className={styles.title}>
|
||||
@ -33,7 +32,11 @@ const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
|
||||
</div>
|
||||
|
||||
<div className={styles.logoContainer}>
|
||||
<Logo className={styles.logo} />
|
||||
<ConditionallyRender
|
||||
condition={smallScreen}
|
||||
show={<LogoWithText className={styles.logo} />}
|
||||
elseShow={<Logo className={styles.logo} />}
|
||||
/>
|
||||
</div>
|
||||
</Gradient>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user