Format all files with no breaking changes
Lint all files using `npm run lint -- --fix`.
Format all files using `prettier --write "**/*.{ts,tsx,js,jsx,json}"`
No breaking change, only code style is modified.
Gitlab: #29
Change-Id: I4f034a7fb4d3eea10bcd3e38b44a65a1046de62f
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
index 968a2a5..6f12209 100644
--- a/client/src/themes/ThemeDemonstrator.js
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -1,60 +1,65 @@
-import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
-import { CancelPictureButton, EditPictureButton, UploadPictureButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
-import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from "../components/inputs"
-import defaultTheme from './default'
+import { Button, Stack, Switch, ThemeProvider, Typography } from '@mui/material';
+import {
+ CancelPictureButton,
+ EditPictureButton,
+ UploadPictureButton,
+ TakePictureButton,
+ InfoButton,
+ TipButton,
+ BackButton,
+ CloseButton,
+} from '../components/buttons';
+import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from '../components/inputs';
+import defaultTheme from './default';
export const ThemeDemonstrator = () => {
- return (
- <ThemeProvider theme={defaultTheme}>
- <Stack spacing="5px">
- <Stack>
- <Typography variant="h1">Exemple de titre H1</Typography>
- <Typography variant="h2">Exemple de titre H2</Typography>
- <Typography variant="h3">Exemple de titre H3</Typography>
- <Typography variant="h4">Exemple de titre H4</Typography>
- <Typography variant="h5">Exemple de titre H5</Typography>
- <Typography variant="body1">Texte courant principal</Typography>
- <Typography variant="body2">Texte courant secondaire</Typography>
- <Typography variant="caption">Légendes et annotations</Typography>
- </Stack>
- <Stack spacing="5px" padding="5px" width="300px" >
- <Button variant="contained">Bouton primaire</Button>
- <Button variant="outlined">Bouton secondaire</Button>
- <Button variant="text">Bouton tertiaire</Button>
- <Button variant="contained" size="small">Bouton liste préférences</Button>
- </Stack>
- <Stack direction="row" spacing="5px">
- <CancelPictureButton/>
- <EditPictureButton/>
- <UploadPictureButton/>
- <TakePictureButton/>
- </Stack>
- <Stack direction="row" spacing="5px">
- <InfoButton/>
- <TipButton/>
- </Stack>
- <Stack direction="row" spacing="5px">
- <BackButton/>
- <CloseButton/>
- </Stack>
- <Stack>
- <Switch/>
- </Stack>
- <Stack padding="5px" width="300px" >
- <UsernameInput/>
- <UsernameInput
- error
- defaultValue="Cyrille"
- />
- <PasswordInput/>
- <PasswordInput
- error
- defaultValue="SavoirFaireLinux"
- />
- <NickNameInput/>
- <RegularInput/>
- </Stack>
- </Stack>
- </ThemeProvider>
- )
-}
\ No newline at end of file
+ return (
+ <ThemeProvider theme={defaultTheme}>
+ <Stack spacing="5px">
+ <Stack>
+ <Typography variant="h1">Exemple de titre H1</Typography>
+ <Typography variant="h2">Exemple de titre H2</Typography>
+ <Typography variant="h3">Exemple de titre H3</Typography>
+ <Typography variant="h4">Exemple de titre H4</Typography>
+ <Typography variant="h5">Exemple de titre H5</Typography>
+ <Typography variant="body1">Texte courant principal</Typography>
+ <Typography variant="body2">Texte courant secondaire</Typography>
+ <Typography variant="caption">Légendes et annotations</Typography>
+ </Stack>
+ <Stack spacing="5px" padding="5px" width="300px">
+ <Button variant="contained">Bouton primaire</Button>
+ <Button variant="outlined">Bouton secondaire</Button>
+ <Button variant="text">Bouton tertiaire</Button>
+ <Button variant="contained" size="small">
+ Bouton liste préférences
+ </Button>
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <CancelPictureButton />
+ <EditPictureButton />
+ <UploadPictureButton />
+ <TakePictureButton />
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <InfoButton />
+ <TipButton />
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <BackButton />
+ <CloseButton />
+ </Stack>
+ <Stack>
+ <Switch />
+ </Stack>
+ <Stack padding="5px" width="300px">
+ <UsernameInput />
+ <UsernameInput error defaultValue="Cyrille" />
+ <PasswordInput />
+ <PasswordInput error defaultValue="SavoirFaireLinux" />
+ <NickNameInput />
+ <RegularInput />
+ </Stack>
+ </Stack>
+ </ThemeProvider>
+ );
+};
diff --git a/client/src/themes/default.js b/client/src/themes/default.js
index db10bde..d8b6147 100644
--- a/client/src/themes/default.js
+++ b/client/src/themes/default.js
@@ -1,63 +1,63 @@
-import { createTheme } from "@mui/material";
+import { createTheme } from '@mui/material';
const theme = createTheme({
palette: {
primary: {
- light: "#E5EEF5", // same as "#0056991A"
- main: "#0071C9",
- dark: "#005699",
+ light: '#E5EEF5', // same as "#0056991A"
+ main: '#0071C9',
+ dark: '#005699',
},
error: {
- main: "#CC0022",
+ main: '#CC0022',
},
success: {
- main: "#009980",
+ main: '#009980',
},
},
typography: {
- fontFamily: "Ubuntu",
+ fontFamily: 'Ubuntu',
allVariants: {
- color: "black"
+ color: 'black',
},
h1: {
fontWeight: 400,
- fontSize: "26px",
- lineHeight: "36px",
+ fontSize: '26px',
+ lineHeight: '36px',
},
h2: {
fontWeight: 400,
- fontSize: "22px",
- lineHeight: "30px",
+ fontSize: '22px',
+ lineHeight: '30px',
},
h3: {
fontWeight: 400,
- fontSize: "18px",
- lineHeight: "26px",
+ fontSize: '18px',
+ lineHeight: '26px',
},
h4: {
fontWeight: 500,
- fontSize: "15px",
- lineHeight: "22px",
+ fontSize: '15px',
+ lineHeight: '22px',
},
h5: {
fontWeight: 500,
- fontSize: "13px",
- lineHeight: "19px",
+ fontSize: '13px',
+ lineHeight: '19px',
},
body1: {
fontWeight: 400,
- fontSize: "15px",
- lineHeight: "22px"
+ fontSize: '15px',
+ lineHeight: '22px',
},
body2: {
fontWeight: 400,
- fontSize: "13px",
- lineHeight: "19px",
+ fontSize: '13px',
+ lineHeight: '19px',
},
caption: {
fontWeight: 400,
- fontSize: "12px",
- lineHeight: "16px",
+ fontSize: '12px',
+ lineHeight: '16px',
},
},
components: {
@@ -119,43 +119,43 @@
}
`,
},
- }
-})
+ },
+});
export default createTheme(theme, {
components: {
MuiButton: {
styleOverrides: {
root: {
- height: "46px",
+ height: '46px',
fontWeight: 700,
- fontSize: "15px",
- lineHeight: "17px",
- textTransform: "none",
- borderRadius: "5px",
+ fontSize: '15px',
+ lineHeight: '17px',
+ textTransform: 'none',
+ borderRadius: '5px',
},
sizeSmall: {
- height: "36px",
+ height: '36px',
},
contained: {
background: theme.palette.primary.dark,
- "&:hover": {
+ '&:hover': {
background: theme.palette.primary.main,
},
},
outlined: {
- background: "#FFF",
- borderColor: "#0056995C",
+ background: '#FFF',
+ borderColor: '#0056995C',
color: theme.palette.primary.dark,
- "&:hover": {
+ '&:hover': {
background: theme.palette.primary.light,
borderColor: theme.palette.primary.dark,
},
},
text: {
- background: "#fff",
+ background: '#fff',
color: theme.palette.primary.dark,
- "&:hover": {
+ '&:hover': {
background: theme.palette.primary.light,
},
},
@@ -167,38 +167,38 @@
},
styleOverrides: {
root: {
- width: "60px",
- height: "30px",
+ width: '60px',
+ height: '30px',
padding: 0,
},
switchBase: {
padding: 0,
- "&.Mui-checked": {
+ '&.Mui-checked': {
transform: `translateX(30px)`,
},
},
thumb: {
- width: "28px",
- height: "28px",
+ width: '28px',
+ height: '28px',
border: `1px solid ${theme.palette.primary.dark}`,
- ".Mui-checked.Mui-checked &": {
- width: "30px",
- height: "30px",
- border: "none",
- }
+ '.Mui-checked.Mui-checked &': {
+ width: '30px',
+ height: '30px',
+ border: 'none',
+ },
},
track: {
backgroundColor: theme.palette.primary.light,
- borderRadius: "30px",
+ borderRadius: '30px',
opacity: 1,
- ".Mui-checked.Mui-checked + &": {
+ '.Mui-checked.Mui-checked + &': {
backgroundColor: theme.palette.primary.light,
opacity: 1,
- }
+ },
},
colorPrimary: {
- color: "#fff",
- "&.Mui-checked": {
+ color: '#fff',
+ '&.Mui-checked': {
color: theme.palette.primary.dark,
},
},
@@ -208,7 +208,7 @@
styleOverrides: {
root: {
color: theme.palette.primary.dark,
- "&.Mui-error": {
+ '&.Mui-error': {
color: theme.palette.error.main,
},
},
@@ -217,56 +217,56 @@
Material UI uses "before" for the regular underline.
There is a second underline called "after" placed over "before"
*/
- "&:before": {
+ '&:before': {
borderBottom: `2px solid ${theme.palette.primary.dark}`,
},
- "&:hover:not(.Mui-disabled, .Mui-error):before": {
- borderBottom: "2px solid #03B9E9",
+ '&:hover:not(.Mui-disabled, .Mui-error):before': {
+ borderBottom: '2px solid #03B9E9',
},
- "&:after": {
- borderBottom: "2px solid #03B9E9",
+ '&:after': {
+ borderBottom: '2px solid #03B9E9',
},
- "&:hover:not(.Mui-error):after": {
- borderBottom: "2px solid #03B9E9",
+ '&:hover:not(.Mui-error):after': {
+ borderBottom: '2px solid #03B9E9',
},
},
- }
+ },
},
MuiFormControl: {
styleOverrides: {
root: {
- height: "90px",
+ height: '90px',
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
- position: "absolute",
- bottom: "0px",
- fontSize: "15px",
+ position: 'absolute',
+ bottom: '0px',
+ fontSize: '15px',
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
- color: "black",
- fontSize: "15px",
- left: "50%",
- transform: "translate(-50%, 20px)",
- transition: "left .2s, transform .2s",
+ color: 'black',
+ fontSize: '15px',
+ left: '50%',
+ transform: 'translate(-50%, 20px)',
+ transition: 'left .2s, transform .2s',
},
shrink: {
- color: "black",
+ color: 'black',
left: 0,
- transform: "translate(0, 50px) scale(0.75)",
- transition: "left .2s, transform .2s",
- "&.Mui-focused, &.Mui-error": {
- color: "black",
+ transform: 'translate(0, 50px) scale(0.75)',
+ transition: 'left .2s, transform .2s',
+ '&.Mui-focused, &.Mui-error': {
+ color: 'black',
},
},
},
},
},
-})
+});