From b303368eb1e8fe77b095bbb9e355f95dbbecfaf2 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Mon, 3 Aug 2020 21:44:06 +0200
Subject: [PATCH] style matchFull component

---
 src/components/MatchFull.tsx | 44 ++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/components/MatchFull.tsx b/src/components/MatchFull.tsx
index 015d529..25343a0 100644
--- a/src/components/MatchFull.tsx
+++ b/src/components/MatchFull.tsx
@@ -1,22 +1,38 @@
 import React, { FC } from "react";
 import Moment from "react-moment";
-import { Container, Typography } from "@material-ui/core";
+import { Container, Typography, makeStyles } from "@material-ui/core";
 
 import IGame from "../types/Game";
 
-const MatchFull: FC<{ game: IGame }> = ({ game }) => (
-  <Container>
-    <Typography gutterBottom variant="h5" component="h3">
-      {game.title}
-    </Typography>
-    <Typography variant="body2" color="textSecondary" component="p">
-      {game.competition.name}
-      <br />
-      <Moment format="DD MMMM YYYY - HH:mm">{game.date}</Moment>
-    </Typography>
+const useStyles = makeStyles({
+  root: {
+    marginTop: "16px",
+    marginBottom: "16px",
+  },
+  video: {
+    marginTop: "16px",
+  },
+});
 
-    <div dangerouslySetInnerHTML={{ __html: game.videos[0].embed }}></div>
-  </Container>
-);
+const MatchFull: FC<{ game: IGame }> = ({ game }) => {
+  const classes = useStyles();
+  return (
+    <Container className={classes.root}>
+      <Typography gutterBottom variant="h5" component="h3">
+        {game.title}
+      </Typography>
+      <Typography variant="body2" color="textSecondary" component="p">
+        {game.competition.name}
+        <br />
+        <Moment format="DD MMMM YYYY - HH:mm">{game.date}</Moment>
+      </Typography>
+
+      <div
+        className={classes.video}
+        dangerouslySetInnerHTML={{ __html: game.videos[0].embed }}
+      ></div>
+    </Container>
+  );
+};
 
 export default MatchFull;