Updated the styling a little bit

README.md

@@ -2,7 +2,13 @@ I created this project because a) I always wished there was a better way to
 track the progress of my CubScouts in getting their ranks and b) I wanted to
 learn graphql with Apollo.
 
-Right now there is a [demo](https://bobjohnbob.github.io/scouttracker/build/?id=cj54d5gqs6f4e0156y7x8tj0f) (unfortunately subscriptions with graph.cool seem to be somewhat unreliable, so it may not connect/update properly) where you can tick off achievements for a single scout's wolf adventures.  I've mostly built this project to learn graphql so I started there, there-fore it's not pretty (yet) but that is what I'll start working on next. Currently the demo is subscribing to live updates from a graph.cool generated API to know which achievements are checked off. 
+Right now there is a
+[demo](https://bobjohnbob.github.io/scouttracker/build/?id=cj54d5gqs6f4e0156y7x8tj0f)
+(unfortunately subscriptions with graph.cool seem to be somewhat unreliable, so
+it may not connect/update properly) where you can tick off achievements for a
+single scout's wolf adventures. Currently the demo is subscribing to live updates
+from a graph.cool generated API to know which achievements are checked off.
 
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+This project was bootstrapped with [Create React
+App](https://github.com/facebookincubator/create-react-app).
 

package-lock.json

@@ -778,6 +778,11 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
       "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc="
     },
+    "brcast": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-2.0.1.tgz",
+      "integrity": "sha512-Hm6AjEjr2hg5P/+tfAi7IARUW6mRNweni7ezt7vvOF53qn4++rdJoPsg8dDGS7KcwT2cRDucuFNMRYi3nkCD6Q=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -1901,6 +1906,11 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
+    "fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha1-8UXFwiA5zt8KHU/2ylkq0CaEcMo="
+    },
     "fastparse": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz",
@@ -2618,6 +2628,16 @@
         }
       }
     },
+    "glamor": {
+      "version": "2.20.30",
+      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.30.tgz",
+      "integrity": "sha512-loENOwfYk24QXdr4Ms3NUFl8cQN5SGJbIUCSnURx5NESb9/VdeNjH3r9XWzpmtTNr1iywcIfsgXdaesbHS7Dzg=="
+    },
+    "glamorous": {
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-3.23.5.tgz",
+      "integrity": "sha1-SfYTop9kze6AlIZ5xm281AhOX9U="
+    },
     "glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -2815,6 +2835,11 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz",
       "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4="
     },
+    "html-element-attributes": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.0.tgz",
+      "integrity": "sha1-8G69/OIt6XnbggICZcrFQfsX1Pw="
+    },
     "html-encoding-sniffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz",
@@ -2830,6 +2855,11 @@
       "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.2.tgz",
       "integrity": "sha1-1zvD/0SJQkCIGM5gm/P7DqfvTrc="
     },
+    "html-tag-names": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/html-tag-names/-/html-tag-names-1.1.2.tgz",
+      "integrity": "sha1-9lFolkxanIJnXv2ogoddyyqHXCI="
+    },
     "html-webpack-plugin": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
@@ -5123,6 +5153,11 @@
       "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.4.5.tgz",
       "integrity": "sha1-4+iVoJcM8U7o+JAROvaBl6vz0LE="
     },
+    "react-html-attributes": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.1.tgz",
+      "integrity": "sha1-l7XscQ2miDNZjIvm+JrENiFoQKU="
+    },
     "react-router": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.1.1.tgz",
@@ -5754,6 +5789,11 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
       "integrity": "sha1-kswUuz2tiSjKVlbDPhmhnyCvXHo="
     },
+    "svg-tag-names": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/svg-tag-names/-/svg-tag-names-1.1.1.tgz",
+      "integrity": "sha1-lkGynvcQJe4JTHBD983efZn71Qo="
+    },
     "svgo": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",

package.json

@@ -4,7 +4,10 @@
   "private": true,
   "homepage": "https://bobjohnbob.github.io/scouttracker/build",
   "dependencies": {
+    "glamor": "^2.20.30",
+    "glamorous": "^3.23.5",
     "material-ui": "^0.18.6",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-apollo": "^1.4.2",
     "react-dom": "^15.6.1",

src/components/Achievement.js

@@ -1,5 +1,11 @@
 import React from 'react';
 import { gql, graphql } from 'react-apollo';
+import { Div } from 'glamorous';
+
+const blue = "#00BCD4";
+const size = 2.6;
+const size_rem = `${size}rem`;
+const pad = "0.5rem";
 
 export default({
 	id, 
@@ -12,9 +18,28 @@ export default({
 	mutate
 }) => {
 	if(completed) {
-		return <div className='completed-achievement'>
+		return <Div 
-			{number}{letter}
+			fontSize={`${size/2}rem`}
-		</div>;
+			border={`0.2rem solid ${blue}`}
+			display="inline-flex"
+			color="white"
+			background-color={blue}
+			width={size_rem}
+			height={size_rem}
+			border-radius={size_rem}
+			margin={pad}
+			cursor="pointer"
+		>
+			<Div 
+				display="flex" 
+				width={size_rem} 
+				height={size_rem} 
+				justify-content="center" 
+				align-items="center"
+			>
+				<Div display="inline-flex">{number}{letter}</Div>
+			</Div>
+		</Div>
 	} else {
 
 		const variables = {
@@ -23,8 +48,27 @@ export default({
 			date: (new Date(Date.now())).toISOString()
 		};
 
-		return <button onClick={() => mutate({variables})} className='achievement'>
+		return <Div
-			{number}{letter}
+			onClick={()=>{mutate({variables})}}
-		</button>;
+			fontSize={`${size/2}rem`}
+			border={`0.15rem solid ${blue}`}
+			display="inline-flex"
+			color={blue}
+			width={size_rem}
+			height={size_rem}
+			border-radius={size_rem}
+			margin={pad}
+			cursor="pointer"
+		>
+			<Div 
+				display="flex" 
+				width={size_rem} 
+				height={size_rem} 
+				justify-content="center" 
+				align-items="center"
+			>
+				<Div display="inline-flex">{number}{letter}</Div>
+			</Div>
+		</Div>
 	}
 };

src/components/AchievementList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Achievement from './Achievement.js';
 import CompleteAchievement from '../containers/CompleteAchievement.js';
+import {Div} from 'glamorous';
 
 const AchievementButton = CompleteAchievement(Achievement);
 
@@ -43,9 +44,9 @@ export default class AchievementList extends React.Component {
 			return <AchievementButton {...props} />
 		});
 		
-		return <div>
+		return <Div disply="flex" padding="0.5rem">
 			{list}
-		</div>
+		</Div>
 	}
 
 	componentWillUnmount() {