Move to Vite

1 files changed, 35 insertions, 0 deletions

diff --git a/modern/src/login/LogoImage.jsx b/modern/src/login/LogoImage.jsx
new file mode 100644
index 00000000..f4c7969c
--- /dev/null
+++ b/modern/src/login/LogoImage.jsx
@@ -0,0 +1,35 @@
+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';
+
+const useStyles = makeStyles(() => ({
+  image: {
+    alignSelf: 'center',
+    maxWidth: '240px',
+    maxHeight: '120px',
+    width: 'auto',
+    height: 'auto',
+  },
+}));
+
+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;