src/hooks/useUserContext.ts

+import { useContext } from 'react';
+import { UserContext, UserContextType } from '../context';
+
+// eslint-disable-next-line import/prefer-default-export
+export function useUserContext(): UserContextType {
+  const userContext = useContext(UserContext);
+  if (!userContext) {
+    throw new Error('You must use `UserContextProvider` to access the `IntervalContext`.');
+  }
+  return userContext;
+}

src/pages/Page.tsx

+import { Box, makeStyles, Theme, useMediaQuery } from '@material-ui/core';
 import React from 'react';
-import styled from 'styled-components';
+import DrawerMenu from '../components/DrawerMenu';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
+import MobileHeader from '../components/MobileHeader';
+import { useToggle } from '../hooks/useToggle';
 
-const Container = styled.div(
-  (props) => `
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  background-color: ${props.theme.palette.background.default};
-`,
-);
-
-const MainContent = styled.div`
-  height: 100%;
-`;
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+    background: theme.palette.background.default,
+  },
+}));
 
 const Page: React.FC = ({ children }) => {
+  const [openDrawer, { toggleOn, toggleOff }] = useToggle(false);
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('xs'));
+  const classes = useStyles();
+
   return (
-    <Container>
-      <Header />
-      <MainContent>{children}</MainContent>
+    <Box className={classes.root}>
+      {isMobile ? (
+        <MobileHeader onMenuClick={toggleOn} />
+      ) : (
+        <Header handleLogout={(): void => {}} />
+      )}
+      {isMobile && (
+        <DrawerMenu open={openDrawer} toggleOpen={toggleOff} handleLogout={(): void => {}} />
+      )}
+      <Box flexGrow={1} flexShrink={0} flexBasis="auto">
+        {children}
+      </Box>
       <Footer />
-    </Container>
+    </Box>
   );
 };
 

src/pages/RulesPage.tsx

+import { Box, Container, Divider, List, ListItem, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import Page from './Page';
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    marginTop: 30,
+    marginBottom: 30,
+    fontSize: '36px',
+    color: theme.palette.primary.contrastText,
+  },
+  container: {
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.background.paper,
+    margin: theme.spacing(2),
+    padding: theme.spacing(1),
+  },
+  text: {
+    fontSize: '18px',
+  },
+}));
+
+const RulesPage: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Page>
+      <Container>
+        <Typography className={classes.title} align="center">
+          Házirend
+        </Typography>
+        <List className={classes.container}>
+          <ListItem divider>
+            <Typography className={classes.text}>
+              Mindenki a saját testi épségéért felelős! Alkohol vagy drog hatása alatt a teremben
+              tartózkodni, edzeni tilos!
+            </Typography>
+          </ListItem>
+          <ListItem>
+            <Typography className={classes.text}>
+              A konditerem csak érvényes
+              <Box component="span" fontWeight="fontWeightBold" px={1}>
+                BELÉPŐVEL
+              </Box>
+              és megfelelő
+              <Box component="span" fontWeight="fontWeightBold" pl={1}>
+                TISZTA CIPŐBEN, ALSÓ- ÉS FELSŐRUHÁZATBAN HASZNÁLHATÓ
+              </Box>
+              ! A félmeztelen edzés tilos! A kondi belépőnek az edzés ideje alatt végig nálad kell
+              lennie a teremben!
+            </Typography>
+          </ListItem>
+          <Divider />
+          <ListItem>
+            <Typography className={classes.text}>
+              A teremben higiéniai okok miatt mindenkinek saját, megfelelő méretű
+              <Box component="span" fontWeight="fontWeightBold" pl={1}>
+                TÖRÖLKÖZŐ HASZNÁLATA KÖTELEZŐ
+              </Box>
+              ! Csak a kardió részleg használata esetén is kell törölköző!
+            </Typography>
+          </ListItem>
+          <Divider />
+          <ListItem>
+            <Typography className={classes.text}>
+              A terem csak tiszta, zárt, gumitalpú cipőben használható! Mezítlábas, zoknis és
+              papucsos edzés tilos! A terembe utcai cipőben belépni tilos! Aki megfelelő ruházat
+              nélkül edz, az edzés azonnali megszakítására, és a terem elhagyására kötelezhető.
+            </Typography>
+          </ListItem>
+        </List>
+      </Container>
+    </Page>
+  );
+};
+
+export default RulesPage;

