Move all styles to separate file.

src/components/Auth/SignInForm/useStyles.ts → src/components/Auth/SignInForm/SignInForm.styles.ts

 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
-export const useStyles = makeStyles((theme: Theme) =>
+export const signInFormStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       '& > *': {

src/components/Auth/SignInForm/SignInForm.tsx

@@ -14,7 +14,7 @@ import {
 } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
 import { InputField } from 'components/Auth/InputField/InputField';
-import { useStyles } from './useStyles';
+import { signInFormStyles } from './SignInForm.styles';
 import { CredentialsType } from './CredentialsType';
 
 const defaultValues = {
@@ -66,7 +66,7 @@ export const SignInForm: FC = () => {
       });
   };
 
-  const classes = useStyles();
+  const classes = signInFormStyles();
   return (
     <>
       <header>

src/components/Auth/SignUpForm/useStyles.ts → src/components/Auth/SignUpForm/SignUpForm.style.ts

 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
-export const useStyles = makeStyles((theme: Theme) =>
+export const signUpFormStyle = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       '& > *': {

src/components/Auth/SignUpForm/SignUpForm.tsx

@@ -11,7 +11,7 @@ import {
 import { NonAuthRoutes } from 'api/routes';
 import axios from 'axios';
 import { InputField } from 'components/Auth/InputField/InputField';
-import { useStyles } from 'components/Auth/SignUpForm/useStyles';
+import { signUpFormStyle } from './SignUpForm.style';
 
 export const SignUpForm: FC = () => {
   type FormData = {
@@ -58,7 +58,7 @@ export const SignUpForm: FC = () => {
     );
   };
 
-  const classes = useStyles();
+  const classes = signUpFormStyle();
   return (
     <>
       <header>

src/components/Dashboard/HomePage/HomePage.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const homePageStyle = makeStyles(() => ({
+  root: {
+    minHeight: '100vh',
+    backgroundImage: `url(${'/assets/bgBIG.svg'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
+    color: 'white',
+  },
+  imageIcon: {
+    maxHeight: '50%',
+  },
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingTop: {
+    paddingTop: '65px',
+  },
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
+  },
+  contIcon: {
+    width: '100%',
+    left: '0',
+    right: '0',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+  },
+}));

src/components/Dashboard/HomePage/HomePage.tsx

 import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import {
   CssBaseline,
   Grid,
   Typography,
   Hidden,
-  responsiveFontSizes,
   Container,
 } from '@material-ui/core';
 import { MapElement } from 'components/Dashboard/HomePage/MapElement';
@@ -13,48 +11,10 @@ import { NavBar } from 'components/Dashboard/HomePage/NavBar';
 import { Numbers } from 'components/Dashboard/HomePage/Numbers';
 import { Steps } from 'components/Dashboard/HomePage/Steps';
 import { Reservation } from '../ReservationPage/Reservation/Reservation';
-
-const useStyles = makeStyles(() => ({
-  root: {
-    minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bgBIG.svg'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingTop: {
-    paddingTop: '65px',
-  },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-}));
+import { homePageStyle } from './HomePage.style';
 
 export const HomePage: FC = () => {
-  const classes = useStyles();
+  const classes = homePageStyle();
 
   return (
     <Grid container direction="column" className={classes.paddingBottom}>

src/components/Dashboard/HomePage/NavBar.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const navBarStyle = makeStyles(() => ({
+  tabs: {
+    color: 'white',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    paddingTop: '8px',
+    paddingBottom: '35px',
+    width: '100%',
+    flexWrap: 'wrap',
+  },
+  tabPan: {
+    paddingLeft: '56px',
+    paddingRight: '56px',
+  },
+  tabIcon: {
+    paddingRight: '10px',
+    fontSize: '38px',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  tabsSmall: {
+    color: 'white',
+    paddingLeft: '1.2em',
+    paddingRight: '1em',
+    paddingTop: '0.9em',
+    paddingBottom: '2em',
+    width: '100%',
+  },
+  tabIconSmall: {
+    fontSize: '2.4em',
+  },
+  tabPanSmall: {
+    paddingLeft: '2em',
+    paddingRight: '2em',
+  },
+}));

src/components/Dashboard/HomePage/NavBar.tsx

 import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Tabs, Tab, Grid, Hidden } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { AuthRoutes } from 'api/routes';
 import { useHistory } from 'react-router-dom';
-
-const useStyles = makeStyles(() => ({
-  tabs: {
-    color: 'white',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    paddingTop: '8px',
-    paddingBottom: '35px',
-    width: '100%',
-    flexWrap: 'wrap',
-  },
-  tabPan: {
-    paddingLeft: '56px',
-    paddingRight: '56px',
-  },
-  tabIcon: {
-    paddingRight: '10px',
-    fontSize: '38px',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  tabsSmall: {
-    color: 'white',
-    paddingLeft: '1.2em',
-    paddingRight: '1em',
-    paddingTop: '0.9em',
-    paddingBottom: '2em',
-    width: '100%',
-  },
-  tabIconSmall: {
-    fontSize: '2.4em',
-  },
-  tabPanSmall: {
-    paddingLeft: '2em',
-    paddingRight: '2em',
-  },
-}));
+import { navBarStyle } from './NavBar.style';
 
 export const NavBar: FC = () => {
   const history = useHistory();
-  const classes = useStyles();
+  const classes = navBarStyle();
 
   const [value, setValue] = React.useState<string>('');
 

src/components/Dashboard/HomePage/NavBarLogin.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const navBarLoginStyle = makeStyles(() => ({
+  tabs: {
+    color: 'white',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    paddingTop: '8px',
+    paddingBottom: '35px',
+  },
+  tabPan: {
+    paddingLeft: '56px',
+    paddingRight: '56px',
+  },
+  tabIcon: {
+    paddingRight: '10px',
+    fontSize: '38px',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+    backgroundColor: '#FFFFFF',
+  },
+}));

src/components/Dashboard/HomePage/NavBarLogin.tsx

 import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Tabs, Tab } from '@material-ui/core';
 import LockIcon from '@material-ui/icons/Lock';
-
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
-
-const useStyles = makeStyles(() => ({
-  tabs: {
-    color: 'white',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    paddingTop: '8px',
-    paddingBottom: '35px',
-  },
-  tabPan: {
-    paddingLeft: '56px',
-    paddingRight: '56px',
-  },
-  tabIcon: {
-    paddingRight: '10px',
-    fontSize: '38px',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-    backgroundColor: '#FFFFFF',
-  },
-}));
+import { navBarLoginStyle } from './NavBarLogin.style';
 
 export const NavBarLogin: FC = () => {
   const history = useHistory();
 
-  const classes = useStyles();
+  const classes = navBarLoginStyle();
 
   const [value, setValue] = React.useState('');
 

src/components/Dashboard/HomePage/Numbers.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const numberStyle = makeStyles(() => ({
+  root: {
+    minHeight: '100vh',
+    backgroundImage: `url(${'/assets/bg3.png'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
+    color: 'white',
+  },
+  imageIcon: {
+    maxHeight: '50%',
+  },
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingTop: {
+    paddingTop: '65px',
+  },
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
+  },
+  contIcon: {
+    width: '100%',
+    left: '0',
+    right: '0',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+  },
+}));

src/components/Dashboard/HomePage/Numbers.tsx

 import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
 import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
 import LocationCityIcon from '@material-ui/icons/LocationCity';
 import PeopleIcon from '@material-ui/icons/People';
-
-const useStyles = makeStyles(() => ({
-  root: {
-    minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bg3.png'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingTop: {
-    paddingTop: '65px',
-  },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-}));
+import { numberStyle } from './Numbers.style';
 
 export const Numbers: FC = () => {
-  const classes = useStyles();
+  const classes = numberStyle();
 
   return (
     <Grid item container alignItems="stretch" style={{ paddingTop: '20px' }}>

src/components/Dashboard/HomePage/Steps.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const stepsStyle = makeStyles(() => ({
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
+  },
+  paddingBot: {
+    paddingBottom: '40px',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+  },
+  bodyText: {
+    fontSize: '1.26em',
+  },
+  bodyTextLarger: {
+    fontSize: '2.3em',
+  },
+}));

src/components/Dashboard/HomePage/Steps.tsx

@@ -4,31 +4,10 @@ import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
 import RoomIcon from '@material-ui/icons/Room';
-
-const useStyles = makeStyles(() => ({
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  paddingBot: {
-    paddingBottom: '40px',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-  bodyText: {
-    fontSize: '1.26em',
-  },
-  bodyTextLarger: {
-    fontSize: '2.3em',
-  },
-}));
+import { stepsStyle } from './Steps.style';
 
 export const Steps: FC = () => {
-  const classes = useStyles();
+  const classes = stepsStyle();
 
   return (
     <Grid item container alignItems="stretch">

src/components/Dashboard/ProfilePage/ProfilePage.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const profilePageStyle = makeStyles(() => ({
+  root: {
+    minHeight: '36vh',
+    backgroundImage: `url(${'/assets/bgMED.svg'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
+    color: 'white',
+  },
+  imageIcon: {
+    maxHeight: '50%',
+  },
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingTop: {
+    paddingTop: '2em',
+  },
+  marginTop: {
+    marginTop: '5em',
+  },
+  marginTopLittle: {
+    marginTop: '1em',
+  },
+
+  buttonUpdate: {
+    marginTop: '2em',
+    marginLeft: 'auto',
+  },
+  paddingTopLittle: {
+    paddingTop: '1em',
+  },
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
+  },
+  contIcon: {
+    width: '100%',
+    left: '0',
+    right: '0',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+  },
+  extendedIcon: {
+    fontSize: '50px',
+  },
+  fab: {
+    margin: '10px 90px 80px 10px',
+    bottom: '0',
+    right: '0',
+    position: 'fixed',
+    padding: '45px',
+  },
+  fabSmall: {
+    margin: '10px 45px 70px 10px',
+    bottom: '0',
+    right: '0',
+    position: 'fixed',
+    padding: '35px',
+  },
+}));

src/components/Dashboard/ProfilePage/ProfilePage.tsx

 import React, { FC, useContext } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import axios from 'axios';
 import { NonAuthRoutes } from 'api/routes';
 import { useHistory } from 'react-router-dom';
@@ -18,76 +17,7 @@ import {
   FormControl,
 } from '@material-ui/core';
 import { NavBar } from 'components/Dashboard/HomePage/NavBar';
-
-const useStyles = makeStyles(() => ({
-  root: {
-    minHeight: '36vh',
-    backgroundImage: `url(${'/assets/bgMED.svg'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingTop: {
-    paddingTop: '2em',
-  },
-  marginTop: {
-    marginTop: '5em',
-  },
-  marginTopLittle: {
-    marginTop: '1em',
-  },
-
-  buttonUpdate: {
-    marginTop: '2em',
-    marginLeft: 'auto',
-  },
-  paddingTopLittle: {
-    paddingTop: '1em',
-  },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-  extendedIcon: {
-    fontSize: '50px',
-  },
-  fab: {
-    margin: '10px 90px 80px 10px',
-    bottom: '0',
-    right: '0',
-    position: 'fixed',
-    padding: '45px',
-  },
-  fabSmall: {
-    margin: '10px 45px 70px 10px',
-    bottom: '0',
-    right: '0',
-    position: 'fixed',
-    padding: '35px',
-  },
-}));
+import { profilePageStyle } from './ProfilePage.style';
 
 export const ProfilePage: FC = () => {
   const history = useHistory();
@@ -97,7 +27,7 @@ export const ProfilePage: FC = () => {
     });
   };
 
-  const classes = useStyles();
+  const classes = profilePageStyle();
 
   const [lang, setLang] = React.useState<string | number>('');
   const [open, setOpen] = React.useState(false);