Custom logo option

3 files changed, 16 insertions, 1 deletions

diff --git a/modern/src/common/attributes/useServerAttributes.js b/modern/src/common/attributes/useServerAttributes.js
index 76d5a157..e87d1d7e 100644
--- a/modern/src/common/attributes/useServerAttributes.js
+++ b/modern/src/common/attributes/useServerAttributes.js
@@ -9,6 +9,10 @@ export default (t) => useMemo(() => ({
     name: t('serverDescription'),
     type: 'string',
   },
+  logo: {
+    name: t('serverLogo'),
+    type: 'string',
+  },
   colorPrimary: {
     name: t('serverColorPrimary'),
     type: 'string',
diff --git a/modern/src/login/LogoImage.js b/modern/src/login/LogoImage.js
index 1b78c80e..f8de13e2 100644
--- a/modern/src/login/LogoImage.js
+++ b/modern/src/login/LogoImage.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { makeStyles } from '@mui/styles';
 import { ReactComponent as Logo } from '../resources/images/logo.svg';
 
@@ -15,7 +16,16 @@ const useStyles = makeStyles(() => ({
 const LogoImage = ({ color }) => {
   const classes = useStyles();
 
-  return (<Logo className={classes.image} style={{ color }} />);
+  const imageFile = useSelector((state) => state.session.server.attributes?.logo);
+
+  if (imageFile) {
+    return (
+      <img className={classes.image} src={imageFile} alt="" />
+    );
+  }
+  return (
+    <Logo className={classes.image} style={{ color }} />
+  );
 };
 
 export default LogoImage;
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index fa14778b..8791c530 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -310,6 +310,7 @@
     "serverDescription": "Server Description",
     "serverColorPrimary": "Color Primary",
     "serverColorSecondary": "Color Secondary",
+    "serverLogo": "Logo Image",
     "mapTitle": "Map",
     "mapActive": "Active Maps",
     "mapOverlay": "Map Overlay",