Started adding some material UI components.

package-lock.json

@@ -747,6 +747,11 @@
       "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8="
     },
+    "bowser": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.7.0.tgz",
+      "integrity": "sha1-Fp3kAYcR+ZQkK/+agAnneh814AM="
+    },
     "boxen": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-0.6.0.tgz",
@@ -930,6 +935,11 @@
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
       "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60="
     },
+    "chain-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.0.tgz",
+      "integrity": "sha1-DUqzfn4Y6tC9xHuSB2QRjOWHM9w="
+    },
     "chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -947,6 +957,11 @@
         }
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -1230,6 +1245,11 @@
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
     },
+    "css-in-js-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz",
+      "integrity": "sha1-msfgL3Y8+F2UAXZmVl7WiltfMhU="
+    },
     "css-loader": {
       "version": "0.28.4",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.4.tgz",
@@ -1480,6 +1500,11 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz",
+      "integrity": "sha1-MgPgf+0he9H0JLAZc1WC/Deyglo="
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -2877,6 +2902,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.1.tgz",
       "integrity": "sha1-P5E2XKvmC3ftDruiS0VOPgnZWoI="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
+    },
     "iconv-lite": {
       "version": "0.4.18",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.18.tgz",
@@ -2937,6 +2967,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
       "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4="
     },
+    "inline-style-prefixer": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.6.tgz",
+      "integrity": "sha1-sn/jCbQWijHq84yOjGCrnnwRcx8="
+    },
     "inquirer": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
@@ -3473,6 +3508,11 @@
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz",
       "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE="
     },
+    "keycode": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
+      "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -3588,6 +3628,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.merge": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.0.tgz",
+      "integrity": "sha1-aYhLoUSsM/5plzemCG3v+t0PicU="
+    },
     "lodash.pick": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
@@ -3603,6 +3648,11 @@
       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
       "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -3653,6 +3703,11 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
     },
+    "material-ui": {
+      "version": "0.18.6",
+      "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-0.18.6.tgz",
+      "integrity": "sha512-wkYxqwrO/bOipy05ZdYNDDAkkq8GlEowFZbSj/8y2joNTzwus9Q1mom+jEW9rv44JBWxzFl2PXRqzO5JqCCGxg=="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -5044,6 +5099,11 @@
         }
       }
     },
+    "react-event-listener": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.4.5.tgz",
+      "integrity": "sha1-4+iVoJcM8U7o+JAROvaBl6vz0LE="
+    },
     "react-router": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.1.1.tgz",
@@ -5061,6 +5121,16 @@
         }
       }
     },
+    "react-tap-event-plugin": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-tap-event-plugin/-/react-tap-event-plugin-2.0.1.tgz",
+      "integrity": "sha1-MWvrO8ZVbinshppyk+icgmqQdNI="
+    },
+    "react-transition-group": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.0.tgz",
+      "integrity": "sha1-tR/JIbDDg1p+98Vxx5/ILHPpIE8="
+    },
     "read-all-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -5108,6 +5178,11 @@
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
       "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q="
     },
+    "recompose": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.23.4.tgz",
+      "integrity": "sha1-rwnk4IQk7/pEnJt5MDcWb3swZEo="
+    },
     "recursive-readdir": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.1.tgz",
@@ -5469,6 +5544,11 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "simple-assign": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/simple-assign/-/simple-assign-0.1.0.tgz",
+      "integrity": "sha1-F/0wZqXz13OPUDIbsPFMooHMS6o="
+    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",

package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "material-ui": "^0.18.6",
     "react": "^15.6.1",
     "react-apollo": "^1.4.2",
     "react-dom": "^15.6.1",
     "react-router": "^4.1.1",
-    "react-scripts": "1.0.10"
+    "react-scripts": "1.0.10",
+    "react-tap-event-plugin": "^2.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -6,11 +6,11 @@ import ScoutOverview from './components/ScoutOverview.js';
 class App extends Component {
 	render() {
 		const scoutID = getQueryParamByName("id", this.props.slug);
-		const MainView = ScoutOverviewCont(ScoutOverview);
+		const ScoutView = ScoutOverviewCont(ScoutOverview);
 
 		return (
 			<div className="App">
-				<MainView scoutID={scoutID} />
+				<ScoutView scoutID={scoutID} />
 			</div>
 		);
 	}

src/components/ScoutOverview.js

@@ -1,6 +1,7 @@
 import React from "react";
 import AllAdventures from '../containers/GetAllAdventures.js'
 import AdventureList from './AdventureList.js';
+import AppBar from 'material-ui/AppBar';
 
 export default ({
 	scoutID, 
@@ -9,11 +10,15 @@ export default ({
 	completedAdventures,
 	completedAchievements
 }) => {
+	const appBarProps = {
+		title: displayName,
+		showMenuIconButton: false
+	}
 	const AdventureListComp = AllAdventures(AdventureList);
 	console.log(displayName)
 	return (
 		<div>
-			{displayName}
+			<AppBar {...appBarProps} />
 			<AdventureListComp 
 				{...{scoutID, completedAdventures, completedAchievements}}
 			/>

src/index.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-//import registerServiceWorker from './registerServiceWorker';
-
-import injectTapEventPlugin from 'react-tap-event-plugin';
-
-// Needed for onTouchTap
-// http://stackoverflow.com/a/34015469/988941
-injectTapEventPlugin();
-
 import { 
 	ApolloClient, 
 	createNetworkInterface,
 	ApolloProvider
 } from 'react-apollo';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+//import registerServiceWorker from './registerServiceWorker';
+import './index.css';
+import App from './App';
+
+// Needed for onTouchTap in materialUI
+// http://stackoverflow.com/a/34015469/988941
+injectTapEventPlugin();
 
 const client = new ApolloClient({
 	networkInterface: createNetworkInterface({
@@ -27,9 +26,11 @@ const loc = window.location;
 console.log("location: ", loc);
 
 ReactDOM.render(
-	<ApolloProvider client={client}>
+	<MuiThemeProvider>
-		<App slug={loc.pathname} query={loc.search} />
+		<ApolloProvider client={client}>
-	</ApolloProvider>, 
+			<App slug={loc.pathname} query={loc.search} />
+		</ApolloProvider>
+	</MuiThemeProvider>, 
 	document.getElementById('root')
 );