Fixes #10: Split style file into proper files

src/components/Footer/A.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export default styled.a`
+  color: white;
+  text-decoration: none;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    border-bottom: 1px solid white;
+    left: 0;
+    right: 0;
+    bottom: -2px;
+  }
+`;

src/components/Footer/Br.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+import { media } from 'styles';
+
+export default styled.br`
+  ${media.laptop`display: none`};
+`;

src/components/Footer/Footer.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { primaryColor, media } from 'styles';
+
+export default styled.footer`
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: white;
+  text-align: center;
+  background-color: ${primaryColor};
+  padding: 10px;
+  display: flex;
+  font-weight: 100;
+
+  ${media.tablet`
+      height: 30px;
+    `};
+`;

src/components/Footer/GithubLink.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export default styled.a`
+  width: 30px;
+  height: auto;
+  margin: auto 0;
+`;

src/components/Footer/P.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export default styled.p`
+  display: inline-block;
+  margin: auto;
+`;

src/components/Footer/index.js

@@ -1,7 +1,11 @@
 import React from 'react';
 
 import githubLogo from './github.svg';
-import { StyledFooter, P, A, Br, GithubLink } from './Footer.style';
+import StyledFooter from './Footer';
+import P from './P';
+import A from './A';
+import Br from './Br';
+import GithubLink from './GithubLink';
 
 function Footer() {
   return (

src/components/Timer/Button.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { primaryColor, media } from 'styles';
+
+export default styled.button`
+  background-color: ${primaryColor};
+  color: white;
+  border: 0;
+  font-weight: 700;
+  padding: .8em;
+  display: block;
+  margin: 0 auto 10px auto;
+  width: 80%;
+  font-size: 1.5em;
+  cursor: pointer;
+
+  ${media.tablet`
+      width: 300px;
+      margin: 0 auto 10px auto;
+    `};
+`;

src/components/Timer/Counter.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+import { secondaryColor, media } from 'styles';
+
+export default styled.div`
+  color: ${secondaryColor};
+  font-weight: 700;
+  text-align: center;
+  font-size: 5em;
+  margin-bottom: 5%;
+
+  ${media.tablet`
+      margin-bottom: 20px;
+    `};
+`;

src/components/Timer/TaskName.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { primaryColor } from 'styles';
+
+export default styled.p`
+  color: ${primaryColor};
+  font-weight: 400;
+  text-align: center;
+  font-size: 3em;
+  margin: 0;
+`;

src/components/Timer/index.js

@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import { func, shape, string } from 'prop-types';
 
 import { zeroPad } from 'services/string';
-import { Button, Counter, TaskName } from './Timer.style';
+import Button from './Button';
+import Counter from './Counter';
+import TaskName from './TaskName';
 
 class Timer extends Component {
   constructor(props) {

src/components/TimerForm/Input.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { primaryColor, secondaryColor, media } from 'styles';
+
+export default styled.input`
+  display: block;
+  border: 0;
+  border-bottom: 1px solid ${primaryColor};
+  margin: 10% auto;
+  width: 80%;
+  font-size: 1.5em;
+  background-color: transparent;
+
+  &::placeholder {
+    color: ${secondaryColor};
+    opacity: 0.6;
+  }
+
+  ${media.tablet`
+    width: 300px;
+    margin: 40px auto;
+  `};
+`;

src/components/TimerForm/Submit.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { primaryColor, media } from 'styles';
+
+export default styled.input`
+  background-color: ${primaryColor};
+  color: white;
+  border: 0;
+  font-weight: 700;
+  padding: .8em;
+  display: block;
+  margin: auto;
+  width: 80%;
+  font-size: 1.5em;
+  cursor: pointer;
+
+  ${media.tablet`
+      margin: 40px auto;
+      width: 300px;
+    `};
+`;

src/components/TimerForm/index.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { func } from 'prop-types';
 
-import { Input, Submit } from './TimerForm.style';
+import Input from './Input';
+import Submit from './Submit';
 
 class TimerForm extends Component {
   constructor(props) {

src/scenes/Home/Logo.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { media } from 'styles';
+
+export default styled.img`
+  display: block;
+
+  ${media.tablet`
+      display: inline-block;
+    `};
+`;

src/scenes/Home/LogoCtn.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+import { media } from 'styles';
+
+export default styled.div`
+  margin: 10% auto 5% auto;
+  width: 7.143em;
+
+  ${media.tablet`
+      margin: 30px 50px 5vh 50px;
+    `} ${media.desktop`
+      margin-bottom: 7vh;
+    `} ${media.big`
+      margin-bottom: 18vh;
+    `};
+`;

src/scenes/Home/Home.style.js → src/scenes/Home/Root.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import { media, secondaryColor } from 'styles';
+import { media } from 'styles';
 
-export const Root = styled.div`
+export default styled.div`
   @font-face {
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
@@ -35,32 +35,3 @@ export const Root = styled.div`
       font-size: 18px;
     `};
 `;
-
-export const LogoCtn = styled.div`
-  margin: 10% auto 5% auto;
-  width: 7.143em;
-
-  ${media.tablet`
-      margin: 30px 50px 5vh 50px;
-    `} ${media.desktop`
-      margin-bottom: 7vh;
-    `} ${media.big`
-      margin-bottom: 18vh;
-    `};
-`;
-
-export const Title = styled.h1`
-  margin: 0;
-  font-family: 'Roboto';
-  font-weight: 400;
-  color: ${secondaryColor};
-  font-size: 1.2em;
-`;
-
-export const Logo = styled.img`
-  display: block;
-
-  ${media.tablet`
-      display: inline-block;
-    `};
-`;