From 7b2f8c9ec9c0b5202787ac94035a1bc91da5e7f4 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Thu, 20 Dec 2018 17:38:03 +0100
Subject: [PATCH 01/11] Intial commit of removing all the aphrodite

---
 frontend/src/Common/Buttons/CrossButton.js | 23 ++----
 frontend/src/Dashboard/Dashboard.Loader.js | 22 +++---
 frontend/src/Dummy/Dummy.js                | 88 ++++++++++++----------
 frontend/src/House/Card.Loader.js          | 71 ++++++++---------
 frontend/src/House/Card.js                 | 71 ++++++++---------
 5 files changed, 135 insertions(+), 140 deletions(-)

diff --git a/frontend/src/Common/Buttons/CrossButton.js b/frontend/src/Common/Buttons/CrossButton.js
index 8b18ff7..4c37549 100644
--- a/frontend/src/Common/Buttons/CrossButton.js
+++ b/frontend/src/Common/Buttons/CrossButton.js
@@ -1,18 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
-const cross_symbol = String.fromCharCode(10799);
+const SYMBOL = String.fromCharCode(10799);
 
 const CrossButton = props => (
-  <button
-    type="button"
-    title={props.title}
-    className={css(styles.cross_box_colour)}
-    onClick={props.onClick}
-  >
-    {cross_symbol}
-  </button>
+  <ButtonStyle type="button" title={props.title} onClick={props.onClick}>
+    {SYMBOL}
+  </ButtonStyle>
 );
 
 CrossButton.propTypes = {
@@ -20,10 +15,8 @@ CrossButton.propTypes = {
   onClick: PropTypes.func.isRequired
 };
 
-const styles = StyleSheet.create({
-  cross_box_colour: {
-    background: 'tomato' // "linear-gradient( to top, #49CF87, #40C080)"
-  }
-});
+const ButtonStyle = styled.button`
+  background: tomato;
+`;
 
 export default CrossButton;
diff --git a/frontend/src/Dashboard/Dashboard.Loader.js b/frontend/src/Dashboard/Dashboard.Loader.js
index a6c377c..f62b926 100644
--- a/frontend/src/Dashboard/Dashboard.Loader.js
+++ b/frontend/src/Dashboard/Dashboard.Loader.js
@@ -1,25 +1,23 @@
 import React from 'react';
 import HouseListLoader from '../House/HouseList.Loader';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const DashboardLoader = () => (
   <div style={{ flex: '1' }}>
     <h1>Dashboard</h1>
-    <button type="button" disabled={true} className={css(styles.button)} />
+    <StyledButton type="button" disabled={true} />
     <HouseListLoader />
   </div>
 );
 
-const styles = StyleSheet.create({
-  button: {
-    width: '80px',
-    height: '1.5rem',
-    background: 'lightgrey',
-    borderRadius: '10px',
-    ':hover': {
-      boxShadow: 'none'
-    }
+const StyledButton = styled.button`
+  width: 80px;
+  height: 1.5rem;
+  background: lightgrey;
+  border-radius: 10px;
+  &:hover {
+    box-shadow: none;
   }
-});
+`;
 
 export default DashboardLoader;
diff --git a/frontend/src/Dummy/Dummy.js b/frontend/src/Dummy/Dummy.js
index 9f65db9..8addb75 100644
--- a/frontend/src/Dummy/Dummy.js
+++ b/frontend/src/Dummy/Dummy.js
@@ -1,45 +1,53 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
-const styles = StyleSheet.create({
-  container: {
-    height: '80vh',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  form: {
-    display: 'flex',
-    border: '20px solid rgba(0,0,0,0.3)',
-    borderRadius: '5px'
-  },
-  formInput: {
-    border: '0',
-    padding: '10px',
-    background: 'white',
-    lineHeight: '50px',
-    fontSize: '20px',
-    borderRadius: '0',
-    outline: '0',
-    borderRight: '1px solid rgba(0,0,0,0.2)'
-  },
-  formSubmit: {
-    border: '0',
-    padding: '10px',
-    lineHeight: '50px',
-    fontSize: '20px',
-    borderRadius: '0',
-    outline: '0',
-    borderRight: '1px solid rgba(0,0,0,0.2)',
-    background: '#FF5A5F',
-    borderTop: '1px solid #FF5A5F',
-    borderBottom: '1px solid #FF5A5F',
-    color: 'white',
-    flexBasis: '500px'
-  }
-});
+const Container = styled.div`
+  height: 80vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 
-const Dummy = () => <div className={css(styles.container)} />;
+// const styles = StyleSheet.create({
+// container: {
+//   height: '80vh',
+//   width: '100%',
+//   display: 'flex',
+//   justifyContent: 'center',
+//   alignItems: 'center'
+// }
+// form: {
+//   display: 'flex',
+//   border: '20px solid rgba(0,0,0,0.3)',
+//   borderRadius: '5px'
+// },
+// formInput: {
+//   border: '0',
+//   padding: '10px',
+//   background: 'white',
+//   lineHeight: '50px',
+//   fontSize: '20px',
+//   borderRadius: '0',
+//   outline: '0',
+//   borderRight: '1px solid rgba(0,0,0,0.2)'
+// }
+// formSubmit: {
+//   border: '0',
+//   padding: '10px',
+//   lineHeight: '50px',
+//   fontSize: '20px',
+//   borderRadius: '0',
+//   outline: '0',
+//   borderRight: '1px solid rgba(0,0,0,0.2)',
+//   background: '#FF5A5F',
+//   borderTop: '1px solid #FF5A5F',
+//   borderBottom: '1px solid #FF5A5F',
+//   color: 'white',
+//   flexBasis: '500px'
+// }
+// });
+
+const Dummy = () => <Container />;
 
 export default Dummy;
diff --git a/frontend/src/House/Card.Loader.js b/frontend/src/House/Card.Loader.js
index 75ee66a..401f249 100644
--- a/frontend/src/House/Card.Loader.js
+++ b/frontend/src/House/Card.Loader.js
@@ -1,42 +1,43 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const CardLoader = () => (
-  <div className={css(styles.container)}>
-    <div className={css(styles.imageGreyed)} />
-    <div className={css(styles.titleGreyed)} />
-    <div className={css(styles.descriptionGreyed)} />
-  </div>
+  <Container>
+    <GreyedImage />
+    <GreyedTitle />
+    <GreyedDescription />
+  </Container>
 );
 
-const styles = StyleSheet.create({
-  imageGreyed: {
-    width: '100%',
-    height: '200px',
-    background: 'lightgrey'
-  },
-  titleGreyed: {
-    width: '100%',
-    height: '3rem',
-    background: 'lightgrey',
-    marginTop: '10px'
-  },
-  descriptionGreyed: {
-    width: '100%',
-    height: '4rem',
-    background: 'lightgrey',
-    marginTop: '10px'
-  },
-  container: {
-    background: 'snow',
-    boxShadow: '0px 0px 5px 2px rgba(0, 0, 0, 0.19)',
-    borderRadius: '10px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    margin: '10px',
-    width: '320px'
-  }
-});
+const GreyedImage = styled.div`
+  width: 100%;
+  height: 200px;
+  background: lightgrey;
+`;
+
+const Container = styled.div`
+  background: snow;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.19);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+  width: 320px;
+`;
+
+const GreyedTitle = styled.div`
+  width: 100%;
+  height: 3rem;
+  background: lightgrey;
+  margin-top: 10px;
+`;
+
+const GreyedDescription = styled.div`
+  width: 100%;
+  height: 4rem;
+  background: lightgrey;
+  margin-top: 10px;
+`;
 
 export default CardLoader;
diff --git a/frontend/src/House/Card.js b/frontend/src/House/Card.js
index 6fcd37e..0b7c482 100644
--- a/frontend/src/House/Card.js
+++ b/frontend/src/House/Card.js
@@ -2,61 +2,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ImageDefault } from '../Image';
 import Rating from '../Rating';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const Card = props => (
-  <div className={css(styles.container)}>
+  <Container>
     <ImageDefault
       src={props.house.images[0]}
       missing_url="//via.placeholder.com/350x150?text=No Image"
     />
-    <div className={css(styles.title)}>
+    <Title>
       {props.house.title}
       <Rating
         currentRating={props.house.rating}
         type="house"
         parent_id={props.house._id}
       />
-    </div>
-    <p className={css(styles.content)}>{props.house.description}</p>
-  </div>
+    </Title>
+    <Content>{props.house.description}</Content>
+  </Container>
 );
 
 Card.propTypes = {
   house: PropTypes.object.isRequired
 };
 
-const styles = StyleSheet.create({
-  container: {
-    background: '#fefff9',
-    boxShadow: 'rgba(0, 0, 0, 0.19) 0 0 8px 0',
-    borderRadius: '4px',
-    color: '#363636',
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '10px',
-    width: '320px'
-  },
-  title: {
-    display: 'flex',
-    alignItems: 'center',
-    fontWeight: 'bold',
-    margin: '0',
-    padding: '1% 2.5%',
-    lineHeight: '1.2',
-    background: 'rgba(157, 187, 63, .85)',
-    color: 'white',
-    bottom: '0',
-    width: '100%'
-  },
-  title_heading: {
-    margin: '0',
-    padding: '0 3.5%',
-    lineHeight: '1.2'
-  },
-  content: {
-    padding: '5% 5% 3% 5%'
-  }
-});
+const Container = styled.div`
+  background: #fefff9;
+  box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
+  border-radius: 4px;
+  color: #363636;
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+  width: 320px;
+`;
+
+const Title = styled.div`
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  margin: 0;
+  padding: 1% 2.5%;
+  line-height: 1.2;
+  background: rgba(157, 187, 63, 0.85);
+  color: white;
+  bottom: 0;
+  width: 100%;
+`;
+
+const Content = styled.p`
+  padding: 5% 5% 3% 5%;
+`;
 
 export default Card;

From ff317f214480dea0b3a4f8edb31dd222d05b5843 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Thu, 20 Dec 2018 17:54:54 +0100
Subject: [PATCH 02/11] Working on removing aphrodite

---
 frontend/src/Uploader/UrlInput.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Uploader/UrlInput.js b/frontend/src/Uploader/UrlInput.js
index 994553f..914af9f 100644
--- a/frontend/src/Uploader/UrlInput.js
+++ b/frontend/src/Uploader/UrlInput.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const UrlInput = props => (
-  <div className={css(styles.wrapper)}>
+  <Container>
     Url
     <input
       type="text"
@@ -11,19 +11,18 @@ const UrlInput = props => (
       onChange={props.onUrlChange}
       onKeyUp={props.handleUrlKeyUp}
     />
-  </div>
+  </Container>
 );
 UrlInput.propTypes = {
   url_text: PropTypes.string,
   onUrlChange: PropTypes.func.isRequired,
   handleUrlKeyUp: PropTypes.func.isRequired
 };
-export default UrlInput;
 
-const styles = StyleSheet.create({
-  wrapper: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    alignItems: 'center'
-  }
-});
+const Container = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+export default UrlInput;

From 5a4c4bc320e22d4c89746f7733434912cd702c30 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Thu, 20 Dec 2018 18:00:38 +0100
Subject: [PATCH 03/11] Working on removing aphrodite

---
 frontend/src/Profile/Avatar.js | 20 +++++++++-----------
 frontend/src/Search/Form.js    | 19 ++++++++-----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/frontend/src/Profile/Avatar.js b/frontend/src/Profile/Avatar.js
index 1b1539b..25ba179 100644
--- a/frontend/src/Profile/Avatar.js
+++ b/frontend/src/Profile/Avatar.js
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ImageDefault } from '../Image';
 import { Uploader } from '../Uploader';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const Avatar = ({ name, localUser, image, changeImage }) => (
-  <div className={css(styles.wrapper)}>
+  <Wrapper>
     {localUser ? (
       <Uploader currentImage={image} addImage={changeImage} />
     ) : (
@@ -15,9 +15,15 @@ const Avatar = ({ name, localUser, image, changeImage }) => (
       />
     )}
     <p>{name}</p>
-  </div>
+  </Wrapper>
 );
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 200px;
+`;
+
 Avatar.propTypes = {
   localUser: PropTypes.bool.isRequired,
   name: PropTypes.string.isRequired,
@@ -25,12 +31,4 @@ Avatar.propTypes = {
   changeImage: PropTypes.func.isRequired
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: '0 1 200px'
-  }
-});
-
 export default Avatar;
diff --git a/frontend/src/Search/Form.js b/frontend/src/Search/Form.js
index 7b9f2bd..b71b08d 100644
--- a/frontend/src/Search/Form.js
+++ b/frontend/src/Search/Form.js
@@ -1,14 +1,11 @@
 import React from 'react';
-import { css, StyleSheet } from 'aphrodite';
+import styled from 'styled-components';
 
-const Form = props => <form {...props} className={css(styles.form)} />;
-export default Form;
+export default props => <StyledForm {...props} />;
 
-const styles = StyleSheet.create({
-  form: {
-    display: 'flex',
-    border: '10px solid rgba(0,0,0,0.3)',
-    borderRadius: '5px',
-    zIndex: '10'
-  }
-});
+const StyledForm = styled.form`
+  display: flex;
+  border: 10px solid rgbd(0, 0, 0, 0.3);
+  border-radius: 5px;
+  z-index: 10;
+`;

From 2fb26448694c967d372fcd0ef2b66704de3e33ad Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Thu, 20 Dec 2018 20:33:57 +0100
Subject: [PATCH 04/11] Continuing with the refactor

---
 frontend/src/House/HouseDetail.js     | 39 ++++++++-------
 frontend/src/House/HouseDetailEdit.js | 39 ++++++++-------
 frontend/src/House/HouseForm.js       | 70 ++++++++++++++-------------
 3 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/frontend/src/House/HouseDetail.js b/frontend/src/House/HouseDetail.js
index dd2d0ae..a547b14 100644
--- a/frontend/src/House/HouseDetail.js
+++ b/frontend/src/House/HouseDetail.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { css, StyleSheet } from 'aphrodite';
 import { ImageList } from '../Image';
 import HouseForm from './HouseForm';
 import { houseFetchData, houseSaveData, houseReset } from './actions';
+import styled, { css } from 'styled-components';
 
 class House extends Component {
   static propTypes = {
@@ -90,30 +90,35 @@ class House extends Component {
     if (isWorking) {
       return <p>Please wait ...</p>;
     }
-    const show_error = {
-      color: 'tomato',
-      display: hasErrored ? 'block' : 'none'
-    };
     return (
-      <div className={css(styles.centered)}>
+      <Centered>
         <h1>House (View)</h1>
-        <div style={show_error}>{errorMessage}</div>
+        <ErrorMessage hasErrored={hasErrored}>{errorMessage}</ErrorMessage>
         <HouseForm house={house} />
         <ImageList images={house.images} />
-      </div>
+      </Centered>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  centered: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
+const Centered = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ErrorMessage = styled.div`
+  color: tomato;
+  display: none;
+
+  ${props =>
+    props.hasErrored &&
+    css`
+      display: block;
+    `};
+`;
 
 const mapStateToProps = state => {
   return {
diff --git a/frontend/src/House/HouseDetailEdit.js b/frontend/src/House/HouseDetailEdit.js
index 0b0f398..32fc79e 100644
--- a/frontend/src/House/HouseDetailEdit.js
+++ b/frontend/src/House/HouseDetailEdit.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { css, StyleSheet } from 'aphrodite';
 import { ImageBlock, ImageListRemovable } from '../Image';
 import HouseFormEdit from './HouseFormEdit';
 import { houseFetchData, houseSaveData, houseReset } from './actions';
+import styled, { css } from 'styled-components';
 
 class House extends Component {
   static propTypes = {
@@ -91,14 +91,10 @@ class House extends Component {
       return <p>Please wait ...</p>;
     }
     const op_type = typeof house._id === 'undefined' ? 'New' : 'Edit';
-    const show_error = {
-      color: 'tomato',
-      display: hasErrored ? 'block' : 'none'
-    };
     return (
-      <div className={css(styles.centered)}>
+      <Centered>
         <h1>House ({op_type})</h1>
-        <div style={show_error}>{errorMessage}</div>
+        <ErrorMessage hasErrored={hasErrored}>{errorMessage}</ErrorMessage>
         <HouseFormEdit
           house={house}
           onFieldChange={this.onFieldChange}
@@ -109,20 +105,29 @@ class House extends Component {
           images={house.images}
           removeImage={this.removeImage}
         />
-      </div>
+      </Centered>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  centered: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
+const Centered = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ErrorMessage = styled.div`
+  color: tomato;
+  display: none;
+
+  ${props =>
+    props.hasErrored &&
+    css`
+      display: block;
+    `};
+`;
 
 const mapStateToProps = state => {
   return {
diff --git a/frontend/src/House/HouseForm.js b/frontend/src/House/HouseForm.js
index 99d0503..1983881 100644
--- a/frontend/src/House/HouseForm.js
+++ b/frontend/src/House/HouseForm.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled, { css } from 'styled-components';
 
 export default class HouseForm extends Component {
   static propTypes = {
@@ -10,67 +10,71 @@ export default class HouseForm extends Component {
   render = () => {
     const { house } = this.props;
     return (
-      <form action="" className={css(styles.form)}>
-        <label className={css(styles.left_grid)}>Title</label>
-        <input
+      <Form action="">
+        <LeftGrid>Title</LeftGrid>
+        <RightGridLabel
           name="title"
           type="text"
           placeholder="Title"
           disabled="disabled"
-          className={css(styles.right_grid)}
           value={house.title}
         />
 
-        <label className={css(styles.left_grid)}>Street</label>
-        <input
+        <LeftGrid>Street</LeftGrid>
+        <RightGridLabel
           name="location.street"
           type="text"
           placeholder="Street"
           disabled="disabled"
-          className={css(styles.right_grid)}
           value={house.location.street}
         />
 
-        <label className={css(styles.left_grid)}>Post Code</label>
-        <input
+        <LeftGrid>Post Code</LeftGrid>
+        <RightGridLabel
           name="location.postCode"
           type="text"
           placeholder="Post Code"
           disabled="disabled"
-          className={css(styles.right_grid)}
           value={house.location.postCode}
         />
 
-        <label className={css(styles.left_grid)}>Description</label>
-        <textarea
+        <LeftGrid>Description</LeftGrid>
+        <RightGridText
           name="description"
           rows="6"
           cols="32"
           placeholder="Description"
           disabled="disabled"
-          className={css(styles.right_grid)}
           value={house.description}
         />
-      </form>
+      </Form>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  form: {
-    margin: '10px auto',
-    maxWidth: '600px',
-    display: 'grid',
-    alignItems: 'baseline',
-    gridTemplateColumns: '100px 1fr',
-    gridGap: '8px'
-  },
-  left_grid: {
-    lineHeight: '1.5em',
-    textAlign: 'right',
-    gridColumn: '1 / 2'
-  },
-  right_grid: {
-    gridColumn: '2/3'
-  }
-});
+const Form = styled.form`
+  margin: 10px auto;
+  max-width: 600px;
+  display: grid;
+  align-items: baseline;
+  grid-template-columns: 100px 1fr;
+  grid-gap: 8px;
+`;
+
+const LeftGrid = styled.label`
+  line-height: 1.5em;
+  text-align: right;
+  grid-column: 1 / 2;
+`;
+
+const sharedGrid = css`
+  grid-column: 2 / 3;
+`;
+
+const RightGridLabel = styled.input`
+  ${sharedGrid};
+`;
+
+const RightGridText = styled.textarea`
+  ${sharedGrid};
+`;

From 620ebc0c49fda098c73b5461aabe006f1c541b4f Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Thu, 20 Dec 2018 20:58:26 +0100
Subject: [PATCH 05/11] Working more on the refactor of the aphrodite

---
 frontend/src/Image/ImageBlock.js      | 36 +++++++++++----------
 frontend/src/Issue/IssueItem.js       | 31 ++++++++----------
 frontend/src/Issue/IssueList.js       | 17 +++++-----
 frontend/src/Rating/Summary.js        | 45 +++++++++++++--------------
 frontend/src/Uploader/ImageDropper.js |  6 ++--
 5 files changed, 67 insertions(+), 68 deletions(-)

diff --git a/frontend/src/Image/ImageBlock.js b/frontend/src/Image/ImageBlock.js
index 093e5fe..a572aa3 100644
--- a/frontend/src/Image/ImageBlock.js
+++ b/frontend/src/Image/ImageBlock.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Uploader } from '../Uploader';
-import { StyleSheet, css } from 'aphrodite';
 import { PlusButton } from '../Common/Buttons';
+import styled, { css } from 'styled-components';
 
 export default class ImageBlock extends Component {
   static propTypes = {
@@ -15,31 +15,35 @@ export default class ImageBlock extends Component {
     this.setState({ uploader_visible: !this.state.uploader_visible });
   };
   render = () => {
-    const show_uploader = {
-      display: this.state.uploader_visible ? 'flex' : 'none'
-    };
     return (
       <div>
-        <div className={css(styles.header)}>
+        <Header>
           Images
           <PlusButton
             onClick={this.toggleUploaderVisibility}
             title="Toggle Image Uploader"
           />
-        </div>
-        <div style={show_uploader}>
+        </Header>
+        <UploaderStyle show={this.state.uploader_visible}>
           <Uploader addImage={this.props.addImage} />
-        </div>
+        </UploaderStyle>
       </div>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  header: {
-    display: 'flex',
-    flex: '1',
-    justifyContent: 'center',
-    alignItems: 'baseline'
-  }
-});
+const UploaderStyle = styled.div`
+  display: none;
+  ${props =>
+    props.show &&
+    css`
+      display: flex;
+    `};
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: baseline;
+`;
diff --git a/frontend/src/Issue/IssueItem.js b/frontend/src/Issue/IssueItem.js
index abf679b..51b6575 100644
--- a/frontend/src/Issue/IssueItem.js
+++ b/frontend/src/Issue/IssueItem.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 export default class Issue extends Component {
   static propTypes = {
@@ -12,25 +12,20 @@ export default class Issue extends Component {
   };
   render = () => {
     return (
-      <li className={css(styles.issue_style)} onClick={this.onClick}>
-        {this.props.issue.title}
-      </li>
+      <IssueStyle onClick={this.onClick}>{this.props.issue.title}</IssueStyle>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  issue_style: {
-    padding: '3px 5px',
-    cursor: 'pointer',
-    textAlign: 'left',
-    listStyle: 'none',
-    ':hover': {
-      // what do you fancy for highlight? bg colour, border or text colour?
-      // background: "lightgrey"
-      // border: '1px solid rgba( 127,127,127,0.5)',
-      // padding: '2px 4px',
-      color: 'rgb( 171, 107, 90)'
-    }
+const IssueStyle = styled.li`
+  padding: 3px 5px;
+  cursor: pointer;
+  text-align: left;
+  list-style: none;
+
+  &:hover {
+    background: lightgrey;
+    /* border: 1px solid rgba(127, 127, 127, 0.5); */
+    /* one of these two options are the best and most clear... */
   }
-});
+`;
diff --git a/frontend/src/Issue/IssueList.js b/frontend/src/Issue/IssueList.js
index 828df68..96ac5de 100644
--- a/frontend/src/Issue/IssueList.js
+++ b/frontend/src/Issue/IssueList.js
@@ -9,18 +9,19 @@ export default class IssueList extends Component {
     items: PropTypes.array.isRequired, // array of issues
     onIssueClick: PropTypes.func.isRequired
   };
-  // TODO: should we need this?
-  onIssueClick = issue => {
-    this.props.onIssueClick(issue);
-  };
   render = () => {
-    const items = this.props.items.map((item, i) => (
-      <IssueItem issue={item} key={i} onIssueClick={this.onIssueClick} />
-    ));
     return (
       <div className={css(styles.column_wrapper)}>
         <div className={css(styles.title)}>{this.props.title}</div>
-        <ul className={css(styles.list)}>{items}</ul>
+        <ul className={css(styles.list)}>
+          {this.props.items.map((item, i) => (
+            <IssueItem
+              issue={item}
+              key={i}
+              onIssueClick={this.props.onIssueClick}
+            />
+          ))}
+        </ul>
       </div>
     );
   };
diff --git a/frontend/src/Rating/Summary.js b/frontend/src/Rating/Summary.js
index fd2d507..acfb537 100644
--- a/frontend/src/Rating/Summary.js
+++ b/frontend/src/Rating/Summary.js
@@ -1,36 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
-const filled_star = String.fromCharCode(9733);
+const STAR_SYMBOL = String.fromCharCode(9733);
 
 const Summary = props => (
-  <div className={css(styles.stars)}>
-    {filled_star}
-    <div className={css(styles.rating_value)}>{props.value}</div>
-  </div>
+  <Stars>
+    {STAR_SYMBOL}
+    <RatingValue>{props.value}</RatingValue>
+  </Stars>
 );
 
 Summary.propTypes = {
   value: PropTypes.number.isRequired
 };
 
-const styles = StyleSheet.create({
-  stars: {
-    position: 'relative',
-    color: 'gold',
-    borderRadius: '10px',
-    fontSize: '3rem',
-    fontWeight: 'normal'
-  },
-  rating_value: {
-    position: 'absolute',
-    color: 'rgba( 5,5,5, 0.5)',
-    fontSize: '0.8rem',
-    top: '1.4rem',
-    left: '1.1rem',
-    fontWeight: 'bold'
-  }
-});
+const Stars = styled.div`
+  position: relative;
+  color: gold;
+  border-radius: 10px;
+  font-size: 3rem;
+  font-weight: normal;
+`;
+
+const RatingValue = styled.div`
+  position: absolute;
+  color: rgba(5, 5, 5, 0.5);
+  font-size: 0.8rem;
+  top: 1.4rem;
+  left: 1.1rem;
+  font-weight: bold;
+`;
 
 export default Summary;
diff --git a/frontend/src/Uploader/ImageDropper.js b/frontend/src/Uploader/ImageDropper.js
index 0cc0599..c7ccfc6 100644
--- a/frontend/src/Uploader/ImageDropper.js
+++ b/frontend/src/Uploader/ImageDropper.js
@@ -9,7 +9,7 @@ const getDropzoneStyle = (show_image, url) => {
     width: '200px',
     height: '200px',
     backgroundPosition: 'center',
-    backgroundImage: show_image ? `url( ${url})` : '',
+    backgroundImage: show_image ? `url(${url})` : '',
     backgroundSize: '200px, auto, contain',
     backgroundRepeat: 'no-repeat',
     border: show_image ? 'none' : '1px dashed grey'
@@ -37,8 +37,6 @@ ImageDropper.propTypes = {
   onFileDropped: PropTypes.func.isRequired
 };
 
-export default ImageDropper;
-
 const styles = StyleSheet.create({
   image_style: {
     maxWidth: '200px',
@@ -50,3 +48,5 @@ const styles = StyleSheet.create({
     marginBottom: '0px'
   }
 });
+
+export default ImageDropper;

From 0ebf20dca8dad106c1e690ff929b9f6655ff41c2 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Thu, 20 Dec 2018 22:27:35 +0100
Subject: [PATCH 06/11] Working on the refactor

---
 frontend/src/House/HouseList.js       | 20 ++++++-------
 frontend/src/Image/ImageList.js       | 41 +++++++++++++--------------
 frontend/src/Uploader/ImageDropper.js | 21 +++++---------
 3 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/frontend/src/House/HouseList.js b/frontend/src/House/HouseList.js
index 62c1a1f..e2d38ed 100644
--- a/frontend/src/House/HouseList.js
+++ b/frontend/src/House/HouseList.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 import HouseWithUpdateButtons from './HouseWithUpdateButtons';
 import { FilteredIssueList } from '../Issue';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 export default class HouseList extends Component {
   static propTypes = {
@@ -44,7 +44,7 @@ export default class HouseList extends Component {
     const { data } = this.props;
     const house_list = data.map((house, ndx) => {
       return (
-        <div className={css(styles.wrapper)} key={ndx}>
+        <Wrapper key={ndx}>
           <HouseWithUpdateButtons
             house={house}
             onNewIssue={this.onNewIssue}
@@ -61,17 +61,15 @@ export default class HouseList extends Component {
             statusFilter="resolved"
             title="Resolved Issues"
           />
-        </div>
+        </Wrapper>
       );
     });
-    return <div className={css(styles.list)}>{house_list}</div>;
+    return <div>{house_list}</div>;
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-around'
-  }
-});
+const Wrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: space-around;
+`;
diff --git a/frontend/src/Image/ImageList.js b/frontend/src/Image/ImageList.js
index 99edcec..a41a699 100644
--- a/frontend/src/Image/ImageList.js
+++ b/frontend/src/Image/ImageList.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImageDefault from './ImageDefault';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 export default class ImageList extends React.Component {
   static propTypes = {
@@ -16,32 +16,31 @@ export default class ImageList extends React.Component {
         src = img.preview;
       }
       return (
-        <div className={css(styles.wrapper)} key={src}>
+        <Wrapper key={src}>
           <ImageDefault
             src={src}
             missing_url="//via.placeholder.com/200x200?text=no image"
           />
-        </div>
+        </Wrapper>
       );
     });
-    return <div className={css(styles.container)}>{image_list}</div>;
+    return <Container>{image_list}</Container>;
   };
 }
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexWrap: 'wrap',
-    margin: '10px'
-  },
-  wrapper: {
-    padding: '0px 20px',
-    border: '2px solid darkgrey',
-    borderRadius: '10px',
-    boxShadow: '0px 0px 8px 0 #ccc',
-    background: 'lightgrey',
-    maxWidth: '220px'
-  }
-});
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 10px;
+`;
+
+const Wrapper = styled.div`
+  padding: 0 20px;
+  border: 2px solid darkgrey;
+  border-radius: 10px;
+  box-shadow: 0 0 8px 0 #ccc;
+  background: lightgrey;
+  max-width: 220px;
+`;
diff --git a/frontend/src/Uploader/ImageDropper.js b/frontend/src/Uploader/ImageDropper.js
index c7ccfc6..5b3aeb9 100644
--- a/frontend/src/Uploader/ImageDropper.js
+++ b/frontend/src/Uploader/ImageDropper.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
 import Dropzone from 'react-dropzone';
+import styled from 'styled-components';
 
 const getDropzoneStyle = (show_image, url) => {
   return {
@@ -17,7 +17,7 @@ const getDropzoneStyle = (show_image, url) => {
 };
 const reload_symbol = String.fromCharCode(8635);
 const ImageDropper = props => (
-  <div className={css(styles.well)}>
+  <Well>
     <Dropzone
       onDrop={props.onFileDropped}
       style={getDropzoneStyle(props.show_image, props.url)}
@@ -28,7 +28,7 @@ const ImageDropper = props => (
               Alternatively specify url to an online image in the url box\
               below and click preview button ${reload_symbol}`}
     </Dropzone>
-  </div>
+  </Well>
 );
 
 ImageDropper.propTypes = {
@@ -37,16 +37,9 @@ ImageDropper.propTypes = {
   onFileDropped: PropTypes.func.isRequired
 };
 
-const styles = StyleSheet.create({
-  image_style: {
-    maxWidth: '200px',
-    maxHeight: '200px'
-  },
-  well: {
-    padding: '10px',
-    paddingBottom: '10px',
-    marginBottom: '0px'
-  }
-});
+const Well = styled.div`
+  padding: 10px;
+  margin-bottom: 0;
+`;
 
 export default ImageDropper;

From b9e671ba665a9428d269c55ea886953274b993c0 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Fri, 21 Dec 2018 11:59:10 +0100
Subject: [PATCH 07/11] Ggetting there 29 files to go

---
 frontend/src/House/HouseFormEdit.js    | 82 ++++++++++++++------------
 frontend/src/House/HouseList.Loader.js | 43 ++++++++------
 2 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/frontend/src/House/HouseFormEdit.js b/frontend/src/House/HouseFormEdit.js
index e6adad3..124fd21 100644
--- a/frontend/src/House/HouseFormEdit.js
+++ b/frontend/src/House/HouseFormEdit.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled, { css } from 'styled-components';
 
 export default class HouseFormEdit extends Component {
   static propTypes = {
@@ -18,75 +18,79 @@ export default class HouseFormEdit extends Component {
   render = () => {
     const { house, onFieldChange, onSubmit } = this.props;
     return (
-      <form action="" className={css(styles.form)}>
-        <label className={css(styles.left_grid)}>Title</label>
-        <input
+      <Form action="">
+        <LeftGridLabel>Title</LeftGridLabel>
+        <RightGridInput
           name="title"
           type="text"
           placeholder="Title"
-          className={css(styles.right_grid)}
           value={house.title}
           onChange={onFieldChange}
         />
 
-        <label className={css(styles.left_grid)}>Street</label>
-        <input
+        <LeftGridLabel>Street</LeftGridLabel>
+        <RightGridInput
           name="location.street"
           type="text"
           placeholder="Street"
-          className={css(styles.right_grid)}
           value={house.location.street}
           onChange={onFieldChange}
         />
 
-        <label className={css(styles.left_grid)}>Post Code</label>
-        <input
+        <LeftGridLabel>Post Code</LeftGridLabel>
+        <RightGridInput
           name="location.postCode"
           type="text"
           placeholder="Post Code"
-          className={css(styles.right_grid)}
           value={house.location.postCode}
           onChange={onFieldChange}
         />
 
-        <label className={css(styles.left_grid)}>Description</label>
-        <textarea
+        <LeftGridLabel>Description</LeftGridLabel>
+        <RightGridTextarea
           name="description"
           rows="6"
           cols="32"
           placeholder="Description"
-          className={css(styles.right_grid)}
           value={house.description}
           onChange={onFieldChange}
         />
 
-        <button
-          className={css(styles.right_grid)}
-          onClick={onSubmit}
-          type="button"
-        >
+        <RightGridButton onClick={onSubmit} type="button">
           Save
-        </button>
-      </form>
+        </RightGridButton>
+      </Form>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  form: {
-    margin: '10px auto',
-    maxWidth: '600px',
-    display: 'grid',
-    alignItems: 'baseline',
-    gridTemplateColumns: '100px 1fr',
-    gridGap: '8px'
-  },
-  left_grid: {
-    lineHeight: '1.5em',
-    textAlign: 'right',
-    gridColumn: '1 / 2'
-  },
-  right_grid: {
-    gridColumn: '2/3'
-  }
-});
+const Form = styled.form`
+  margin: 10px auto;
+  max-width: 600px;
+  display: grid;
+  align-items: baseline;
+  grid-template-columns: 100px 1fr;
+  grid-gap: 8px;
+`;
+
+const LeftGridLabel = styled.label`
+  line-height: 1.5em;
+  text-align: right;
+  grid-column: 1 / 2;
+`;
+
+const SharedRightGrid = css`
+  grid-column: 2 / 3;
+`;
+
+const RightGridButton = styled.button`
+  ${SharedRightGrid};
+`;
+
+const RightGridInput = styled.input`
+  ${SharedRightGrid};
+`;
+
+const RightGridTextarea = styled.textarea`
+  ${SharedRightGrid};
+`;
diff --git a/frontend/src/House/HouseList.Loader.js b/frontend/src/House/HouseList.Loader.js
index a193048..a711cda 100644
--- a/frontend/src/House/HouseList.Loader.js
+++ b/frontend/src/House/HouseList.Loader.js
@@ -1,26 +1,31 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
 import CardLoader from './Card.Loader';
 import IssueListLoader from '../Issue/IssueList.Loader';
+import styled, { css } from 'styled-components';
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    justifyContent: 'space-around'
-  }
-});
-const dummy = [0, 0, 0];
-const items = dummy.map((d, i) => {
-  const style = { opacity: `${1 - i * 0.4}` };
-  return (
-    <div className={css(styles.container)} style={style} key={i}>
-      <CardLoader />
-      <IssueListLoader />
-      <IssueListLoader />
-    </div>
-  );
-});
+const DUMMYARRAY = [0, 0, 0];
 
-const HouseListLoader = () => <div>{items}</div>;
+const HouseListLoader = () => (
+  <div>
+    {DUMMYARRAY.map((d, i) => (
+      <Container i={i} key={i}>
+        <CardLoader />
+        <IssueListLoader />
+        <IssueListLoader />
+      </Container>
+    ))}
+  </div>
+);
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+
+  ${props =>
+    props.i &&
+    css`
+      opactiy: ${1 - props.i * 0.4};
+    `};
+`;
 
 export default HouseListLoader;

From 55988935e03f7d92f31baf1e59dbc9a2502e4ec6 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Fri, 21 Dec 2018 12:20:27 +0100
Subject: [PATCH 08/11] Working on the refactor

---
 frontend/src/House/HouseWithUpdateButtons.js | 50 ++++++++++----------
 frontend/src/Image/ImageDefault.js           | 27 ++++-------
 frontend/src/Image/ImageListRemovable.js     | 20 ++++----
 frontend/src/Image/ImageRemovable.js         | 43 ++++++++---------
 web/routes/auth/index.js                     |  1 -
 5 files changed, 61 insertions(+), 80 deletions(-)

diff --git a/frontend/src/House/HouseWithUpdateButtons.js b/frontend/src/House/HouseWithUpdateButtons.js
index 5198347..9e95ee7 100644
--- a/frontend/src/House/HouseWithUpdateButtons.js
+++ b/frontend/src/House/HouseWithUpdateButtons.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Card from './Card';
-import { StyleSheet, css } from 'aphrodite';
 import { CrossButton, PlusButton } from '../Common/Buttons';
+import styled from 'styled-components';
 
 export default class House extends Component {
   static propTypes = {
@@ -25,34 +25,34 @@ export default class House extends Component {
   render = () => {
     const { house } = this.props;
     return (
-      <div className={css(styles.wrapper)} onClick={this.onEditHouse}>
+      <Wrapper onClick={this.onEditHouse}>
         <Card house={house} />
-        <div className={css(styles.add_issue_style)}>
+        <AddIssue>
           <PlusButton title="Add Issue" onClick={this.onNewIssue} />
-        </div>
-        <div className={css(styles.close_button)}>
+        </AddIssue>
+        <CloseButton>
           <CrossButton title="Delete House" onClick={this.onDeleteHouse} />
-        </div>
-      </div>
+        </CloseButton>
+      </Wrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-around'
-  },
-  close_button: {
-    position: 'absolute',
-    top: '0px',
-    right: '0px'
-  },
-  add_issue_style: {
-    position: 'absolute',
-    top: '30px',
-    right: 0
-  }
-});
+const Wrapper = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-around;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+const AddIssue = styled.div`
+  position: absolute;
+  top: 30px;
+  right: 0;
+`;
diff --git a/frontend/src/Image/ImageDefault.js b/frontend/src/Image/ImageDefault.js
index 4c601ef..6cb0181 100644
--- a/frontend/src/Image/ImageDefault.js
+++ b/frontend/src/Image/ImageDefault.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
 import ImageRef from './ImageRef';
+import styled from 'styled-components';
 
 class ImageDefault extends React.Component {
   static propTypes = {
@@ -61,30 +61,19 @@ class ImageDefault extends React.Component {
     return (
       <div>
         {image_error ? (
-          <img
-            className={css(styles.image)}
-            src={encodeURI(missing_url)}
-            alt="missing"
-          />
+          <Image src={encodeURI(missing_url)} alt="missing" />
         ) : (
-          <img
-            className={css(styles.image)}
-            src={image_src}
-            alt="noimage"
-            onError={this.onImageError}
-          />
+          <Image src={image_src} alt="noimage" onError={this.onImageError} />
         )}
       </div>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  image: {
-    borderRadius: '4px 4px 0 0',
-    width: '100%',
-    padding: '0'
-  }
-});
+const Image = styled.img`
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  padding: 0;
+`;
 
 export default ImageDefault;
diff --git a/frontend/src/Image/ImageListRemovable.js b/frontend/src/Image/ImageListRemovable.js
index 3ece045..09b3b55 100644
--- a/frontend/src/Image/ImageListRemovable.js
+++ b/frontend/src/Image/ImageListRemovable.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImageRemovable from './ImageRemovable';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 export default class ImageListRemovable extends React.Component {
   static propTypes = {
@@ -23,16 +23,14 @@ export default class ImageListRemovable extends React.Component {
         <ImageRemovable src={src} key={src} removeImage={this.removeImage} />
       );
     });
-    return <div className={css(styles.wrapper)}>{image_list}</div>;
+    return <Wrapper>{image_list}</Wrapper>;
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexWrap: 'wrap',
-    margin: '10px'
-  }
-});
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 10px;
+`;
diff --git a/frontend/src/Image/ImageRemovable.js b/frontend/src/Image/ImageRemovable.js
index f81f96b..425555c 100644
--- a/frontend/src/Image/ImageRemovable.js
+++ b/frontend/src/Image/ImageRemovable.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImageDefault from './ImageDefault';
-import { StyleSheet, css } from 'aphrodite';
 import { CrossButton } from '../Common/Buttons';
+import styled from 'styled-components';
 
 export default class ImageRemovable extends React.Component {
   static propTypes = {
@@ -15,35 +15,30 @@ export default class ImageRemovable extends React.Component {
   render = () => {
     const { src } = this.props;
     return (
-      <div className={css(styles.wrapper)}>
-        <div className={css(styles.close_button)}>
+      <Wrapper>
+        <CrossStyle>
           <CrossButton onClick={this.onRemove} title="Remove Image" />
-        </div>
+        </CrossStyle>
         <ImageDefault
           src={src}
           missing_url="//via.placeholder.com/200x200?No Image"
         />
-      </div>
+      </Wrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-    padding: '0px 20px',
-    border: '2px solid darkgrey',
-    borderRadius: '10px',
-    boxShadow: '0px 0px 8px 0 #ccc',
-    background: 'lightgrey',
-    maxWidth: '220px'
-  },
-  cross_box_colour: {
-    background: 'tomato' // "linear-gradient( to top, #49CF87, #40C080)"
-  },
-  close_button: {
-    position: 'absolute',
-    top: '0px',
-    right: '0px'
-  }
-});
+const Wrapper = styled.div`
+  position: relative;
+  padding: 0 20px;
+  border: 2px solid darkgrey;
+  border-radius: 10px;
+  box-shadow: 0 0 8px 0 #ccc;
+  background: lightgrey;
+  max-width: 220px;
+`;
+
+// "linear-gradient( to top, #49CF87, #40C080)"
+const CrossStyle = styled.div`
+  background: tomato;
+`;
diff --git a/web/routes/auth/index.js b/web/routes/auth/index.js
index 7b22df1..ac2c5ec 100644
--- a/web/routes/auth/index.js
+++ b/web/routes/auth/index.js
@@ -11,7 +11,6 @@ function init() {
   });
 
   passport.deserializeUser(function(user, done) {
-    console.log('DeSerialize', user);
     done(null, user);
   });
 

From 1f06c663a58a82804da835134bdf1630b3ed571c Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Fri, 21 Dec 2018 12:59:18 +0100
Subject: [PATCH 09/11] 20 files to go

---
 frontend/src/Issue/Issue.js             | 22 +++---
 frontend/src/Issue/IssueList.Loader.js  | 94 ++++++++++++++-----------
 frontend/src/Search/AutoCompleteList.js | 42 ++++++-----
 3 files changed, 83 insertions(+), 75 deletions(-)

diff --git a/frontend/src/Issue/Issue.js b/frontend/src/Issue/Issue.js
index ca358ad..ca7b12b 100644
--- a/frontend/src/Issue/Issue.js
+++ b/frontend/src/Issue/Issue.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import IssueForm from './IssueForm';
 import { ImageBlock, ImageListRemovable } from '../Image';
 import { issueFetchData, issueSaveData, issueReset } from './actions';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 class Issue extends Component {
   static propTypes = {
@@ -87,7 +87,7 @@ class Issue extends Component {
       display: hasErrored ? 'block' : 'none'
     };
     return (
-      <div className={css(styles.wrapper)}>
+      <Wrapper>
         <h1>Issue ({op_type})</h1>
         <div style={show_error}>{errorMessage}</div>
         <IssueForm
@@ -100,11 +100,18 @@ class Issue extends Component {
           images={issue.images || []}
           removeImage={this.removeImage}
         />
-      </div>
+      </Wrapper>
     );
   }
 }
 
+const Wrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const mapStateToProps = state => {
   return {
     issue: state.issue.issue,
@@ -127,12 +134,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Issue);
-
-const styles = StyleSheet.create({
-  wrapper: {
-    display: 'flex',
-    flex: '1',
-    flexDirection: 'column',
-    alignItems: 'center'
-  }
-});
diff --git a/frontend/src/Issue/IssueList.Loader.js b/frontend/src/Issue/IssueList.Loader.js
index 86eca40..c380cad 100644
--- a/frontend/src/Issue/IssueList.Loader.js
+++ b/frontend/src/Issue/IssueList.Loader.js
@@ -1,48 +1,60 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import styled, { css } from 'styled-components';
 
 const IssueListLoader = () => (
-  <div className={css(styles.column_wrapper)}>
-    <div className={css(styles.title)} />
-    <ul className={css(styles.list)}>
-      <li className={css(styles.li)} />
-      <li className={css(styles.li)} style={{ opacity: '0.6' }} />
-      <li className={css(styles.li)} style={{ opacity: '0.2' }} />
-    </ul>
-  </div>
+  <Wrapper>
+    <Title />
+    <List>
+      <Item />
+      <Item stronger />
+      <Item weak />
+    </List>
+  </Wrapper>
 );
 
-const styles = StyleSheet.create({
-  column_wrapper: {
-    margin: '10px',
-    padding: '1em 0px',
-    width: '30%',
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    boxShadow: '0px 0px 5px 2px rgba(0, 0, 0, 0.19)',
-    background: 'lightgrey'
-  },
-  list: {
-    width: '90%',
-    margin: '0.5rem',
-    padding: 0
-  },
-  li: {
-    margin: '5px',
-    padding: 0,
-    listStyle: 'none',
-    height: '1.5rem',
-    background: 'grey',
-    borderRadius: '5px'
-  },
-  title: {
-    width: '40%',
-    height: '1.5rem',
-    background: 'grey',
-    borderRadius: '5px'
-  }
-});
+const Wrapper = styled.div`
+  margin: 10px;
+  padding: 1em 0;
+  width: 30%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.19);
+`;
+
+const List = styled.ul`
+  width: 90%;
+  margin: 0.5rem;
+  padding: 0;
+`;
+
+const Item = styled.li`
+  margin: 5px;
+  padding: 0;
+  list-style: none;
+  height: 1.5rem;
+  background: grey;
+  border-radius: 5px;
+
+  ${props =>
+    props.weaker &&
+    css`
+      opacity: 0.2;
+    `};
+
+  ${props =>
+    props.stronger &&
+    css`
+      opacity: 0.6;
+    `};
+`;
+
+const Title = styled.div`
+  width: 40%;
+  height: 1.5rem;
+  background: grey;
+  border-radius: 5px;
+`;
 
 export default IssueListLoader;
diff --git a/frontend/src/Search/AutoCompleteList.js b/frontend/src/Search/AutoCompleteList.js
index 2d9ca94..729a973 100644
--- a/frontend/src/Search/AutoCompleteList.js
+++ b/frontend/src/Search/AutoCompleteList.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, StyleSheet } from 'aphrodite';
 import AutoCompleteItem from './AutoCompleteItem';
+import styled from 'styled-components';
 
 const AutoCompleteList = ({ items = [] }) => {
   const listItems = items.map((item, idx) => (
     <AutoCompleteItem key={idx} {...item} />
   ));
   return (
-    <div className={css(styles.wrapper)}>
-      <ul className={css(styles.list)}>{listItems}</ul>
-    </div>
+    <Wrapper>
+      <List>{listItems}</List>
+    </Wrapper>
   );
 };
 
@@ -18,23 +18,21 @@ AutoCompleteList.propTypes = {
   items: PropTypes.array
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    top: '290px',
-    zIndex: '1000'
-  },
-  list: {
-    background: '#fff',
-    margin: 0,
-    padding: 0,
-    position: 'relative',
-    width: '280px',
-    listStyle: 'none',
-    maxHeight: '300px',
-    'overflow-y': 'scroll',
-    'overflow-x': 'hidden'
-  }
-});
+const Wrapper = styled.div`
+  position: absolute;
+  top: 290px;
+  z-index: 1000;
+`;
+
+const List = styled.ul`
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 280px;
+  list-style: none;
+  max-height: 300px;
+  overflow-x: hidden;
+`;
 
 export default AutoCompleteList;

From c82ab783f6208a8f76ab30d6e95a97b009efc126 Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Fri, 21 Dec 2018 13:15:33 +0100
Subject: [PATCH 10/11] Done the navbar

---
 frontend/src/Navbar/index.js | 123 ++++++++++++++++-------------------
 1 file changed, 55 insertions(+), 68 deletions(-)

diff --git a/frontend/src/Navbar/index.js b/frontend/src/Navbar/index.js
index dd73b04..e0b5c0c 100644
--- a/frontend/src/Navbar/index.js
+++ b/frontend/src/Navbar/index.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { StyleSheet, css } from 'aphrodite';
 import { connect } from 'react-redux';
 import isEmpty from 'lodash/isEmpty';
+import styled from 'styled-components';
 
 class Navbar extends Component {
   static propTypes = {
@@ -19,33 +19,25 @@ class Navbar extends Component {
       const { name } = currentUser;
       return (
         <div>
-          <ul className={css(styles.container)}>
-            <li className={css(styles.titleelement)}>
-              <Link className={css(styles.links)} to="/">
-                Hissues
-              </Link>
-            </li>
-            <li className={css(styles.titleelement)}>
-              <Link className={css(styles.links)} to="/dashboard">
-                Dashboard
-              </Link>
-            </li>
-            <li className={css(styles.titleelement)}>
-              <Link className={css(styles.links)} to="/profile">
-                Profile
-              </Link>
-            </li>
-            <li className={css(styles.navelement)}>
-              <Link className={css(styles.links)} to="/logout">
-                Logout
-              </Link>
-            </li>
-            <li className={css(styles.navelement)}>
-              <span className={css(styles.links)}>Hi {name}</span>
-            </li>
-          </ul>
+          <Container>
+            <Titleelement>
+              <Links to="/">Hissues</Links>
+            </Titleelement>
+            <Titleelement>
+              <Links to="/dashboard">Dashboard</Links>
+            </Titleelement>
+            <Titleelement>
+              <Links to="/profile">Profile</Links>
+            </Titleelement>
+            <Navelement>
+              <Links to="/logout">Logout</Links>
+            </Navelement>
+          </Container>
         </div>
       );
+      // <Navelement> // I don't like this here.....?
+      //   <span className={css(styles.links)}>Hi {name}</span>
+      // </Navelement>
       // can't get these to work with redux. problem is inital state on new page
       // <li className={css(styles.navelement)}><Link className={css(styles.links)} to="/newissue">New Issue</Link></li>
       // <li className={css(styles.navelement)}>
@@ -60,54 +52,49 @@ class Navbar extends Component {
       // not authenticated
       return (
         <div>
-          <ul className={css(styles.container)}>
-            <li className={css(styles.titleelement)}>
-              <Link className={css(styles.links)} to="/">
-                Hissues
-              </Link>
-            </li>
-            <li className={css(styles.navelement)}>
-              <Link className={css(styles.links)} to="/login">
-                Login
-              </Link>
-            </li>
-            <li className={css(styles.navelement)}>
-              <Link className={css(styles.links)} to="/register">
-                Register
-              </Link>
-            </li>
-          </ul>
+          <Container>
+            <Titleelement>
+              <Links to="/">Hissues</Links>
+            </Titleelement>
+            <Navelement>
+              <Links to="/login">Login</Links>
+            </Navelement>
+            <Navelement>
+              <Links to="/register">Register</Links>
+            </Navelement>
+          </Container>
         </div>
       );
     }
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    listStyleType: 'none',
-    margin: 0,
-    fontSize: '1.1rem',
-    padding: '0.8rem 1rem',
-    overflow: 'hidden',
-    backgroundColor: '#333',
-    background: 'linear-gradient(to right, rgba(107,183,86,0.95), #008f68)'
-  },
-  navelement: {
-    float: 'right'
-  },
-  titleelement: {
-    float: 'left'
-  },
-  links: {
-    display: 'block',
-    color: 'white',
-    textAlign: 'center',
-    padding: '14px 16px',
-    textDecoration: 'none',
-    cursor: 'pointer'
-  }
-});
+const Container = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  font-size: 1.1rem;
+  padding: 0.8rem 1rem;
+  overflow: hidden;
+  background-color: #333;
+  background: linear-gradient(to right, rgba(107, 183, 96, 0.95), #008f68);
+`;
+
+const Navelement = styled.li`
+  float: right;
+`;
+
+const Titleelement = styled.li`
+  float: left;
+`;
+
+const Links = styled(Link)`
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  cursor: pointer;
+`;
 
 const mapStateToProps = state => ({
   currentUser: state.userReducer.user

From 132f94c72964f01a13caf007a7029349afd0c1cf Mon Sep 17 00:00:00 2001
From: mortuie <jimmybob-leon@hotmail.co.uk>
Date: Sat, 22 Dec 2018 00:19:19 +0100
Subject: [PATCH 11/11] Finished the migration away from aphrodite dayummmmm

---
 frontend/package.json                       |   1 -
 frontend/src/Issue/IssueForm.js             | 110 +++++------
 frontend/src/Issue/IssueList.js             |  46 ++---
 frontend/src/Navbar/index.js                |   2 +-
 frontend/src/Profile/Avatar.Loader.js       |  46 ++---
 frontend/src/Profile/Detail.Loader.js       | 100 +++++-----
 frontend/src/Profile/Detail.js              |  62 +++---
 frontend/src/Profile/Profile.Loader.js      |  60 +++---
 frontend/src/Profile/Profile.js             |  94 ++++-----
 frontend/src/Rating/Bar.js                  |  74 +++----
 frontend/src/Rating/Overview.js             |  42 ++--
 frontend/src/Rating/Rating.js               |  27 ++-
 frontend/src/Search/AutoCompleteItem.js     |  31 ++-
 frontend/src/Search/AutoCompleteList.js     |   4 +-
 frontend/src/Search/Background.js           |  21 +-
 frontend/src/Search/HouseItem.js            |  71 +++----
 frontend/src/Search/SearchPage.js           | 208 ++++++++++----------
 frontend/src/Search/SearchResults.Loader.js |  49 ++---
 frontend/src/Search/SearchResults.js        |  35 ++--
 frontend/src/Search/SubmitInput.js          |  43 ++--
 frontend/src/Uploader/Uploader.js           |  41 ++--
 frontend/src/Uploader/styles.js             |  31 ---
 22 files changed, 562 insertions(+), 636 deletions(-)
 delete mode 100644 frontend/src/Uploader/styles.js

diff --git a/frontend/package.json b/frontend/package.json
index a613edb..e1b91e8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "proxy": "http://localhost:3001/",
   "dependencies": {
-    "aphrodite": "^1.2.5",
     "axios": "^0.17.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.0",
diff --git a/frontend/src/Issue/IssueForm.js b/frontend/src/Issue/IssueForm.js
index 5d12581..a89b170 100644
--- a/frontend/src/Issue/IssueForm.js
+++ b/frontend/src/Issue/IssueForm.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled, { css } from 'styled-components';
 
 export default class IssueForm extends React.Component {
   static propTypes = {
@@ -11,42 +11,34 @@ export default class IssueForm extends React.Component {
   render() {
     const { issue, onFieldChange, onSubmit } = this.props;
     return (
-      <form action="" className={css(styles.form)}>
-        <label className={css(styles.left_grid)}>Issue</label>
-        <input
+      <Form action="">
+        <LeftGrid>Issue</LeftGrid>
+        <RightGridInput
           name="title"
           type="text"
           placeholder="Title"
-          className={css(styles.right_grid)}
           value={issue.title}
           onChange={onFieldChange}
         />
 
-        <label className={css(styles.left_grid)}>Type</label>
-        <select
-          className={css([styles.right_grid, styles.select_style])}
-          name="type"
-          value={issue.type}
-          onChange={onFieldChange}
-        >
+        <LeftGrid>Type</LeftGrid>
+        <SelectStyle name="type" value={issue.type} onChange={onFieldChange}>
           <option value="a">type a</option>
           <option value="b">type b</option>
-        </select>
+        </SelectStyle>
 
-        <label className={css(styles.left_grid)}>Priority</label>
-        <select
-          className={css([styles.right_grid, styles.select_style])}
+        <LeftGrid>Priority</LeftGrid>
+        <SelectStyle
           name="priority"
           value={issue.priority}
           onChange={onFieldChange}
         >
           <option value="1">1</option>
           <option value="2">2</option>
-        </select>
+        </SelectStyle>
 
-        <label className={css(styles.left_grid)}>Status</label>
-        <select
-          className={css([styles.right_grid, styles.select_style])}
+        <LeftGrid>Status</LeftGrid>
+        <SelectStyle
           name="status"
           value={issue.status}
           onChange={onFieldChange}
@@ -54,9 +46,9 @@ export default class IssueForm extends React.Component {
           <option value="open">Open</option>
           <option value="resolved">Resolved</option>
           <option value="closed">Closed</option>
-        </select>
+        </SelectStyle>
 
-        <label className={css(styles.left_grid)}>Description</label>
+        <LeftGrid>Description</LeftGrid>
         <textarea
           name="description"
           rows="6"
@@ -65,44 +57,46 @@ export default class IssueForm extends React.Component {
           value={issue.description}
           onChange={onFieldChange}
         />
-
-        <button
-          className={css(styles.right_grid)}
-          onClick={onSubmit}
-          type="button"
-        >
+        <RightGridButton onClick={onSubmit} type="button">
           Save
-        </button>
-      </form>
+        </RightGridButton>
+      </Form>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  select_style: {
-    width: '120px',
-    height: '2em',
-    borderRadius: '3px',
-    overflow: 'hidden',
-    background: 'white'
-  },
-  title: {
-    textAlign: 'center'
-  },
-  form: {
-    margin: '10px auto',
-    maxWidth: '600px',
-    display: 'grid',
-    alignItems: 'baseline',
-    gridTemplateColumns: '100px 1fr',
-    gridGap: '8px'
-  },
-  left_grid: {
-    lineHeight: '1.5em',
-    textAlign: 'right',
-    gridColumn: '1 / 2'
-  },
-  right_grid: {
-    gridColumn: '2/3'
-  }
-});
+const RightGrid = css`
+  grid-column: 2 / 3;
+`;
+
+const SelectStyle = styled.select`
+  width: 120px;
+  height: 2em;
+  border-radius: 3px;
+  overflow: hidden;
+  background: white;
+  ${RightGrid};
+`;
+
+const Form = styled.form`
+  margin: 10px auto;
+  max-width: 600px;
+  display: grid;
+  align-items: baseline;
+  grid-template-columns: 100px 1fr;
+  grid-gap: 8px;
+`;
+
+const LeftGrid = styled.label`
+  line-height: 1.5em;
+  text-align: right;
+  grid-column: 1 / 2;
+`;
+
+const RightGridButton = styled.button`
+  ${RightGrid};
+`;
+
+const RightGridInput = styled.input`
+  ${RightGrid};
+`;
diff --git a/frontend/src/Issue/IssueList.js b/frontend/src/Issue/IssueList.js
index 96ac5de..693e7ce 100644
--- a/frontend/src/Issue/IssueList.js
+++ b/frontend/src/Issue/IssueList.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import IssueItem from './IssueItem';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 export default class IssueList extends Component {
   static propTypes = {
@@ -11,9 +11,9 @@ export default class IssueList extends Component {
   };
   render = () => {
     return (
-      <div className={css(styles.column_wrapper)}>
-        <div className={css(styles.title)}>{this.props.title}</div>
-        <ul className={css(styles.list)}>
+      <ColWrapper>
+        <Title>{this.props.title}</Title>
+        <List>
           {this.props.items.map((item, i) => (
             <IssueItem
               issue={item}
@@ -21,26 +21,26 @@ export default class IssueList extends Component {
               onIssueClick={this.props.onIssueClick}
             />
           ))}
-        </ul>
-      </div>
+        </List>
+      </ColWrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  column_wrapper: {
-    padding: '1em 0px',
-    width: '30%',
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    border: '1px solid lightgrey'
-  },
-  list: {
-    margin: '0.5rem',
-    padding: 0
-  },
-  title: {
-    textAlign: 'center'
-  }
-});
+const ColWrapper = styled.div`
+  padding: 1em 0;
+  width: 30%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  border: 1px solid lightgrey;
+`;
+
+const List = styled.ul`
+  margin: 0.5rem;
+  padding: 0;
+`;
+
+const Title = styled.div`
+  text-align: center;
+`;
diff --git a/frontend/src/Navbar/index.js b/frontend/src/Navbar/index.js
index e0b5c0c..6db6aff 100644
--- a/frontend/src/Navbar/index.js
+++ b/frontend/src/Navbar/index.js
@@ -16,7 +16,7 @@ class Navbar extends Component {
 
     if (loggedIn) {
       // authenticated
-      const { name } = currentUser;
+      // const { name } = currentUser;
       return (
         <div>
           <Container>
diff --git a/frontend/src/Profile/Avatar.Loader.js b/frontend/src/Profile/Avatar.Loader.js
index 2229ac4..19d4ded 100644
--- a/frontend/src/Profile/Avatar.Loader.js
+++ b/frontend/src/Profile/Avatar.Loader.js
@@ -1,30 +1,30 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const AvatarLoader = () => (
-  <div className={css(styles.wrapper)}>
-    <div className={css(styles.uploader)} />
-    <div className={css(styles.name)} />
-  </div>
+  <Wrapper>
+    <Uploader />
+    <Name />
+  </Wrapper>
 );
 
-const styles = StyleSheet.create({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: '1'
-  },
-  uploader: {
-    width: '200px',
-    height: '200px',
-    background: 'lightgrey'
-  },
-  name: {
-    margin: '10px',
-    width: '100px',
-    height: '1.2rem',
-    background: 'lightgrey'
-  }
-});
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+const Uploader = styled.div`
+  width: 200px;
+  height: 200px;
+  background: lightgrey;
+`;
+
+const Name = styled.div`
+  margin: 10px;
+  width: 100px;
+  height: 1.2rem;
+  background: lightgrey;
+`;
 
 export default AvatarLoader;
diff --git a/frontend/src/Profile/Detail.Loader.js b/frontend/src/Profile/Detail.Loader.js
index 0587791..e73aa8e 100644
--- a/frontend/src/Profile/Detail.Loader.js
+++ b/frontend/src/Profile/Detail.Loader.js
@@ -1,56 +1,58 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const Detail = () => (
-  <div className={css(styles.wrapper)}>
-    <label className={css(styles.left_grid)}>
-      <div className={css(styles.label)} />
-    </label>
-    <div className={css(styles.right_grid)}>
-      <div className={css(styles.item)} />
-    </div>
-    <label className={css(styles.left_grid)}>
-      <div className={css(styles.label)} />
-    </label>
-    <div className={css(styles.right_grid)}>
-      <div className={css(styles.item)} />
-    </div>
-  </div>
+  <Wrapper>
+    <LeftGrid>
+      <Label />
+    </LeftGrid>
+    <RightGrid>
+      <Item />
+    </RightGrid>
+    <LeftGrid>
+      <Label />
+    </LeftGrid>
+    <RightGrid>
+      <Item />
+    </RightGrid>
+  </Wrapper>
 );
 
-const styles = StyleSheet.create({
-  label: {
-    width: '100px',
-    height: '2rem',
-    background: 'grey',
-    borderRadius: '5px'
-  },
-  item: {
-    width: '200px',
-    height: '2rem',
-    background: 'grey',
-    borderRadius: '5px'
-  },
-  wrapper: {
-    margin: '0 2rem',
-    display: 'grid',
-    alignItems: 'baseline',
-    flex: '1',
-    gridTemplateColumns: '1fr 3fr',
-    gridTemplateRows: '2rem 2rem 2rem',
-    gridGap: '8px'
-  },
-  left_grid: {
-    padding: '1rem 0 1rem 0',
-    lineHeight: '1.5em',
-    textAlign: 'right',
-    gridColumn: '1/2',
-    fontWeight: 'bold'
-  },
-  right_grid: {
-    padding: '1rem 0 1rem 0',
-    gridColumn: '2/3'
-  }
-});
+const Wrapper = styled.div`
+  margin: 0 2rem;
+  display: grid;
+  align-items: baseline;
+  flex: 1;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: 2rem 2rem 2rem;
+  grid-gap: 8px;
+`;
+
+const Item = styled.div`
+  width: 200px;
+  height: 2rem;
+  background: grey;
+  border-radius: 5px;
+`;
+
+const Label = styled.div`
+  width: 100px;
+  height: 2rem;
+  background: grey;
+  border-radius: 5px;
+`;
+
+const RightGrid = styled.div`
+  padding: 1rem 0 1rem 0;
+  grid-column: 2 / 3;
+`;
+
+const LeftGrid = styled.label`
+  padding: 1rem 0 1rem 0;
+  line-height: 1.5em;
+  text-align: right;
+  grid-column: 1 / 2;
+  font-weight: bold;
+`;
 
 export default Detail;
diff --git a/frontend/src/Profile/Detail.js b/frontend/src/Profile/Detail.js
index 7a0ad2a..14bcf21 100644
--- a/frontend/src/Profile/Detail.js
+++ b/frontend/src/Profile/Detail.js
@@ -1,26 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const Detail = ({ data, localUser, onFieldChange }) => (
-  <div className={css(styles.wrapper)}>
-    <label className={css(styles.left_grid)}>Name</label>
-    <div className={css(styles.right_grid)}>
+  <Wrapper>
+    <LeftGrid>Name</LeftGrid>
+    <RightGrid>
       {localUser ? (
         <input name="name" value={data.name} onChange={onFieldChange} />
       ) : (
         data.name
       )}
-    </div>
-    <label className={css(styles.left_grid)}>Email</label>
-    <div className={css(styles.right_grid)}>
+    </RightGrid>
+    <LeftGrid>Email</LeftGrid>
+    <RightGrid>
       {localUser ? (
         <input name="email" value={data.email} onChange={onFieldChange} />
       ) : (
         data.email
       )}
-    </div>
-  </div>
+    </RightGrid>
+  </Wrapper>
 );
 
 Detail.propTypes = {
@@ -29,27 +29,27 @@ Detail.propTypes = {
   onFieldChange: PropTypes.func.isRequired
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    margin: '0 2rem',
-    display: 'grid',
-    alignItems: 'baseline',
-    flex: '1',
-    gridTemplateColumns: '1fr 3fr',
-    gridTemplateRows: '2rem 2rem 2rem',
-    gridGap: '8px'
-  },
-  left_grid: {
-    padding: '1rem 0 1rem 0',
-    lineHeight: '1.5em',
-    textAlign: 'right',
-    gridColumn: '1/2',
-    fontWeight: 'bold'
-  },
-  right_grid: {
-    padding: '1rem 0 1rem 0',
-    gridColumn: '2/3'
-  }
-});
+const Wrapper = styled.div`
+  margin: 0 2rem;
+  display: grid;
+  align-items: baseline;
+  flex: 1;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: 2rem 2rem 2rem;
+  grid-gap: 8px;
+`;
+
+const LeftGrid = styled.label`
+  padding: 1rem 0 1rem 0;
+  line-height: 1.5rem;
+  text-align: right;
+  grid-column: 1 / 2;
+  font-weight: bold;
+`;
+
+const RightGrid = styled.div`
+  padding: 1rem 0 1rem 0;
+  grid-column: 2 / 3;
+`;
 
 export default Detail;
diff --git a/frontend/src/Profile/Profile.Loader.js b/frontend/src/Profile/Profile.Loader.js
index 637db2e..3f51e64 100644
--- a/frontend/src/Profile/Profile.Loader.js
+++ b/frontend/src/Profile/Profile.Loader.js
@@ -1,41 +1,41 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
 import AvatarLoader from './Avatar.Loader';
 import DetailLoader from './Detail.Loader';
+import styled from 'styled-components';
 
 const ProfileLoader = () => (
-  <div className={css(styles.container)}>
-    <span className={css(styles.h1)}>Profile</span>
-    <div className={css(styles.wrapper)}>
+  <Container>
+    <Header>Profile</Header>
+    <Wrapper>
       <AvatarLoader />
       <DetailLoader />
-    </div>
-  </div>
+    </Wrapper>
+  </Container>
 );
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: '1',
-    alignItems: 'center'
-  },
-  h1: {
-    marginTop: '1rem',
-    fontSize: '2rem',
-    fontWeight: 'bold',
-    textAlign: 'center'
-  },
-  wrapper: {
-    margin: '1rem',
-    padding: '1rem',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    border: '1px solid lightgrey',
-    borderRadius: '10px',
-    boxShadow: 'rgba(0, 0, 0, 0.19) 0 0 8px 0'
-  }
-});
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+`;
+
+const Header = styled.span`
+  margin-top: 1rem;
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+`;
+
+const Wrapper = styled.div`
+  margin: 1rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
+`;
 
 export default ProfileLoader;
diff --git a/frontend/src/Profile/Profile.js b/frontend/src/Profile/Profile.js
index 0062c3a..a55a2aa 100644
--- a/frontend/src/Profile/Profile.js
+++ b/frontend/src/Profile/Profile.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { StyleSheet, css } from 'aphrodite';
 import Avatar from './Avatar';
 import Detail from './Detail';
 import ProfileLoader from './Profile.Loader';
 import { getDetail, profileSave } from '../User/userActions';
 import { ImageRef } from '../Image';
+import styled, { css } from 'styled-components';
 
 class Profile extends React.Component {
   static propTypes = {
@@ -74,24 +74,16 @@ class Profile extends React.Component {
     if (isWorking) {
       return <ProfileLoader />;
     }
-    const show_message = {
-      color: 'tomato',
-      display: message ? 'block' : 'none'
-    };
     return (
-      <div className={css(styles.container)}>
-        <span className={css(styles.h1)}>Profile</span>
-        <div style={show_message}>{message}</div>
+      <Container>
+        <Header>Profile</Header>
+        <Message message={message}>{message}</Message>
         {local_user ? (
-          <button
-            type="button"
-            className={css(styles.save_width)}
-            onClick={this.save}
-          >
+          <SaveWidth type="button" onClick={this.save}>
             Save
-          </button>
+          </SaveWidth>
         ) : null}
-        <div className={css(styles.wrapper)}>
+        <Wrapper>
           <Avatar
             name={user.name}
             image={avatar_src}
@@ -103,12 +95,52 @@ class Profile extends React.Component {
             localUser={local_user}
             onFieldChange={this.onFieldChange}
           />
-        </div>
-      </div>
+        </Wrapper>
+      </Container>
     );
   };
 }
 
+const Message = styled.div`
+  color: tomato;
+  display: none;
+
+  ${props =>
+    props.message &&
+    css`
+      display: block;
+    `};
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+`;
+
+const Header = styled.span`
+  margin-top: 1rem;
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+`;
+
+const Wrapper = styled.div`
+  margin: 1rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
+`;
+
+const SaveWidth = styled.button`
+  width: 100px;
+`;
+
 const mapStateToProps = state => {
   return {
     user: state.userReducer.user,
@@ -127,31 +159,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Profile);
-
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: '1',
-    alignItems: 'center'
-  },
-  h1: {
-    marginTop: '1rem',
-    fontSize: '2rem',
-    fontWeight: 'bold',
-    textAlign: 'center'
-  },
-  wrapper: {
-    margin: '1rem',
-    padding: '1rem',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    border: '1px solid lightgrey',
-    borderRadius: '10px',
-    boxShadow: 'rgba(0, 0, 0, 0.19) 0 0 8px 0'
-  },
-  save_width: {
-    width: '100px'
-  }
-});
diff --git a/frontend/src/Rating/Bar.js b/frontend/src/Rating/Bar.js
index dea2a40..addc191 100644
--- a/frontend/src/Rating/Bar.js
+++ b/frontend/src/Rating/Bar.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
 import Star from './Star';
+import styled, { css } from 'styled-components';
 
 export default class Bar extends Component {
   static propTypes = {
@@ -29,55 +29,37 @@ export default class Bar extends Component {
     const { stars } = this.state;
     const { visible, onEnter, onSelected } = this.props;
     return (
-      <div
-        className={css(styles.wrapper)}
-        style={{ display: visible ? 'block' : 'none' }}
+      <Wrapper
+        visible={visible}
         onMouseEnter={onEnter}
         onMouseLeave={this.onLeaveBar}
       >
-        <Star
-          selected={onSelected}
-          lit={stars[0]}
-          ratingValue={1}
-          onEnter={this.onEnter}
-        />
-        <Star
-          selected={onSelected}
-          lit={stars[1]}
-          ratingValue={2}
-          onEnter={this.onEnter}
-        />
-        <Star
-          selected={onSelected}
-          lit={stars[2]}
-          ratingValue={3}
-          onEnter={this.onEnter}
-        />
-        <Star
-          selected={onSelected}
-          lit={stars[3]}
-          ratingValue={4}
-          onEnter={this.onEnter}
-        />
-        <Star
-          selected={onSelected}
-          lit={stars[4]}
-          ratingValue={5}
-          onEnter={this.onEnter}
-        />
-      </div>
+        {[0, 1, 2, 3, 4].map(x => (
+          <Star
+            selected={onSelected}
+            lit={stars[x]}
+            ratingValue={x + 1}
+            onEnter={this.onEnter}
+          />
+        ))}
+      </Wrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    zIndex: '100',
-    top: '0.6rem',
-    right: '2.1rem',
-    backgroundColor: 'rgba( 171, 197, 90, 0.85)',
-    borderRadius: '10px 0px 0px 10px',
-    fontSize: '1.5rem'
-  }
-});
+const Wrapper = styled.div`
+  position: absolute;
+  z-index: 100;
+  top: 0.6rem;
+  right: 2.1rem;
+  background-color: rgba(171, 197, 90, 0.85);
+  border-radius: 10px 0 0 10px;
+  font-size: 1.5rem;
+  display: none;
+
+  ${props =>
+    props.visible &&
+    css`
+      display: block;
+    `};
+`;
diff --git a/frontend/src/Rating/Overview.js b/frontend/src/Rating/Overview.js
index 7557ef1..f787496 100644
--- a/frontend/src/Rating/Overview.js
+++ b/frontend/src/Rating/Overview.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 const filled_star = String.fromCharCode(9733);
 
@@ -9,16 +9,15 @@ const clicked = e => {
 };
 
 const Overview = props => (
-  <div
+  <Star
     title={`Overall:${props.value}`}
-    className={css(styles.stars)}
     onClick={clicked}
     onMouseEnter={props.onEnter}
     onMouseLeave={props.onLeave}
   >
     {filled_star}
-    <div className={css(styles.rating_value)}>{Math.round(props.value)}</div>
-  </div>
+    <Rating>{Math.round(props.value)}</Rating>
+  </Star>
 );
 
 Overview.propTypes = {
@@ -27,22 +26,21 @@ Overview.propTypes = {
   onLeave: PropTypes.func.isRequired
 };
 
-const styles = StyleSheet.create({
-  stars: {
-    position: 'relative',
-    color: 'gold',
-    background: 'transparent',
-    borderRadius: '0px 10px 10px 0px',
-    fontSize: '2.5rem'
-  },
-  rating_value: {
-    position: 'absolute',
-    color: 'rgba( 5,5,5, 0.5)',
-    top: '1rem',
-    left: '0.9rem',
-    fontSize: '0.8rem',
-    fontWeight: 'bold'
-  }
-});
+const Star = styled.div`
+  position: relative;
+  color: gold;
+  background: transparent;
+  border-radius: 0 10px 10px 0;
+  font-size: 2.5rem;
+`;
+
+const Rating = styled.div`
+  position: absolute;
+  color: rgba(5, 5, 5, 0.5);
+  top: 1rem;
+  left: 0.9rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+`;
 
 export default Overview;
diff --git a/frontend/src/Rating/Rating.js b/frontend/src/Rating/Rating.js
index 93c0b29..eb03ae2 100644
--- a/frontend/src/Rating/Rating.js
+++ b/frontend/src/Rating/Rating.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
 import { postRating } from './actions';
-
 import Overview from './Overview';
 import Bar from './Bar';
+import styled from 'styled-components';
 
 export default class Rating extends React.Component {
   static propTypes = {
@@ -34,7 +33,7 @@ export default class Rating extends React.Component {
   render = () => {
     const { show_rating_bar, currentRating } = this.state;
     return (
-      <div className={css(styles.wrapper)}>
+      <Wrapper>
         <Bar
           visible={show_rating_bar}
           onSelected={this.ratingSelected}
@@ -46,19 +45,17 @@ export default class Rating extends React.Component {
           onEnter={this.showRatingBar}
           onLeave={this.hideRatingBar}
         />
-      </div>
+      </Wrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    flex: '1',
-    fontSize: '2rem'
-  }
-});
+const Wrapper = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1;
+  font-size: 2rem;
+`;
diff --git a/frontend/src/Search/AutoCompleteItem.js b/frontend/src/Search/AutoCompleteItem.js
index fb44342..0e1eb1b 100644
--- a/frontend/src/Search/AutoCompleteItem.js
+++ b/frontend/src/Search/AutoCompleteItem.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, StyleSheet } from 'aphrodite';
+import styled from 'styled-components';
 
 const AutoCompleteItem = ({ link, text }) => (
-  <li className={css(styles.li)}>
-    <a className={css(styles.a)} href={link}>
-      {text}
-    </a>
-  </li>
+  <List>
+    <Anchor href={link}>{text}</Anchor>
+  </List>
 );
 
 AutoCompleteItem.propTypes = {
@@ -15,16 +13,15 @@ AutoCompleteItem.propTypes = {
   text: PropTypes.string
 };
 
-const styles = StyleSheet.create({
-  a: {
-    color: 'black',
-    textDecoration: 'none'
-  },
-  li: {
-    background: '#fff',
-    padding: '1rem 1rem',
-    borderBottom: '1px solid #D8D8D8'
-  }
-});
+const Anchor = styled.a`
+  color: black;
+  text-decoration: none;
+`;
+
+const List = styled.li`
+  background: #fff;
+  padding: 1rem 1rem;
+  border-bottom: 1px solid #d8d8d8;
+`;
 
 export default AutoCompleteItem;
diff --git a/frontend/src/Search/AutoCompleteList.js b/frontend/src/Search/AutoCompleteList.js
index 729a973..4594453 100644
--- a/frontend/src/Search/AutoCompleteList.js
+++ b/frontend/src/Search/AutoCompleteList.js
@@ -19,8 +19,8 @@ AutoCompleteList.propTypes = {
 };
 
 const Wrapper = styled.div`
-  position: absolute;
-  top: 290px;
+  position: relative;
+  /* top: 290px; */
   z-index: 1000;
 `;
 
diff --git a/frontend/src/Search/Background.js b/frontend/src/Search/Background.js
index 3451a55..46128bc 100644
--- a/frontend/src/Search/Background.js
+++ b/frontend/src/Search/Background.js
@@ -1,20 +1,19 @@
 import React from 'react';
-import { css, StyleSheet } from 'aphrodite';
+import styled from 'styled-components';
 
 const Background = () => (
-  <img
+  <Image
     src="http://lorempixel.com/1000/600/abstract"
     className={css(styles.img)}
     alt="background"
   />
 );
-export default Background;
 
-const styles = StyleSheet.create({
-  img: {
-    position: 'absolute',
-    width: '100%',
-    top: '0',
-    filter: 'blur(5px)'
-  }
-});
+const Image = styled.img`
+  position: absolute;
+  width: 100%;
+  top: 0;
+  filter: blur(5px);
+`;
+
+export default Background;
diff --git a/frontend/src/Search/HouseItem.js b/frontend/src/Search/HouseItem.js
index 6f1ab4d..28f23c0 100644
--- a/frontend/src/Search/HouseItem.js
+++ b/frontend/src/Search/HouseItem.js
@@ -2,61 +2,54 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ImageDefault } from '../Image';
 import { RatingSummary } from '../Rating';
-import { css, StyleSheet } from 'aphrodite';
+import styled from 'styled-components';
 
 // <h4 style={{margin: '0', padding: '0 3.5%', lineHeight: '1.2'}}>{house.title}</h4>
 const HouseItem = ({ house }) => (
-  <div className={css(styles.container)}>
+  <Container>
     <ImageDefault
       src={house.images[0]}
       missing_url="http://via.placeholder.com/350x150"
     />
-    <span className={css(styles.title)}>
+    <Title>
       <RatingSummary value={house.rating} />
       {house.title}
-    </span>
-    <p className={css(styles.content)}>{house.description}</p>
-  </div>
+    </Title>
+    <Content>{house.description}</Content>
+  </Container>
 );
 
 HouseItem.propTypes = {
   house: PropTypes.object.isRequired
 };
 
-const styles = StyleSheet.create({
-  container: {
-    cursor: 'pointer',
-    background: '#fefff9',
-    boxShadow: 'rgba(0, 0, 0, 0.19) 0 0 8px 0',
-    borderRadius: '4px',
-    color: '#363636',
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '10px',
-    width: '320px'
-  },
-  image: {
-    borderRadius: '4px 4px 0 0',
-    width: '100%',
-    padding: '0'
-  },
-  title: {
-    display: 'flex',
-    alignItems: 'center',
-    fontWeight: 'bold',
+const Container = styled.div`
+  cursor: pointer;
+  background: #fefff9;
+  box-shadow: rgb(0, 0, 0, 0.19) 0 0 8px 0;
+  border-radius: 4px;
+  color: #363636;
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+  width: 320px;
+`;
 
-    margin: '0',
-    padding: '0 2.5%',
-    lineHeight: '1.2',
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  margin: 0;
+  padding: 0 2.5%;
+  line-height: 1.2;
+  background: rgb(157, 187, 63, 0.85);
+  color: white;
+  bottom: 0;
+  width: 100%;
+`;
 
-    background: 'rgba(157, 187, 63, .85)',
-    color: 'white',
-    bottom: '0',
-    width: '100%'
-  },
-  content: {
-    padding: '5% 5% 3% 5%'
-  }
-});
+const Content = styled.p`
+  padding: 5% 5% 3% 5%;
+`;
 
 export default HouseItem;
diff --git a/frontend/src/Search/SearchPage.js b/frontend/src/Search/SearchPage.js
index 4f42391..f7dd114 100644
--- a/frontend/src/Search/SearchPage.js
+++ b/frontend/src/Search/SearchPage.js
@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { StyleSheet, css } from 'aphrodite';
 import styled from 'styled-components';
-
 import SubmitInput from './SubmitInput';
 import Form from './Form';
 import AutoCompleteList from './AutoCompleteList';
@@ -11,34 +9,6 @@ import { searchPostCodes } from './actions';
 import { getSuggestions, getIsFetchingSuggestions } from './reducers';
 import { Footer } from '../Footer';
 
-const FlexCol = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-`;
-
-const Wrapper = styled(FlexCol)`
-  grid-area: content;
-  height: 100%;
-  min-height: 100vh;
-  min-width: 100vw;
-  width: 100%;
-  max-width: 100vw;
-  overflow: hidden;
-`;
-
-const mapStateToProps = state => ({
-  suggestions: getSuggestions(state),
-  isFetching: getIsFetchingSuggestions(state)
-});
-
-const mapDispatchToProps = dispatch => ({
-  onChangePostCode: postCode => {
-    dispatch(searchPostCodes(postCode));
-  }
-});
-
 class SearchPage extends Component {
   static propTypes = {
     history: PropTypes.object,
@@ -73,11 +43,10 @@ class SearchPage extends Component {
 
     return (
       <Wrapper>
-        <header className={css(styles.header)}>
+        <Header>
           <Form onSubmit={this.handleSubmit}>
-            <input
+            <Input
               type="search"
-              className={css(styles.input)}
               placeholder="Enter Postcode"
               ref={c => {
                 this.input = c;
@@ -94,87 +63,118 @@ class SearchPage extends Component {
               text: s.text
             }))}
           />
-        </header>
-        <article className={css(styles.article)}>
-          <h2 className={css(styles.h2)}>Features</h2>
-          <div className={css(styles.content)}>
-            <section className={css(styles.section)}>
-              <h3 className={css(styles.h3)}>Search houses</h3>
+        </Header>
+        <Article>
+          <Header2>Features</Header2>
+          <Content>
+            <Section>
+              <Header3>Search houses</Header3>
               <p>Loren lipsum</p>
-            </section>
-            <section className={css(styles.section)}>
-              <h3 className={css(styles.h3)}>Manage issues</h3>
+            </Section>
+            <Section>
+              <Header3>Manage issues</Header3>
               <p>Loren lipsum</p>
-            </section>
-            <section className={css(styles.section)}>
-              <h3 className={css(styles.h3)}>Track communication</h3>
+            </Section>
+            <Section>
+              <Header3>Track communication</Header3>
               <p>Loren lipsum</p>
-            </section>
-            <section className={css(styles.section)}>
-              <h3 className={css(styles.h3)}>Refer and earn</h3>
+            </Section>
+            <Section>
+              <Header3>Refer and earn</Header3>
               <p>Loren lipsum</p>
-            </section>
-          </div>
-        </article>
+            </Section>
+          </Content>
+        </Article>
         <Footer />
       </Wrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  article: {
-    margin: '0 auto auto',
-    maxWidth: '60rem',
-    padding: '3em 2rem'
-  },
-  h2: {
-    width: '100%',
-    textAlign: 'center',
-    fontWeight: '400',
-    fontSize: '2rem',
-    color: '#ff5a5f'
-  },
-  h3: {
-    display: 'flex',
-    alignItems: 'center',
-    color: '#7d93aa',
-    fontSize: '1.4em',
-    fontWeight: '400',
-    marginBottom: '.75rem',
-    marginTop: '1rem'
-  },
-  section: {
-    width: 'calc(50% - 1rem)',
-    fontSize: '1.1rem'
-  },
-  content: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  header: {
-    backgroundImage:
-      "url('https://images.unsplash.com/photo-1451934403379-ffeff84932da?auto=format&fit=crop&w=1284&q=80')",
-    backgroundPosition: 'center',
-    padding: '8rem 2rem',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%'
-  },
-  input: {
-    border: 0,
-    margin: 0,
-    padding: '10px',
-    background: 'white',
-    lineHeight: '50px',
-    fontSize: '20px',
-    borderRadius: 0,
-    outline: 0,
-    borderRight: '1px solid rgba(0,0,0,0.2)'
+const FlexCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+`;
+
+const Wrapper = styled(FlexCol)`
+  grid-area: content;
+  height: 100%;
+  min-height: 100vh;
+  min-width: 100vw;
+  width: 100%;
+  max-width: 100vw;
+  overflow: hidden;
+`;
+
+const Article = styled.article`
+  margin: 0 auto auto;
+  max-width: 60rem;
+  padding: 3em 2rem;
+`;
+
+const Header2 = styled.h2`
+  width: 100%;
+  text-align: center;
+  font-weight: 400;
+  font-size: 2rem;
+  color: #ff5a5f;
+`;
+
+const Header3 = styled.h3`
+  display: flex;
+  align-items: center;
+  color: #7d93aa;
+  font-size: 1.4em;
+  font-weight: 400;
+  margin-bottom: 0.75rem;
+  margin-top: 1rem;
+`;
+
+const Section = styled.section`
+  width: calc(50% - 1rem);
+  font-size: 1.1rem;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+`;
+
+const Header = styled.div`
+  background-image: url('https://images.unsplash.com/photo-1451934403379-ffeff84932da?auto=format&fit=crop&w=1284&q=80');
+  background-position: center;
+  padding: 8rem 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const Input = styled.input`
+  border: 0;
+  margin: 0;
+  padding: 10px;
+  background: white;
+  line-height: 50px;
+  font-size: 20px;
+  border-radius: 0;
+  outline: 0;
+  border-right: 1px solid rgb(0, 0, 0, 0.2);
+`;
+
+const mapStateToProps = state => ({
+  suggestions: getSuggestions(state),
+  isFetching: getIsFetchingSuggestions(state)
+});
+
+const mapDispatchToProps = dispatch => ({
+  onChangePostCode: postCode => {
+    dispatch(searchPostCodes(postCode));
   }
 });
 
diff --git a/frontend/src/Search/SearchResults.Loader.js b/frontend/src/Search/SearchResults.Loader.js
index c3645f3..ba379ba 100644
--- a/frontend/src/Search/SearchResults.Loader.js
+++ b/frontend/src/Search/SearchResults.Loader.js
@@ -1,39 +1,44 @@
 import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
 import HouseList from './HouseList';
 import CardLoader from '../House/Card.Loader';
+import styled, { css } from 'styled-components';
 
 const SearchResultsLoader = () => {
-  const dummy = [0, 0, 0, 0, 0, 0];
-  const house_list = dummy.map((d, i) => {
-    const style = { opacity: `${1 - parseInt(i / 2, 10) * 0.4}` };
+  const house_list = [0, 0, 0, 0, 0, 0].map((d, i) => {
     return (
-      <div style={style} key={i}>
+      <LoadingWrapper i={i} key={i}>
         <CardLoader />
-      </div>
+      </LoadingWrapper>
     );
   });
 
   return (
-    <div className={css(styles.container)}>
-      <h1 className={css(styles.heading)}>Search results for post code XXX</h1>
+    <Container>
+      <Heading>Search results for post code XXX</Heading>
       <HouseList>{house_list}</HouseList>
-    </div>
+    </Container>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flex: '1',
-    flexDirection: 'column',
-    alignItems: 'center'
-  },
-  heading: {
-    fontWeight: '500',
-    fontSize: '22px',
-    color: '#262637'
-  }
-});
+const LoadingWrapper = styled.div`
+  ${props =>
+    props.i &&
+    css`
+    opacity: {1 - parseInt(props.i / 2, 10)  * 0.4}
+  `};
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Heading = styled.h1`
+  font-weight: 500;
+  font-size: 22px;
+  color: #262637;
+`;
 
 export default SearchResultsLoader;
diff --git a/frontend/src/Search/SearchResults.js b/frontend/src/Search/SearchResults.js
index 0c4a817..e761ecc 100644
--- a/frontend/src/Search/SearchResults.js
+++ b/frontend/src/Search/SearchResults.js
@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
-import { css, StyleSheet } from 'aphrodite';
 import 'url-search-params-polyfill';
 import HouseList from './HouseList';
 import HouseItemSelectable from './HouseItemSelectable';
 import { fetchHouses } from './actions';
 import { getHousesByPostCode, getIsFetching } from './reducers';
 import SearchResultsLoader from './SearchResults.Loader';
+import styled from 'styled-components';
 
 class SearchResults extends Component {
   static propTypes = {
@@ -42,10 +42,8 @@ class SearchResults extends Component {
       return <SearchResultsLoader />;
     }
     return (
-      <div className={css(styles.container)}>
-        <h1 className={css(styles.heading)}>
-          Search results for post code {postCode}
-        </h1>
+      <Container>
+        <Heading>Search results for post code {postCode}</Heading>
         <HouseList>
           {houses.map((house, i) => (
             <HouseItemSelectable
@@ -55,24 +53,23 @@ class SearchResults extends Component {
             />
           ))}
         </HouseList>
-      </div>
+      </Container>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flex: '1',
-    flexDirection: 'column',
-    alignItems: 'center'
-  },
-  heading: {
-    fontWeight: '500',
-    fontSize: '22px',
-    color: '#262637'
-  }
-});
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Heading = styled.h1`
+  font-weight: 500;
+  font-size: 22px;
+  color: #262637;
+`;
 
 function loadData(props) {
   props.fetchHouses(parse(getSearchParams(props)).postCode);
diff --git a/frontend/src/Search/SubmitInput.js b/frontend/src/Search/SubmitInput.js
index 5e536bf..39d7d57 100644
--- a/frontend/src/Search/SubmitInput.js
+++ b/frontend/src/Search/SubmitInput.js
@@ -1,30 +1,21 @@
 import React from 'react';
-import { css, StyleSheet } from 'aphrodite';
+import styled from 'styled-components';
 
-const SubmitInput = props => (
-  <input
-    type="submit"
-    value="search"
-    {...props}
-    className={css(styles.input)}
-  />
-);
+const SubmitInput = props => <Input type="submit" value="search" {...props} />;
 export default SubmitInput;
 
-const styles = StyleSheet.create({
-  input: {
-    border: 0,
-    margin: 0,
-    padding: '10px',
-    lineHeight: '50px',
-    fontSize: '20px',
-    borderRadius: 0,
-    outline: 0,
-    borderRight: '1px solid rgba(0,0,0,0.2)',
-    background: '#FF5A5F',
-    borderTop: '1px solid #FF5A5F',
-    borderBottom: '1px solid #FF5A5F',
-    color: 'white',
-    flexBasis: '500px'
-  }
-});
+const Input = styled.input`
+  border: 0;
+  margin: 0;
+  padding: 10px;
+  line-height: 50px;
+  font-size: 20px;
+  border-radius: 0;
+  outline: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  background: #ff5a5f;
+  border-top: 1px solid #ff5a5f;
+  border-bottom: 1px solid #ff5a5f;
+  color: white;
+  flex-basis: 500px;
+`;
diff --git a/frontend/src/Uploader/Uploader.js b/frontend/src/Uploader/Uploader.js
index e9295aa..0fa0e9f 100644
--- a/frontend/src/Uploader/Uploader.js
+++ b/frontend/src/Uploader/Uploader.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImageDropper from './ImageDropper';
 import UrlInput from './UrlInput';
 import { ReloadButton } from '../Common/Buttons';
-import { StyleSheet, css } from 'aphrodite';
+import styled from 'styled-components';
 
 export default class Uploader extends Component {
   static propTypes = {
@@ -53,7 +53,7 @@ export default class Uploader extends Component {
     const { image_src, url_text, show_image } = this.state;
     const url = image_src ? image_src : missing_url;
     return (
-      <div className={css(styles.wrapper)}>
+      <Wrapper>
         <ImageDropper
           url={url}
           show_image={show_image}
@@ -65,27 +65,26 @@ export default class Uploader extends Component {
           onUrlChange={this.onUrlChange}
           handleUrlKeyUp={this.handleUrlKeyUp}
         />
-        <div className={css(styles.btn_wrapper)}>
+        <ButtonWrapper>
           <ReloadButton onClick={this.setPicUrl} title="Preview image" />
-        </div>
-      </div>
+        </ButtonWrapper>
+      </Wrapper>
     );
   };
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    padding: '0px 10px',
-    border: '2px solid darkgrey',
-    borderRadius: '10px',
-    boxShadow: '0px 0px 8px 0 #ccc',
-    background: 'lightgrey',
-    maxWidth: '240px'
-  },
-  btn_wrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    fontSize: '0.8em'
-  }
-});
+const Wrapper = styled.div`
+  padding: 0 10px;
+  border: 2px solid darkgrey;
+  border-radius: 10px;
+  box-shadow: 0 0 8px 0 #ccc;
+  background: lightgrey;
+  max-width: 240px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-size: 0.8rem;
+`;
diff --git a/frontend/src/Uploader/styles.js b/frontend/src/Uploader/styles.js
deleted file mode 100644
index 2b13a78..0000000
--- a/frontend/src/Uploader/styles.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { StyleSheet } from 'aphrodite';
-
-export default StyleSheet.create({
-  wrapper: {
-    padding: '0px 20px',
-    border: '2px solid darkgrey',
-    borderRadius: '10px',
-    boxShadow: '0px 0px 8px 0 #ccc',
-    background: 'lightgrey',
-    maxWidth: '220px'
-    // position: "absolute"
-  },
-  well: {
-    padding: '10px',
-    paddingBottom: '10px',
-    marginBottom: '0px'
-  },
-  image_style: { maxWidth: '215px', maxHeight: '215px' },
-  ip_wrapper: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    alignItems: 'center'
-  },
-  btn_wrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    fontSize: '0.8em',
-    margin: '1em'
-  }
-});