1 files changed, 12 insertions, 8 deletions
diff --git a/modern/src/login/LogoImage.js b/modern/src/login/LogoImage.js
index f8de13e2..f4c7969c 100644
--- a/modern/src/login/LogoImage.js
+++ b/modern/src/login/LogoImage.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme, useMediaQuery } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@mui/styles';
 import { ReactComponent as Logo } from '../resources/images/logo.svg';
@@ -14,18 +15,21 @@ const useStyles = makeStyles(() => ({
 }));
 
 const LogoImage = ({ color }) => {
+  const theme = useTheme();
   const classes = useStyles();
 
-  const imageFile = useSelector((state) => state.session.server.attributes?.logo);
+  const expanded = !useMediaQuery(theme.breakpoints.down('lg'));
 
-  if (imageFile) {
-    return (
-      <img className={classes.image} src={imageFile} alt="" />
-    );
+  const logo = useSelector((state) => state.session.server.attributes?.logo);
+  const logoInverted = useSelector((state) => state.session.server.attributes?.logoInverted);
+
+  if (logo) {
+    if (expanded && logoInverted) {
+      return <img className={classes.image} src={logoInverted} alt="" />;
+    }
+    return <img className={classes.image} src={logo} alt="" />;
   }
-  return (
-    <Logo className={classes.image} style={{ color }} />
-  );
+  return <Logo className={classes.image} style={{ color }} />;
 };
 
 export default LogoImage;