From f7ada6916541047f8ddf6eb2d1a45ddc3b9dead0 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Thu, 6 May 2021 14:47:56 +0530 Subject: More code improvement --- modern/src/App.js | 2 +- modern/src/LoginPage.js | 143 ++++++++++++++++++++--------------------- modern/src/Logo.js | 31 +++++++++ modern/src/Theme.js | 50 -------------- modern/src/theme/dimensions.js | 7 ++ modern/src/theme/index.js | 12 ++++ modern/src/theme/overrides.js | 48 ++++++++++++++ modern/src/theme/palette.js | 19 ++++++ 8 files changed, 188 insertions(+), 124 deletions(-) create mode 100644 modern/src/Logo.js delete mode 100644 modern/src/Theme.js create mode 100644 modern/src/theme/dimensions.js create mode 100644 modern/src/theme/index.js create mode 100644 modern/src/theme/overrides.js create mode 100644 modern/src/theme/palette.js (limited to 'modern') diff --git a/modern/src/App.js b/modern/src/App.js index 7ff090ac..7db5f128 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -32,7 +32,7 @@ import MaintenancePage from './settings/MaintenancePage'; import StatisticsPage from './admin/StatisticsPage'; import CachingController from './CachingController'; -import theme from './Theme'; +import theme from './theme'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 068b1565..18638d21 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -2,21 +2,13 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from './store'; -import { Grid, - useMediaQuery, - makeStyles, - InputLabel, - Select, - MenuItem, - FormControl, - Button, - TextField, - Paper } from '@material-ui/core'; +import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Paper } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import RegisterDialog from './RegisterDialog'; import { useSelector } from 'react-redux'; import t from './common/localization'; +import Logo from './Logo'; const useStyles = makeStyles(theme => ({ root: { @@ -28,7 +20,11 @@ const useStyles = makeStyles(theme => ({ justifyContent: 'center', alignItems: 'center', background: theme.palette.common.purple, - width: '28%', + paddingBottom: theme.spacing(5), + width: `${theme.dimensions.sidebarWidth}%`, + [theme.breakpoints.down('md')]: { + width: `${theme.dimensions.minSidebarWidth}px`, + }, [theme.breakpoints.down('xs')]: { width: '0px', }, @@ -38,19 +34,13 @@ const useStyles = makeStyles(theme => ({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - width: '100%', - padding: theme.spacing(8, 4), + flex: 1, + //padding: theme.spacing(0, 25, 0, 0), boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)' }, form: { - marginTop: theme.spacing(1), - }, - submit: { - margin: theme.spacing(3, 0, 2), + maxWidth: theme.dimensions.maxFormWidth, }, - register: { - marginTop: theme.spacing(2), - } })); const LoginPage = () => { @@ -99,66 +89,73 @@ const LoginPage = () => { return (
- {!matches && Traccar} + {!matches && }
- {matches && Traccar}
- - - - - - + + + {matches && } - - - {t('loginLanguage')} - - + + + + + - - - + + + + + + + + + {t('loginLanguage')} + + + + + + + +
diff --git a/modern/src/Logo.js b/modern/src/Logo.js new file mode 100644 index 00000000..bea14d8c --- /dev/null +++ b/modern/src/Logo.js @@ -0,0 +1,31 @@ +import React from 'react'; + +const Logo = ({ fill }) => { + + return ( + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Logo; diff --git a/modern/src/Theme.js b/modern/src/Theme.js deleted file mode 100644 index 4d534a43..00000000 --- a/modern/src/Theme.js +++ /dev/null @@ -1,50 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; - -const traccarPurple = '#333366'; -const traccarGreen = '#4CAF50'; -const traccarWhite = '#FFF'; - -export default createMuiTheme({ - palette: { - common: { - purple: traccarPurple, - green: traccarGreen - }, - primary: { - main: traccarPurple - }, - secondary: { - main: traccarGreen, - contrastText: traccarWhite - } - }, - overrides: { - MuiFormControl: { - root: { - height: '42px', - } - }, - MuiFilledInput: { - root: { - height: '42px', - borderRadius: '4px' - }, - underline: { - "&:before": { - borderBottom: 'none', - }, - "&:after": { - borderBottom: 'none', - }, - "&:hover:before": { - borderBottom: 'none', - }, - } - }, - MuiButton: { - root: { - height: '42px', - } - } - } -}); diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js new file mode 100644 index 00000000..bc20cb91 --- /dev/null +++ b/modern/src/theme/dimensions.js @@ -0,0 +1,7 @@ +export default { + inputHeight: 42, + borderRadius: 4, + maxFormWidth: 335, + sidebarWidth: 28, + minSidebarWidth: 52 +}; diff --git a/modern/src/theme/index.js b/modern/src/theme/index.js new file mode 100644 index 00000000..5a3b2a9c --- /dev/null +++ b/modern/src/theme/index.js @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import palette from './palette'; +import overrides from './overrides'; +import dimensions from './dimensions'; + +const theme = createMuiTheme({ + palette, + overrides, + dimensions +}); + +export default theme; diff --git a/modern/src/theme/overrides.js b/modern/src/theme/overrides.js new file mode 100644 index 00000000..021770b7 --- /dev/null +++ b/modern/src/theme/overrides.js @@ -0,0 +1,48 @@ +import dimensions from './dimensions'; + +export default { + MuiFormControl: { + root: { + height: dimensions.inputHeight, + } + }, + MuiInputLabel: { + filled: { + transform: 'translate(12px, 14px) scale(1)', + '&$shrink' :{ + transform: 'translate(12px, -12px) scale(0.75)' + } + }, + }, + MuiFilledInput: { + root: { + height: dimensions.inputHeight, + borderRadius: dimensions.borderRadius, + }, + input: { + height: dimensions.inputHeight, + borderRadius: dimensions.borderRadius, + paddingTop: '10px', + boxSizing: 'border-box', + '&:-webkit-autofill': { + WebkitBoxShadow: '0 0 0 100px #eeeeee inset', + }, + }, + underline: { + "&:before": { + borderBottom: 'none', + }, + "&:after": { + borderBottom: 'none', + }, + "&:hover:before": { + borderBottom: 'none', + }, + } + }, + MuiButton: { + root: { + height: dimensions.inputHeight, + } + } +}; diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js new file mode 100644 index 00000000..24aefce1 --- /dev/null +++ b/modern/src/theme/palette.js @@ -0,0 +1,19 @@ +import { deepPurple, green } from '@material-ui/core/colors'; + +const traccarPurple = deepPurple[500]; +const traccarGreen = green[500]; +const traccarWhite = '#FFF'; + +export default { + common: { + purple: traccarPurple, + green: traccarGreen + }, + primary: { + main: traccarPurple + }, + secondary: { + main: traccarGreen, + contrastText: traccarWhite + } +}; -- cgit v1.2.3