Merge pull request #43 from FAC-Sixteen/feature/styling-factpage

Feature/styling factpage

Author: bantek89

src/assets/FactBubble.png

@@ -3,24 +3,47 @@ import { Link } from "react-router-dom";
 import Header from "../header/Header";
 import Main from "../main/Main";
 
+import {
+    StyledFactPage,
+    FactBubble,
+    FactBubbleContainer,
+    FactBubbleFact,
+    WiseManContainer,
+    WiseMan,
+    WiseManText,
+} from "./FactPage.style";
+import { LargeButton } from "../button/Button";
+import FactBubbleImg from "../../assets/FactBubble.png";
+import WiseManSvg from "../avatars/wise-man.svg";
+
 const FactPage = ({ location: { score, data } }) => {
     return (
         <React.Fragment>
             <Header text="Results" />
             <Main>
-                <p>
-                    Hey, well done! Just before we see your score, did you know:
-                </p>
-                <div>{data[0].Fact}</div>
-                <Link
-                    to={{
-                        pathname: "/results",
+                <StyledFactPage>
+                    <WiseManContainer>
+                        <WiseManText>
+                            Hey, well done! Just before we see your score, did
+                            you know:
+                        </WiseManText>
+                        <WiseMan src={WiseManSvg} />
+                    </WiseManContainer>
+
+                    <FactBubbleContainer>
+                        <FactBubbleFact>{data[0].Fact}</FactBubbleFact>
+                        <FactBubble src={FactBubbleImg} />
+                    </FactBubbleContainer>
 
-                        score: score,
-                    }}
-                >
-                    See Your Results!
-                </Link>
+                    <Link
+                        to={{
+                            pathname: "/results",
+                            score: score,
+                        }}
+                    >
+                        <LargeButton>See Your Results!</LargeButton>
+                    </Link>
+                </StyledFactPage>
             </Main>
         </React.Fragment>
     );

src/assets/GreenComicBG.jpg

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import GreenComicBG from "../../assets/GreenComicBG.jpg";
+import FactBubbleImg from "../../assets/FactBubble.png";
+
+const StyledFactPage = styled.div`
+    background-image: url(${GreenComicBG});
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    font-family: Bangers;
+    font-style: normal;
+    font-weight: normal;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+`;
+const FactBubbleContainer = styled.div`
+    width: 40em;
+    height: 32em;
+    position: relative;
+    display: flex;
+    justify-content: center;
+`;
+
+const FactBubble = styled.img`
+    width: 40em;
+    height: auto;
+`;
+const FactBubbleFact = styled.div`
+    width: 16em;
+    text-align: center;
+    font-size: 1.5em;
+    margin: auto;
+    position: absolute;
+    height: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    transform: rotate(-20deg);
+`;
+
+const WiseManContainer = styled.div`
+    width: 32em;
+`;
+
+const WiseManText = styled.div`
+    width: fit-content;
+    border: 4px solid black;
+    border-radius: 1em;
+    background-color: white;
+    padding: 1em;
+    margin: 3em;
+`;
+
+const WiseMan = styled.img`
+    width: 16em;
+`;
+
+export {
+    StyledFactPage,
+    FactBubble,
+    FactBubbleContainer,
+    FactBubbleFact,
+    WiseManContainer,
+    WiseMan,
+    WiseManText,
+};

src/components/factPage/FactPage.js

@@ -14,7 +14,7 @@ import Main from "../main/Main";
 
 const Game = ({ data }) => {
     const [score, setScore] = React.useState(0);
-    const [time, setTime] = React.useState(10);
+    const [time, setTime] = React.useState(2);
     const [items, setItems] = React.useState(formatData(data));
     const [showModal, setShowModal] = React.useState(false);
     const [active, setActive] = React.useState(false);
@@ -79,7 +79,7 @@ const Game = ({ data }) => {
     );
 
     return (
-        <React.Fragment data-testid="game">
+        <div data-testid="game">
             <Header text="Game" />
             <Main>
                 <div>
@@ -134,7 +134,7 @@ const Game = ({ data }) => {
                     </Link>
                 </ReactModal>
             </Main>
-        </React.Fragment>
+        </div>
     );
 };