3 files changed, 17 insertions, 7 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index c16fd198..6843e12b 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -13,6 +13,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    color: theme.palette.secondary.contrastText,
     background: theme.palette.common.purple,
     paddingBottom: theme.spacing(5),
     width: theme.dimensions.sidebarWidth,
@@ -46,16 +47,19 @@ const LoginPage = () => {
   const theme = useTheme();
 
   const [CurrentForm, setCurrentForm] = useState(() => LoginForm);
-  const matches = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
     <main className={classes.root}>
       <div className={classes.sidebar}>
-        {!matches && <img src='/logo.svg' alt='Traccar' /> }
+        {!useMediaQuery(theme.breakpoints.down('md')) &&
+          <svg height="64" width="240">
+            <use xlinkHref="/logo.svg#img"></use>
+          </svg>
+        }
       </div>
       <Paper className={classes.paper}>
         <form className={classes.form}>
-            <CurrentForm setCurrentForm={setCurrentForm} />
+          <CurrentForm setCurrentForm={setCurrentForm} />
         </form>
       </Paper>
     </main>
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
index 0a21a896..cb1420bb 100644
--- a/modern/src/common/localization.js
+++ b/modern/src/common/localization.js
@@ -27,6 +27,7 @@ import lo from '../../../web/l10n/lo.json';
 import lt from '../../../web/l10n/lt.json';
 import lv from '../../../web/l10n/lv.json';
 import ml from '../../../web/l10n/ml.json';
+import mn from '../../../web/l10n/mn.json';
 import ms from '../../../web/l10n/ms.json';
 import nb from '../../../web/l10n/nb.json';
 import ne from '../../../web/l10n/ne.json';
@@ -82,6 +83,7 @@ const supportedLanguages = {
   'lt': { data: lt, name: 'Lietuvių' },
   'lv': { data: lv, name: 'Latviešu' },
   'ml': { data: ml, name: 'മലയാളം' },
+  'mn': { data: mn, name: 'Монгол хэл' },
   'ms': { data: ms, name: 'بهاس ملايو' },
   'nb': { data: nb, name: 'Norsk bokmål' },
   'ne': { data: ne, name: 'नेपाली' },
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index 6469b31b..235f0efa 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -11,6 +11,7 @@ import ResetPasswordForm from './ResetPasswordForm';
 const useStyles = makeStyles(theme => ({
   logoContainer: {
     textAlign: 'center',
+    color: theme.palette.primary.main,
   },
   resetPassword: {
     cursor: 'pointer',
@@ -28,7 +29,6 @@ const LoginForm = ({ setCurrentForm }) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.down('md'));
 
   const [failed, setFailed] = useState(false);
   const [email, setEmail] = useState('');
@@ -58,9 +58,13 @@ const LoginForm = ({ setCurrentForm }) => {
 
   return (
     <Grid container direction='column' spacing={3}>
-      <Grid item className={classes.logoContainer}>
-        {matches && <img src='/logo.svg' alt='Traccar' />}
-      </Grid>    
+      {useMediaQuery(theme.breakpoints.down('md')) &&
+        <Grid item className={classes.logoContainer}>
+          <svg height="64" width="240">
+            <use xlinkHref="/logo.svg#img"></use>
+          </svg>
+        </Grid>
+      }
       <Grid item>
         <TextField
           required