Better logo handling

1 files changed, 2 insertions, 7 deletions

diff --git a/modern/src/login/LoginLayout.js b/modern/src/login/LoginLayout.js
index 83a87500..8f2ee6ca 100644
--- a/modern/src/login/LoginLayout.js
+++ b/modern/src/login/LoginLayout.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useMediaQuery, Paper } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material/styles';
-import logoSvg from '../resources/images/logo.svg';
+import LogoImage from './LogoImage';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -13,7 +13,6 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    color: theme.palette.secondary.contrastText,
     background: theme.palette.primary.main,
     paddingBottom: theme.spacing(5),
     width: theme.dimensions.sidebarWidth,
@@ -49,11 +48,7 @@ const LoginLayout = ({ children }) => {
   return (
     <main className={classes.root}>
       <div className={classes.sidebar}>
-        {!useMediaQuery(theme.breakpoints.down('lg')) && (
-          <svg height="64" width="240">
-            <use xlinkHref={`${logoSvg}#img`} />
-          </svg>
-        )}
+        {!useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.secondary.contrastText} />}
       </div>
       <Paper className={classes.paper}>
         <form className={classes.form}>