From 29a7aa92c06b8869fa2b7806fbed205e82111d94 Mon Sep 17 00:00:00 2001
From: Theresa <tli2@cca.com>
Date: Sun, 19 May 2019 12:00:59 -0700
Subject: [PATCH 1/3] Debug dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 38e5d7e..e9d50b1 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "glamor": "^2.20.40",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-star-ratings": "^2.3.0"
+    "react-star-ratings": "^2.3.0",
     "sha.js": "^2.4.11",
     "style-loader": "^0.23.1"
   },

From 259a8b2af2eb322efcb6bc543f55f1c1c3c8e784 Mon Sep 17 00:00:00 2001
From: Theresa <tli2@cca.com>
Date: Sun, 19 May 2019 13:02:33 -0700
Subject: [PATCH 2/3] Implement RouteList styling

---
 src/components/RouteList.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/RouteList.jsx b/src/components/RouteList.jsx
index c54644e..324eb66 100644
--- a/src/components/RouteList.jsx
+++ b/src/components/RouteList.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { css } from 'glamor';
+
 import RouteListEntry from './RouteListEntry.jsx';
 
 import routeSampleData from './routeSampleData.js';
@@ -6,11 +8,21 @@ import routeSampleData from './routeSampleData.js';
 class RouteList extends React.PureComponent {
   render() {
     return (
-      <div className="route-container">
+      <div {...css(styles.routeContainer)}>
         {routeSampleData.map(route => <RouteListEntry routeData={route} />)}
       </div>
     )
   }
 }
 
+const styles ={
+  routeContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    fontFamily: 'sans-serif',
+    padding: '10px'
+  }
+}
+
 export default RouteList;

From 786ef33ff846bdc2d890197c6dff7dd461c14cff Mon Sep 17 00:00:00 2001
From: Theresa <tli2@cca.com>
Date: Sun, 19 May 2019 13:02:53 -0700
Subject: [PATCH 3/3] Implement RouteListEntry styling

---
 src/components/RouteListEntry.jsx | 62 +++++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/components/RouteListEntry.jsx b/src/components/RouteListEntry.jsx
index 12e63a2..367a2fe 100644
--- a/src/components/RouteListEntry.jsx
+++ b/src/components/RouteListEntry.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import StarRatings from 'react-star-ratings';
+import { css } from 'glamor';
 
 class RouteListEntry extends React.PureComponent {
   getStatus() {
@@ -8,23 +9,68 @@ class RouteListEntry extends React.PureComponent {
 
   render() {
     return (
-      <div className="route-list-entry" key={this.props.routeData.routeId}>
-        <div className="route-header">
-          <p>{this.props.routeData.routeName}</p>
-          <input type="submit" value={this.getStatus()} />
+      <div {...css(styles.routeListEntry)} key={this.props.routeData.routeId}>
+        <div {...css(styles.routeHeader)}>
+          {this.props.routeData.routeName}
+          <input 
+            {...css(styles.button)}
+            type="submit"
+            value={this.getStatus()} 
+          />
         </div>
-        <div className="ratings">
+        <div {...css(styles.ratings)}>
           <StarRatings 
             rating={this.props.routeData.rating}
-            starRatedColor="#ea1414"
+            starRatedColor="#4CAF50"
+            starDimension="25px"
+            starSpacing="1px"
             changeRating={this.changeRating}
           />
-          <p>{this.props.routeData.rating} stars</p>
+          <p {...css(styles.star)}>{this.props.routeData.rating} stars</p>
         </div>
-        <p>{this.props.routeData.completionRate}% Completion Rate</p>
+        <p {...css(styles.completion)}>{this.props.routeData.completionRate}% Completion Rate</p>
       </div>
     )
   }
 }
 
+const styles = {
+  routeListEntry: {
+    backgroundColor: '#ebebeb80',
+    borderRadius: '3px',
+    height: '80px',
+    margin: '5px',
+    padding: '10px',
+    width: '200px'
+  },
+  routeHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  ratings: {
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: '12px',
+    marginTop: '5px'
+  },
+  star: {
+    marginLeft: '5px'
+  },
+  completion: {
+    fontSize:'14px',
+    margin: '0px'
+  },
+  button: {
+    padding: '1px 5px',
+    backgroundColor: '#ddd',
+    cursor: 'pointer',
+    borderRadius: '3px',
+    ':hover': {
+      backgroundColor: '#ededed'
+    },
+    textAlign: 'center'
+  }
+}
+
 export default RouteListEntry;