diff options
| -rw-r--r-- | modern/src/common/attributes/useServerAttributes.js | 4 | ||||
| -rw-r--r-- | modern/src/login/LogoImage.js | 20 | ||||
| -rw-r--r-- | modern/src/resources/l10n/en.json | 1 |
3 files changed, 17 insertions, 8 deletions
diff --git a/modern/src/common/attributes/useServerAttributes.js b/modern/src/common/attributes/useServerAttributes.js index f70fd220..74749991 100644 --- a/modern/src/common/attributes/useServerAttributes.js +++ b/modern/src/common/attributes/useServerAttributes.js @@ -13,6 +13,10 @@ export default (t) => useMemo(() => ({ name: t('serverLogo'), type: 'string', }, + logoInverted: { + name: t('serverLogoInverted'), + type: 'string', + }, colorPrimary: { name: t('serverColorPrimary'), type: 'string', 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; diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json index d5125657..d30cad7e 100644 --- a/modern/src/resources/l10n/en.json +++ b/modern/src/resources/l10n/en.json @@ -311,6 +311,7 @@ "serverColorPrimary": "Color Primary", "serverColorSecondary": "Color Secondary", "serverLogo": "Logo Image", + "serverLogoInverted": "Inverted Logo Image", "serverChangeDisable": "Disable Server Change", "mapTitle": "Map", "mapActive": "Active Maps", |