Feat/remove all but styled

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",

frontend/src/Common/Buttons/CrossButton.js

@@ -1,29 +1,22 @@
 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 = {
   title: PropTypes.string.isRequired,
   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;

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;

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;

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;

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;