src/setupProxy.js

@@ -4,7 +4,7 @@ module.exports = function (app) {
   app.use(
     '/api/v1',
     createProxyMiddleware({
-      target: 'http://localhost:8000',
+      target: 'https://body-dev.maze.sch.bme.hu/dev',
       changeOrigin: true,
     }),
   );

src/theme.ts → src/styles/darkTheme.ts

 import { createMuiTheme } from '@material-ui/core';
 
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createMuiTheme({
-  // TODO: Create default theme
-  /*   palette: {
-    primary: {},
-    secondary: {},
-    error: {},
-    success: {},
-    info: {},
-    warning: {},
-    grey: {},
-
-    text: {},
-  }, */
-  typography: {
-    fontFamily: 'Roboto',
+const darkTheme = createMuiTheme({
+  footer: {
+    background: '#222222',
   },
-});
-
-export const darkTheme = createMuiTheme({
   palette: {
     primary: {
       main: '#1A6B97',
@@ -36,6 +20,8 @@ export const darkTheme = createMuiTheme({
       default: '#2A2A28',
       paper: '#202020',
     },
+
+    divider: '#444444',
     /* success: {},
     info: {},
     warning: {}, */
@@ -48,3 +34,5 @@ export const darkTheme = createMuiTheme({
     fontFamily: 'Roboto',
   },
 });
+
+export default darkTheme;

src/styles/lightTheme.ts

+import { createMuiTheme } from '@material-ui/core';
+
+const lightTheme = createMuiTheme({
+  // TODO: Create default theme
+  /*   palette: {
+      primary: {},
+      secondary: {},
+      error: {},
+      success: {},
+      info: {},
+      warning: {},
+      grey: {},
+  
+      text: {},
+    }, */
+  footer: {
+    background: '#E0E0E0',
+  },
+  typography: {
+    fontFamily: 'Roboto',
+  },
+});
+
+export default lightTheme;

src/styles/material-ui.d.ts

+import '@material-ui/core/styles/createMuiTheme';
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    footer: {
+      background: React.CSSProperties['background'];
+    };
+  }
+  interface ThemeOptions extends Theme {}
+}

src/svg/SCHBodyIcon.tsx

+import * as React from 'react';
+
+interface ISCHBodyIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+}
+
+const SCHBodyIcon: React.FC<ISCHBodyIconProps> = ({
+  height = '24px',
+  width = '24px',
+  color = '#FFFFFF',
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 103 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M7.19328 0.249505C7.04203 0.387624 6.3703 1.01139 5.69858 1.6396C5.02685 2.26782 4.15938 3.07871 3.76791 3.4396C3.38089 3.80049 2.80703 4.33515 2.49563 4.62475C2.18423 4.91881 1.49916 5.55594 0.969781 6.04604C0.903053 6.10396 0.582758 6.39802 0.00444854 6.93267L0.0266912 11.2678L0.0489339 15.6074C6.59273 15.6208 10.2316 15.6252 10.9612 15.6297C16.9623 15.6386 21.8868 15.6653 21.9046 15.6832C21.9224 15.701 21.5398 16.0842 21.0505 16.5342C20.9926 16.5876 20.6946 16.8594 20.1652 17.3495H10.0804H0V20.7936V24.2332C7.82053 24.2332 12.1623 24.2332 13.0298 24.2332C20.2008 24.2332 26.0773 24.202 26.0951 24.1619C26.1129 24.1262 26.4866 23.7564 26.927 23.3421C27.3674 22.9322 28.0881 22.2549 28.5285 21.8361C29.5071 20.9094 31.6069 18.9579 32.59 18.0579C32.6345 18.0134 32.8747 17.795 33.3106 17.3985L33.3195 13.0366L33.3284 8.67475L22.3361 8.6703L11.3438 8.66584L12.2379 7.82376L13.1321 6.98168H23.2303L33.3284 6.97723V3.48861V0H20.3965H7.46464L7.19328 0.249505ZM42.1321 0.436634C41.4604 1.05594 40.6418 1.82228 39.8233 2.58861C39.4363 2.95842 38.5911 3.74257 37.946 4.3396C37.301 4.93663 36.3979 5.77871 35.9442 6.21535C35.8908 6.26881 35.615 6.53168 35.1167 7.00841V12.1678V17.3272C35.4726 17.6525 35.6684 17.8351 35.704 17.8708C37.688 19.7109 38.6355 20.5931 39.3028 21.2213C39.721 21.6134 40.2904 22.1436 40.5706 22.402C40.8509 22.6559 41.4025 23.1728 41.794 23.547C41.8429 23.5916 42.0787 23.8188 42.5058 24.2287L55.4777 24.2332H68.4452V20.7936V17.3495H58.3959H48.3467C48.1109 17.1356 47.9819 17.0198 47.9552 16.9975C47.7372 16.8015 46.8609 15.9906 46.0023 15.1931C45.8955 15.095 45.3751 14.6094 44.4364 13.7406V12.1634V10.5817C45.1882 9.88218 45.6019 9.49455 45.6865 9.41881C46.3715 8.77723 47.2346 7.96634 47.5993 7.61436C47.6438 7.5698 47.8662 7.3604 48.2666 6.97723H58.3559H68.4452V3.48861V0L55.5266 0.00445544H42.6036L42.1321 0.436634ZM70.3314 12.1188V24.2332H74.9445H79.5576V19.9426V15.652H86.9466H94.3357V19.9693V24.2822L98.9977 24.2554L103.66 24.2287L103.633 12.1411L103.611 0.0490099H98.9977H94.3846L94.3579 4.36188L94.3357 8.67475H86.9466H79.5576V4.3396V0H74.9445H70.3314V12.1188ZM0 35.6926V45.3564H12.4292H24.854V41.8901V38.4282C24.0577 37.6262 23.6173 37.1851 23.5283 37.096C21.9624 35.5233 21.9491 35.853 23.6262 34.1911C23.7107 34.1109 24.12 33.7054 24.854 32.9748V29.4995V26.0243H12.4292H0V35.6926ZM28.9733 28.7955L26.2686 31.5356V35.7059V39.8807L29.0045 42.6163L31.7403 45.3564H38.68H45.6197L48.3734 42.5941L51.1226 39.8317V35.6926V31.549L48.3734 28.7866L45.6197 26.0243L38.6489 26.0421L31.6825 26.0554L28.9733 28.7955ZM52.4393 35.6926V45.3564H62.1149H71.7905L74.5441 42.5985L77.2978 39.8406V35.6881V31.5401L74.5397 28.7822L71.786 26.0243H62.1149H52.4393V35.6926ZM78.6145 30.15V34.2757L81.4127 37.0827L84.2108 39.8851H85.8834H87.5605V42.6208V45.3564H91.0437H94.527V42.6208V39.8851H96.2396H97.9568L100.71 37.1317L103.469 34.3738V30.199V26.0243H100.034H96.5955V28.6886V31.3574L95.1142 32.8411L93.6283 34.3247H91.0393H88.4502L87.0178 32.8856L85.5809 31.4465V28.7376V26.0243H82.0977H78.6145V30.15ZM16.2861 31.6559C16.2861 31.696 16.0236 31.9901 15.7033 32.3153C15.6633 32.3554 15.4676 32.5559 15.1161 32.9079H11.0413H6.96641V32.2485V31.5891C9.76454 31.5891 11.3171 31.5891 11.6285 31.5891C14.1908 31.5891 16.2861 31.6203 16.2861 31.6559ZM42.7193 33.0238L44.1562 34.4629V35.6881V36.9134L42.7193 38.3525L41.2869 39.7916H38.6489H36.0154L34.5785 38.3569L33.1416 36.9178V35.6926V34.4673L34.574 33.0282L36.0109 31.5891H38.6444H41.2824L42.7193 33.0238ZM68.9434 32.9792L70.3314 34.3738V35.6926V37.0069L68.9434 38.4015L67.5555 39.7916H63.4851H59.4102L59.388 35.6926L59.3613 31.5891H63.4584H67.5555L68.9434 32.9792ZM15.6989 39.0609C16.0236 39.3817 16.2861 39.6802 16.2861 39.7203C16.2861 39.7604 14.1908 39.7916 11.6285 39.7916C11.3171 39.7916 9.76454 39.7916 6.96641 39.7916V39.1322V38.4728H11.0368H15.1072L15.6989 39.0609Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="102.761" height="45" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default SCHBodyIcon;