Style News card and fix layout in container

src/components/News.tsx

-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import { Box, Grid, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 
 interface NewsProps {
@@ -11,32 +11,27 @@ interface NewsProps {
 const useStyles = makeStyles((theme) => ({
   container: {
     color: 'white',
-    borderRadius: '8px',
     backgroundColor: theme.palette.background.paper,
-    margin: theme.spacing(2),
-    padding: theme.spacing(1),
+    padding: theme.spacing(2),
   },
 }));
 
-const News: React.FC<NewsProps> = ({ title, content, author, createDate }) => {
+const News: React.FC<NewsProps> = ({ title, content, createDate }) => {
   const classes = useStyles();
   return (
     <Grid className={classes.container} container direction="column">
       <Grid item>
-        <Typography variant="h6">{title}</Typography>
+        <Typography variant="subtitle2" color="secondary">
+          {createDate}
+        </Typography>
       </Grid>
       <Grid item>
-        <Typography variant="body1">{content}</Typography>
+        <Box marginY={2}>
+          <Typography variant="h4">{title}</Typography>
+        </Box>
       </Grid>
-      <Grid item container justify="flex-end">
       <Grid item>
-          <Typography variant="subtitle2">
-            <i>{author}</i>
-          </Typography>
-          <Typography variant="subtitle2">
-            <i>{createDate}</i>
-          </Typography>
-        </Grid>
+        <Typography variant="body1">{content}</Typography>
       </Grid>
     </Grid>
   );

src/components/NewsContainer.tsx

@@ -10,9 +10,10 @@ const NewsContainer: React.FC = () => {
   return isLoading ? (
     <CircularProgress />
   ) : (
+    <Box paddingY={2}>
       <Grid container>
         <Grid item xs={12} sm={3}>
-        <Box p={2} alignContent="center">
+          <Box paddingX={2}>
             <img
               src="https://i.pinimg.com/474x/13/84/34/138434e6400eb73823192c74ea40bfc2.jpg"
               height="auto"
@@ -21,13 +22,30 @@ const NewsContainer: React.FC = () => {
             />
           </Box>
         </Grid>
-      <Grid container item xs={12} sm={6} direction="column">
+        <Grid item xs={12} sm={6}>
+          <Grid container direction="column">
+            <Grid item xs={12}>
+              <Box p={2}>
                 <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
+              </Box>
             </Grid>
-      <Grid item xs={12} sm={3}>
+            <Grid item xs={12}>
+              <Box p={2}>
+                <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
+              </Box>
+            </Grid>
+            <Grid item xs={12}>
+              <Box p={2}>
+                <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
+              </Box>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid container item xs={12} sm={3} justify="flex-end">
           <Typography>Naptár (?)</Typography>
         </Grid>
       </Grid>
+    </Box>
   );
 };
 

src/pages/Page.tsx

@@ -9,7 +9,7 @@ import { useToggle } from '../hooks/useToggle';
 
 const Container = styled.div(
   (props) => `
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -20,6 +20,7 @@ const Container = styled.div(
 
 const MainContent = styled.div`
   height: 100%;
+  flex-grow: 1;
 `;
 
 const Page: React.FC = ({ children }) => {