fac-13 · i2xzy · Jun 13, 2018 · Jun 12, 2018 · Jun 12, 2018 · Jun 12, 2018
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
   <title>Eddie - Sexual Wellbeing</title>
 </head>

diff --git a/src/_mixins.scss b/src/_mixins.scss
diff --git a/src/_styleguide.scss b/src/_styleguide.scss
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -2,13 +2,31 @@ import React from 'react';
 import propTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
-import './header.scss';
+import styled from 'styled-components';
 
+const StyledHeader = styled.header`
+${props => props.theme.flexContainer('row', 'space-around', 'center')}
+width: 100%;
+height: 10%;
+`
+const Back = styled.div`
+${props => props.theme.flexContainer('row', 'center', 'center')}
+height: 40%;
+width: 6%;
+`
+
+const Title = styled.h1`
+${props => props.theme.flexContainer('row', 'flex-start', 'center')}
+  height: 40%;
+  width: 80%;
+  font-family: ${props => props.theme.bodyFont}
+  font-size: 1.3rem;
+`
 const Header = ({ title, history }) => {
   return (
     <React.Fragment>
-      <header className="header">
-        <div className="header__back" onClick={history.goBack}>
+      <StyledHeader>
+        <Back onClick={history.goBack}>
           <svg
             width="16"
             height="16"
@@ -23,9 +41,9 @@ const Header = ({ title, history }) => {
               fill="#3D4F51"
             />
           </svg>
-        </div>
-        <h1 className="header__title">{title}</h1>
-      </header>
+        </Back>
+        <Title>{title}</Title>
+      </StyledHeader>
     </React.Fragment>
   );
 };

diff --git a/src/components/Header/Header.test.js b/src/components/Header/Header.test.js
@@ -3,12 +3,15 @@ import { render } from 'react-testing-library';
 import { MemoryRouter } from 'react-router-dom';
 
 import Header from './Header';
+import { ThemeProvider } from 'styled-components';
 
 describe('test Header', () => {
   test('displays correct title', () => {
     const { container } = render(
       <MemoryRouter initialEntries={['/stories']}>
-        <Header title="Stories" />
+        <ThemeProvider theme={{ flexContainer: () => { } }}>
+          <Header title="Stories" />
+        </ThemeProvider>
       </MemoryRouter>
     );
     const actual = container.querySelector('h1').textContent;

diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,36 +1,116 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import './home.scss';
+import styled from 'styled-components';
+import forest from '../../../assets/forest.svg'
+
+const Main = styled.main`
+  ${props => props.theme.flexContainer('column', 'space-around', 'center')};
+  height: 100vh;
+  width: 100vw;
+  background-image: url(${forest});
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 270% 270%;
+  color: ${props => props.theme.white};
+  font-family: ${props => props.theme.headerFont};
+  animation: appear 0.8s ease-in-out;
+  @keyframes appear {
+    0% {
+      background-color: ${props => props.theme.blue};
+      opacity: 0.1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
+const Header = styled.header`
+${props => props.theme.flexContainer('column', 'center', 'center')};
+`
+const Subtitle = styled.h2`
+font-family: ${props => props.theme.headerFont};
+font-weight: 300;
+color: ${props => props.theme.darkBlue};
+`
+const Title = Subtitle.extend`
+font-size: 1.5rem;
+margin-bottom: 1rem;
+text-transform: uppercase;
+`
+
+const Blurb = styled.div`
+${props => props.theme.flexContainer('column', 'space-around', 'center')};
+height: 10rem;
+width: 80%;
+max-width: 600px;
+background-color: ${props => props.theme.darkBlue};
+border-radius: 10px;
+opacity: 0.8;
+box-sizing: border-box;
+text-align: center;
+`
+
+const Buttons = styled.div`
+${props => props.theme.flexContainer('row', 'space-between', 'center')};
+width: 80%;
+max-width: 600px;
+`
+
+const Button = styled(Link) `
+${props => props.theme.flexContainer('row', 'center', 'center')};
+background-color: ${props => props.theme.darkBlue};
+border-radius: 5px;
+color: ${props => props.theme.white};
+height: 30px;
+min-width: 30%;
+box-shadow: 1px 4px 10px ${props => props.theme.darkBlue};
+text-decoration: none;
+font-size: 0.8rem;
+padding: 2px;
+text-transform: uppercase;
+  &: focus {
+  cursor: pointer;
+  box - shadow: 0 0 10px ${props => props.theme.white};
+}
+  &: active {
+  outline: none;
+  box - shadow: 0 0 10px ${props => props.theme.white};
+}
+`
 
 const Home = () => (
   <React.Fragment>
-    <main className="home">
-      <header className="home__header">
-        <h1 className="home__title">Eddie</h1>
-        <h5 className="home__subtitle">your guide to sexual wellbeing</h5>
-      </header>
-      <div className="home__blurb">
+    <Main>
+      <Header>
+        <Title>Eddie</Title>
+        <Subtitle>your guide to sexual wellbeing</Subtitle>
+      </Header>
+      <Blurb>
         <p>
           1 in 3 of sexually active men experience difficulties getting or
           keeping an erection.
         </p>
         <p>
           This app has information and tools to help you improve your sex life.
         </p>
-      </div>
-      <div className="home__btns">
-        <Link to="stories" className="home__btn">
+      </Blurb>
+      <Buttons>
+        <Button to="stories">
           Stories
-        </Link>
-        <Link to="theory" className="home__btn">
+        </Button>
+        <Button to="theory">
           Theory
-        </Link>
-        <Link to="resources" className="home__btn">
+        </Button>
+        <Button to="resources">
           Resources
-        </Link>
-      </div>
-    </main>
+        </Button>
+      </Buttons>
+    </Main>
   </React.Fragment>
 );
 

diff --git a/src/components/Home/Home.test.js b/src/components/Home/Home.test.js
@@ -2,12 +2,15 @@ import React from 'react';
 import { render } from 'react-testing-library';
 import { MemoryRouter } from 'react-router-dom';
 import Home from './Home';
+import { ThemeProvider } from 'styled-components';
 
 describe('test Home', () => {
   test('displays Header', () => {
     const { container } = render(
       <MemoryRouter initialEntries={['/home']}>
-        <Home />
+        <ThemeProvider theme={{ flexContainer: () => { } }}>
+          <Home />
+        </ThemeProvider>
       </MemoryRouter>
     );
     const actual = container.querySelectorAll('p')[0].textContent.includes('sexually');

diff --git a/src/components/Home/home.scss b/src/components/Home/home.scss
diff --git a/src/components/Mechanism/Mechanism.test.js b/src/components/Mechanism/Mechanism.test.js
@@ -2,12 +2,15 @@ import React from 'react';
 import { render } from 'react-testing-library';
 import { MemoryRouter } from 'react-router-dom';
 import Mechanism from './Mechanism';
+import { ThemeProvider } from 'styled-components';
 
 describe('test Mechanism', () => {
   test('displays title of mechanism', () => {
     const { container } = render(
       <MemoryRouter initialEntries={['/mechanism']}>
-        <Mechanism />
+        <ThemeProvider theme={{ flexContainer: () => { } }}>
+          <Mechanism />
+        </ThemeProvider>
       </MemoryRouter>
     );
     const actual = container.querySelector('h1').textContent;

diff --git a/src/components/Myths/Myths.test.js b/src/components/Myths/Myths.test.js
@@ -2,12 +2,15 @@ import React from 'react';
 import { render } from 'react-testing-library';
 import { MemoryRouter } from 'react-router-dom';
 import Myths from './Myths';
+import { ThemeProvider } from 'styled-components';
 
 describe('test Myths', () => {
   test('displays myths title', () => {
     const { container } = render(
       <MemoryRouter initialEntries={['/myths']}>
-        <Myths />
+        <ThemeProvider theme={{ flexContainer: () => { } }}>
+          <Myths />
+        </ThemeProvider>
       </MemoryRouter>
     );
     const actual = container.querySelector('h1').textContent;