From cb7106f4bfd6856470861890ea5e4c0bbc4703ac Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Fri, 9 Jun 2023 07:17:58 -0700
Subject: Add inverted logo option

---
 modern/src/common/attributes/useServerAttributes.js |  4 ++++
 modern/src/login/LogoImage.js                       | 20 ++++++++++++--------
 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",
-- 
cgit v1.2.3