diff options
| author | Anton Tananaev <anton.tananaev@gmail.com> | 2021-06-01 11:58:19 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton.tananaev@gmail.com> | 2021-06-01 11:58:19 -0700 |
| commit | 14975dd481b6f7d0fd197b01410a38303cac5b79 (patch) | |
| tree | fa496fad7554d24df73db7a9b7d56dd1054125b3 /modern/src | |
| parent | 967024a5c3564bd2a2d993c7f07a85f9eb2ab7e7 (diff) | |
| download | trackermap-web-14975dd481b6f7d0fd197b01410a38303cac5b79.tar.gz trackermap-web-14975dd481b6f7d0fd197b01410a38303cac5b79.tar.bz2 trackermap-web-14975dd481b6f7d0fd197b01410a38303cac5b79.zip | |
Logo coloring
Diffstat (limited to 'modern/src')
| -rw-r--r-- | modern/src/LoginPage.js | 10 | ||||
| -rw-r--r-- | modern/src/components/LoginForm.js | 12 |
2 files changed, 15 insertions, 7 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 3d4b17f4..54994f4e 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -13,6 +13,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', justifyContent: 'center', alignItems: 'center', + color: theme.palette.secondary.contrastText, background: theme.palette.common.purple, paddingBottom: theme.spacing(5), width: theme.dimensions.sidebarWidth, @@ -46,16 +47,19 @@ const LoginPage = () => { const theme = useTheme(); const [CurrentForm, setCurrentForm] = useState(() => LoginForm); - const matches = useMediaQuery(theme.breakpoints.down('md')); return ( <main className={classes.root}> <div className={classes.sidebar}> - {!matches && <img src='/logo.svg' alt='Traccar' /> } + {!useMediaQuery(theme.breakpoints.down('md')) && + <svg height="64" width="240"> + <use xlinkHref="/logo.svg#img"></use> + </svg> + } </div> <Paper className={classes.paper}> <form className={classes.form}> - <CurrentForm setCurrentForm={setCurrentForm} /> + <CurrentForm setCurrentForm={setCurrentForm} /> </form> </Paper> </main> diff --git a/modern/src/components/LoginForm.js b/modern/src/components/LoginForm.js index d52a51dd..bb762137 100644 --- a/modern/src/components/LoginForm.js +++ b/modern/src/components/LoginForm.js @@ -11,6 +11,7 @@ import ResetPasswordForm from './ResetPasswordForm'; const useStyles = makeStyles(theme => ({ logoContainer: { textAlign: 'center', + color: theme.palette.primary.main, }, resetPassword: { cursor: 'pointer', @@ -28,7 +29,6 @@ const LoginForm = ({ setCurrentForm }) => { const dispatch = useDispatch(); const history = useHistory(); const theme = useTheme(); - const matches = useMediaQuery(theme.breakpoints.down('md')); const [failed, setFailed] = useState(false); const [email, setEmail] = useState(''); @@ -58,9 +58,13 @@ const LoginForm = ({ setCurrentForm }) => { return ( <Grid container direction='column' spacing={3}> - <Grid item className={classes.logoContainer}> - {matches && <img src='/logo.svg' alt='Traccar' />} - </Grid> + {useMediaQuery(theme.breakpoints.down('md')) && + <Grid item className={classes.logoContainer}> + <svg height="64" width="240"> + <use xlinkHref="/logo.svg#img"></use> + </svg> + </Grid> + } <Grid item> <TextField required |