Better logo handling

3 files changed, 46 insertions, 19 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}>
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index 87192a3f..e3b5f39b 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -12,8 +12,8 @@ import { sessionActions } from '../store';
 import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
 import usePersistedState from '../common/util/usePersistedState';
-import logoSvg from '../resources/images/logo.svg';
 import { nativePostMessage } from '../common/components/NativeInterface';
+import LogoImage from './LogoImage';
 
 const useStyles = makeStyles((theme) => ({
   options: {
@@ -26,10 +26,6 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     gap: theme.spacing(2),
   },
-  logoContainer: {
-    textAlign: 'center',
-    color: theme.palette.primary.main,
-  },
   extraContainer: {
     display: 'flex',
     gap: theme.spacing(2),
@@ -105,13 +101,7 @@ const LoginPage = () => {
         )}
       </div>
       <div className={classes.container}>
-        {useMediaQuery(theme.breakpoints.down('lg')) && (
-          <div className={classes.logoContainer}>
-            <svg height="64" width="240">
-              <use xlinkHref={`${logoSvg}#img`} />
-            </svg>
-          </div>
-        )}
+        {useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.primary.main} />}
         <TextField
           required
           error={failed}
diff --git a/modern/src/login/LogoImage.js b/modern/src/login/LogoImage.js
new file mode 100644
index 00000000..d3f4b1ce
--- /dev/null
+++ b/modern/src/login/LogoImage.js
@@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import { makeStyles } from '@mui/styles';
+import image from '../resources/images/logo.svg';
+
+const useStyles = makeStyles(() => ({
+  image: {
+    alignSelf: 'center',
+    maxWidth: '240px',
+    maxHeight: '120px',
+    width: 'auto',
+    height: 'auto',
+    visibility: 'hidden',
+  },
+}));
+
+const LogoImage = ({ color }) => {
+  const classes = useStyles();
+
+  const element = useRef(null);
+
+  return (
+    <object
+      type="image/svg+xml"
+      data={image}
+      aria-label="logo"
+      className={classes.image}
+      ref={element}
+      onLoad={() => {
+        const imageDocument = element.current.contentDocument;
+        imageDocument.querySelectorAll('svg').forEach((element) => {
+          const style = imageDocument.createElement('style');
+          style.appendChild(imageDocument.createTextNode(`g { color: ${color}; }`));
+          element.insertAdjacentElement('afterbegin', style);
+          element.innerHTML += '';
+        });
+        element.current.style.visibility = 'visible';
+      }}
+    />
+  );
+};
+
+export default LogoImage;