1 files changed, 36 insertions, 0 deletions
diff --git a/src/login/LogoImage.jsx b/src/login/LogoImage.jsx
new file mode 100644
index 00000000..e92403ef
--- /dev/null
+++ b/src/login/LogoImage.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTheme, useMediaQuery } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { makeStyles } from '@mui/styles';
+import Logo from '../resources/images/logo.svg?react';
+
+const useStyles = makeStyles((theme) => ({
+  image: {
+    alignSelf: 'center',
+    maxWidth: '240px',
+    maxHeight: '120px',
+    width: 'auto',
+    height: 'auto',
+    margin: theme.spacing(2),
+  },
+}));
+
+const LogoImage = ({ color }) => {
+  const theme = useTheme();
+  const classes = useStyles();
+
+  const expanded = !useMediaQuery(theme.breakpoints.down('lg'));
+
+  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 }} />;
+};
+
+export default LogoImage;