rules page

src/Routes.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, Switch } from 'react-router';
 import ProfileButton from './components/ProfileButton';
 import NewsPage from './pages/NewsPage';
+import RulesPage from './pages/RulesPage';
 
 const Routes: React.FC = () => (
   <Switch>
@@ -11,6 +12,9 @@ const Routes: React.FC = () => (
     <Route path="/news">
       <NewsPage />
     </Route>
+    <Route path="/rules">
+      <RulesPage />
+    </Route>
   </Switch>
 );
 

src/pages/RulesPage.tsx

+import { Box, Container, Divider, 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>
+        <Box 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>
+          <Divider />
+          <ListItem>
+            <Typography component="div" className={classes.text}>
+              A konditerem csak érvényes
+              <Box fontWeight="fontWeightBold" display="inline" px={1}>
+                BELÉPŐVEL
+              </Box>
+              és megfelelő
+              <Box fontWeight="fontWeightBold" display="inline" 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 component="div" className={classes.text}>
+              A teremben higiéniai okok miatt mindenkinek saját, megfelelő méretű
+              <Box fontWeight="fontWeightBold" display="inline" 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 component="div" 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>
+        </Box>
+      </Container>
+    </Page>
+  );
+};
+
+export default RulesPage;

src/theme.ts

@@ -36,6 +36,7 @@ export const darkTheme = createMuiTheme({
       default: '#2A2A28',
       paper: '#202020',
     },
+    divider: '#444444',
     /* success: {},
     info: {},
     warning: {}, */