basic setup

2018-09-12 08:08:42 +02:00 · 2018-09-12 08:08:42 +02:00 · 59beca4846
commit 59beca4846
parent 5e2c8ffb31
17 changed files with 15285 additions and 81 deletions
--- a/.gitignore
+++ b/.gitignore
@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock*
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -4,11 +4,19 @@
  "private": true,
  "dependencies": {
    "alertify.js": "^1.0.12",
+    "browser-detect": "^0.2.28",
    "firebase": "^5.4.2",
+    "history": "^4.7.2",
+    "jss": "^9.8.7",
+    "jss-preset-default": "^4.5.0",
    "mobx": "^5.1.0",
+    "mobx-react": "^5.2.8",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
+    "react-jss": "^8.6.1",
+    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
+    "router": "^1.3.3",
    "semantic-ui-react": "^0.82.3"
  },
  "scripts": {
--- a/public/index.html
+++ b/public/index.html
@ -4,37 +4,15 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Ninja</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
  </body>
 </html>
--- a/src/App.js
+++ b/src/App.js
@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';

 /*
 * Functions import
@ -7,8 +8,24 @@ import React, { Component } from 'react';
 /*
 * Components import
 */
-import Loading from './components/Loading';
+import Loading from './pages/Loading';
 import Main from './pages/Main';
+import Login from './pages/Login';
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+

 const App = inject("rootStore") ( observer(
  class App extends Component {
@ -31,6 +48,7 @@ const App = inject("rootStore") ( observer(
    }

    render() {
+      console.log(this.stores.authStore.userData.uid)
      if(this.stores.rootStore.isLoaded.app === true) {
        if(this.stores.authStore.userData.uid !== null) {
          return(<Main />);
@ -40,7 +58,7 @@ const App = inject("rootStore") ( observer(
      } else {
        return(<Loading />);
      }
-    );
+    }
  }
 ));

--- a/src/components/Menu/Menu.js
+++ b/src/components/Menu/Menu.js
@ -0,0 +1,106 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+import { Menu, Button } from 'semantic-ui-react'
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class Main extends Component {
+  constructor(props){
+    super(props);
+    //Initial loading screen
+
+    /*
+    * Expected props
+    *   - /
+    */
+
+    this.handleItemClick = this.handleItemClick.bind(this);
+
+    this.state = {
+      activeItem: 'Home'
+    }
+
+    //Styles
+    this.styles = this.getStyles();
+    this.sheet = jss.createStyleSheet(this.styles);
+    const {classes} = this.sheet.attach();
+    this.classes = classes;
+    //Styles
+  }
+
+
+  componentWillUnmount() {
+    this.sheet.detach()
+  }
+
+
+  handleItemClick(e, { name }) {
+    this.setState({ 
+      activeItem: name
+    });
+  } 
+
+
+  render() {
+    const activeItem = this.state.activeItem
+
+    return(
+      <Menu stackable fixed="top">
+        <Menu.Item header>
+          <img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
+        </Menu.Item>
+
+        <Menu.Item
+          name='Home'
+          active={activeItem === 'Home'}
+          onClick={this.handleItemClick}
+        >
+          Home
+        </Menu.Item>
+
+        <Menu.Item name='A' active={activeItem === 'A'} onClick={this.handleItemClick}>
+          Password manager
+        </Menu.Item>
+
+        <Menu.Menu position='right'>
+          <Menu.Item>
+            <Button primary>Sign out</Button>
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+    );
+  }
+
+
+  getStyles() {
+    return {
+      
+    }
+  }
+}
+
+export default Main;
--- a/src/components/loadingPage.js
+++ b/src/components/loadingPage.js
@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+
+import logo from "../files/images/logo.svg";
+
+
+class PageLoading extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   /
+    */
+
+    this.state = {
+      display: true
+    }
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  componentDidMount() {
+    //Color background
+    this.interval1 = setInterval(function () {
+      document.getElementById("PageLoading").style.backgroundColor = "transparent";
+    },1100);
+
+    //remove Logo
+    this.interval2 = setInterval(function () {
+      document.getElementById("PageLoading_Logo").classList.add("PageLoading_Logo-fadeOut");
+    },2500);
+
+    //Unmount
+    this.interval3 = setInterval(() => {
+      clearInterval(this.interval1);
+      clearInterval(this.interval2);
+      clearInterval(this.interval3);
+      this.setState({
+        display: false
+      });
+    },5500);
+  }
+
+  render() {
+    //<div className="pageLoadingLogo"></div>
+    const url = logo + '?' + Math.random();
+
+    if(this.state.display) {
+      return(
+        <div className="PageLoading" id="PageLoading">
+          <img className="PageLoading_Logo" id="PageLoading_Logo" alt="" src={url} />
+
+          <div className="PageLoading_left PageLoading_1 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_1 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_2 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_2 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_3 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_3 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_4 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_4 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_5 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_5 PageLoading_Element"></div>
+        </div>
+      );
+    } else {
+      return(null);
+    }
+  }
+}
+
+export default PageLoading;
--- a/src/files/images/logo.svg
+++ b/src/files/images/logo.svg
@ -0,0 +1,85 @@
+<svg width="640" height="479.99999999999994" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <style type="text/css">
+    <![CDATA[
+
+    .circle {
+      fill: #DA3821;
+      stroke-width: 7;
+      stroke-dasharray: 1000;
+      stroke-dashoffset: 0;
+      animation: circleDraw 2s;
+    }
+
+    .a {
+      opacity: 1;
+      font-size: 24px;
+      animation: fontFadeA 3s;
+    }
+
+    .b {
+      opacity: 1;
+      font-size: 24px;
+      animation: fontFadeB 3s;
+    }
+
+    @keyframes fontFadeA {
+      0% {
+        font-size: 20px;
+        opacity: 0;
+      }
+      40% {
+        opacity: 0;
+        font-size: 20px;
+      }
+      100% {
+        opacity: 1;
+        font-size: 24px;
+      }
+    }
+    @keyframes fontFadeB {
+      0% {
+        opacity: 0;
+        font-size: 20px;
+      }
+      50% {
+        opacity: 0;
+        font-size: 20px;
+      }
+      100% {
+        opacity: 1;
+        font-size: 24px;
+      }
+    }
+
+    @keyframes circleDraw {
+      0% {
+        stroke-dashoffset: 1000;
+        fill: transparent;
+      }
+      30% {
+        fill: transparent;
+      }
+      100% {
+        fill: #DA3821;
+        stroke-dashoffset: 0;
+      }
+    }
+
+    ]]>
+  </style>
+
+ </defs>
+ <title>MyLogo</title>
+ <g>
+  <title>background</title>
+  <rect x="-1" y="-1" width="642" height="482" id="canvas_background" fill="none"/>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <path class="circle" id="svg_2" d="m175.64902,246.04444c0,-81.71632 66.19021,-147.90653 147.90652,-147.90653c81.71632,0 147.90653,66.19021 147.90653,147.90653c0,81.71631 -66.19021,147.90652 -147.90653,147.90652c-81.71631,0 -147.90652,-66.19021 -147.90652,-147.90652z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke="#e45f4d" fill-opacity="null"/>
+  <text class="a" font-family="Monospace" font-weight="normal" stroke="#ffffff" transform="matrix(16.070920656049648,0,0,14.324953552691046,-1383.3705537140042,-1389.329317933106) " xml:space="preserve" text-anchor="middle" font-size="24" id="svg_4" y="117.786939" x="101.824642" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">A</text>
+  <text class="b" font-family="Monospace" id="svg_5" font-weight="normal" stroke="#ffffff" transform="rotate(-19 389.5501403808595,276.68469238281244) matrix(15.254961764346335,0,0,14.324953552691046,-1315.1918495589248,-1390.0460388359616) " xml:space="preserve" text-anchor="middle" font-size="24" y="124.386839" x="111.764076" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">B</text>
+ </g>
+</svg>
--- a/src/index.js
+++ b/src/index.js
@ -2,6 +2,31 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import RootStore from './stores/rootStore';

-ReactDOM.render(<App />, document.getElementById('root'));
+/*
+* Import css
+*/
+import './styles/keyframes.css';
+import './styles/loadingPage/loadingPage.css';
+
+/*
+* Import funtions
+*/
+import history from './stores/functions/history';
+
+/*
+* Components import
+*/
+import { Router } from 'react-router-dom';
+import { Provider } from 'mobx-react';
+
+
+ReactDOM.render(
+  <Provider rootStore={new RootStore()}>
+    <Router history={history}>
+      <App />
+    </Router>
+  </Provider>
+  , document.getElementById('root'));
 registerServiceWorker();
--- a/src/pages/Loading.js
+++ b/src/pages/Loading.js
@ -0,0 +1,117 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class Loading extends Component {
+  constructor(props){
+    super(props);
+    //Initial loading screen
+
+    /*
+    * Expected props
+    *   - /
+    */
+
+    //Styles
+    this.styles = this.getStyles();
+    this.sheet = jss.createStyleSheet(this.styles);
+    const {classes} = this.sheet.attach();
+    this.classes = classes;
+    //Styles
+  }
+
+
+  componentWillUnmount() {
+    this.sheet.detach()
+  }
+
+
+  render() {
+    return(
+      <div className={this.classes.loadingContainer}>
+        <div className={this.classes.loadingContent}>
+          {this.props.children}
+        </div>
+
+        <div className={this.classes.loading}>
+          <div className={this.classes.loadingCircle}></div>
+        </div>
+      </div>
+    );
+  }
+
+
+  getStyles() {
+    return {
+      loadingContainer: {
+        display: 'block',
+        boxSizing: 'border-box',
+        position: 'relative',
+        width: '100vw',
+        height: '100vh',
+        backgroundColor: 'black'
+      },
+
+      loadingContent: {
+        display: 'block',
+        boxSizing: 'border-box',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%'
+      },
+
+      loading: {
+        extend: 'loadingContent',
+        zIndex: 1
+      },
+
+      loadingCircle: {
+        width: '40px',
+        height: '40px',
+        borderRight: 'solid 2px #DA3821',
+        borderLeft: 'solid 2px #DA3821',
+        borderTop: 'solid 2px transparent',
+        borderBottom: 'solid 2px transparent',
+        borderRadius: '100%',
+        transform: 'rotateZ(0deg)',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        position: 'relative',
+        top: 'calc(50vh - 40px)',
+        animationName: 'rotate',
+        animationDuration: '0.7s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear'
+      }
+    }
+  }
+}
+
+export default Loading;
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+import { Container, Button, Form, Header, Segment, Input, Icon } from 'semantic-ui-react'
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+import LoadingPage from '../components/loadingPage';
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class Login extends Component {
+  constructor(props){
+    super(props);
+    //Initial loading screen
+
+    /*
+    * Expected props
+    *   - /
+    */
+
+    //Styles
+    this.styles = this.getStyles();
+    this.sheet = jss.createStyleSheet(this.styles);
+    const {classes} = this.sheet.attach();
+    this.classes = classes;
+    //Styles
+  }
+
+
+  componentWillUnmount() {
+    this.sheet.detach()
+  }
+
+
+  render() {
+    return(
+      <Container className={this.classes.container}>
+        <Segment padded="very">
+          <Form>
+            <Header as="h1">
+              Sign in
+            </Header>
+
+            <Form.Field>
+              <label>Email adress:</label>
+              <Input iconPosition='left' placeholder='example@example.com'>
+                <Icon name='at' />
+                <input type="email" />
+              </Input>
+            </Form.Field>
+
+            <Form.Field>
+              <label>Password:</label>
+              <input type="password" placeholder='*******' />
+            </Form.Field>
+
+            <Button type='submit'>Next</Button>
+          </Form>
+        </Segment>
+      </Container>
+    );
+  }
+
+
+  getStyles() {
+    return {
+      container: {
+        padding: '20%',
+        paddingTop: '10%'
+      }
+    }
+  }
+}
+
+export default Login;
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+import LoadingPage from '../components/loadingPage';
+import Menu from '../components/Menu/Menu';
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class Main extends Component {
+  constructor(props){
+    super(props);
+    //Initial loading screen
+
+    /*
+    * Expected props
+    *   - /
+    */
+
+    //Styles
+    this.styles = this.getStyles();
+    this.sheet = jss.createStyleSheet(this.styles);
+    const {classes} = this.sheet.attach();
+    this.classes = classes;
+    //Styles
+  }
+
+
+  componentWillUnmount() {
+    this.sheet.detach()
+  }
+
+
+  render() {
+    return(
+      <div>
+        {/*<LoadingPage />*/}
+        <Menu />
+      </div>
+    );
+  }
+
+
+  getStyles() {
+    return {
+      
+    }
+  }
+}
+
+export default Main;
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@ -26,16 +26,12 @@ class AuthStore {
  ##  Functions
  ##
  ##    load
-  ##    getUserInfo
-  ##    verifyPhone
+  ##    signIn
  ##    signOut
  /*#######################################################*/
  load() {
    //Load all auth related things

-    console.info("Loading authStore");
-    this.stores.rootStore.isLoaded.app = false;
-
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        //Logged in
@ -63,47 +59,6 @@ class AuthStore {
  }


-  getUserInfo(userId) {
-    //Returns all user info from firestore.
-    //Param: userId
-    //Returns a promise
-
-    return new Promise(function (resolve, reject) {
-      var docRef = db.collection("users").doc(userId);
-      return docRef.get().then((doc) => {
-        if (doc.exists) {
-          resolve(doc.data());
-        } else {
-          // doc.data() will be undefined in this case
-          alertify.delay(0).error("Base Web doesn't support signing up yet. Please install the mobile app to sign up! Refresh Base Web after!");
-          console.error("User with id " + userId + " not found in user db!");
-          reject()
-        }
-      }).catch(function(error) {
-          console.error("Error getting document:", error);
-          reject()
-      });
-    });
-  }
-
-
-  createSignInRecaptcha(phoneNumber) {
-    firebase.auth().useDeviceLanguage();
-
-    window.recaptchaVerifier = new firebase_orig.auth.RecaptchaVerifier('sign-in-button', {
-      'size': 'invisible',
-      'callback': (response) => {
-        // reCAPTCHA solved, allow signInWithPhoneNumber.
-        this.signIn();
-      }
-    });
-
-    window.recaptchaVerifier.render().then(function(widgetId) {
-      window.recaptchaWidgetId = widgetId;
-    });
-  }
-
-
  signIn(){
    //Verify phone number and then sign in

--- a/src/stores/rootStore.js
+++ b/src/stores/rootStore.js
@ -35,10 +35,10 @@ class RootStore {
  ##  Functions
  ##
  ##    loadApp
-  ##    promiseAll
  /*#######################################################*/
  loadApp() {
-    console.log("Your browser: " + browser());
+    const result = browser();
+    console.log("Your browser: " , result);

    if(navigator.cookiesEnabled) {
      alertify.delay(0).error("Please activate cookies in your browser! Refresh after");
--- a/src/styles/keyframes.css
+++ b/src/styles/keyframes.css
@ -0,0 +1,9 @@
+/*For loading*/
+@keyframes rotate {
+  from {
+    transform: rotateZ(0deg)
+  }
+  to {
+    transform: rotateZ(360deg)
+  }
+}
--- a/src/styles/loadingPage/loadingPage.css
+++ b/src/styles/loadingPage/loadingPage.css
@ -0,0 +1,136 @@
+.PageLoading {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+  top: 0;
+  z-index: 2000;
+}
+
+.PageLoading_Element {
+  height: 100vh;
+  top: 0;
+  position: fixed;
+  width: 50%;
+  display: block;
+  animation-delay: 1s;
+}
+
+
+/*
+* logo
+*/
+.PageLoading_Logo {
+  z-index: 1001;
+  display: block;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  top: 40vh;
+  width: 150px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.PageLoading_Logo-fadeOut {
+  opacity: 0;
+  transform: scale(1.5);
+  animation: pageLoadingLogo-fadeOut 2s ease-in-out;
+}
+@keyframes pageLoadingLogo-fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+
+.PageLoading_1 {
+  background-color: black;
+  z-index: 1000;
+  animation-duration: 1.5s;
+  -webkit-animation-duration: 1.5s;
+  -moz-animation-duration: 1.5s;
+}
+.PageLoading_2 {
+  background-color: rgb(5, 5, 5);
+  z-index: 999;
+  animation-duration: 2s;
+  -webkit-animation-duration: 2s;
+  -moz-animation-duration: 2s;
+}
+.PageLoading_3 {
+  background-color: rgb(10, 10, 10);
+  z-index: 998;
+  animation-duration: 2.5s;
+  -webkit-animation-duration: 2.5s;
+  -moz-animation-duration: 2.5s;
+}
+.PageLoading_4 {
+  background-color: rgb(15, 15, 15);
+  z-index: 997;
+  animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  -moz-animation-duration: 3s;
+}
+.PageLoading_5 {
+  background-color: rgb(20, 20, 20);
+  z-index: 996;
+  animation-duration: 3.5s;
+  -webkit-animation-duration: 3.5s;
+  -moz-animation-duration: 3.5s;
+}
+
+.PageLoading_left {
+  transform: translateX(-100%);
+  animation-name: pageLoading-left;
+  -webkit-animation-name: pageLoading-left;
+  -moz-animation-name: pageLoading-left;
+}
+.PageLoading_right {
+  left: 50%;
+  transform: translateX(100%);
+  animation-name: pageLoading-right;
+  -webkit-animation-name: pageLoading-right;
+  -moz-animation-name: pageLoading-right;
+}
+
+
+/*
+* Animations
+*/
+@keyframes pageLoading-left {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes pageLoading-right {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+
+/*
+* Responsive
+*/
+@media (min-width: 700px) {
+
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -339,7 +339,7 @@ array-flatten@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"

-array-flatten@^2.1.0:
+array-flatten@2.1.1, array-flatten@^2.1.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"

@ -1267,10 +1267,20 @@ braces@^2.3.0, braces@^2.3.1:
    split-string "^3.0.2"
    to-regex "^3.0.1"

+brcast@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd"
+
 brorand@^1.0.1:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"

+browser-detect@^0.2.28:
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/browser-detect/-/browser-detect-0.2.28.tgz#5688fc22f638390614ebea4646483403fb20ebfb"
+  dependencies:
+    core-js "^2.5.7"
+
 browser-resolve@^1.11.2:
  version "1.11.3"
  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
@ -1797,7 +1807,7 @@ core-js@2.5.5:
  version "2.5.5"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"

-core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7:
  version "2.5.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"

@ -1923,6 +1933,12 @@ css-selector-tokenizer@^0.7.0:
    fastparse "^1.1.1"
    regexpu-core "^1.0.0"

+css-vendor@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa"
+  dependencies:
+    is-in-browser "^1.0.2"
+
 css-what@2.1:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@ -3354,6 +3370,16 @@ he@1.1.x:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"

+history@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -3362,6 +3388,10 @@ hmac-drbg@^1.0.0:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

+hoist-non-react-statics@^2.5.0:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+
 home-or-tmp@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@ -3503,6 +3533,10 @@ https-proxy-agent@^2.2.1:
    agent-base "^4.1.0"
    debug "^3.1.0"

+hyphenate-style-name@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
 iconv-lite@0.4.19:
  version "0.4.19"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@ -3624,7 +3658,7 @@ interpret@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"

-invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
  version "2.2.4"
  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
  dependencies:
@ -3768,6 +3802,10 @@ is-fullwidth-code-point@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"

+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@ -3786,6 +3824,10 @@ is-glob@^4.0.0:
  dependencies:
    is-extglob "^2.1.1"

+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+
 is-installed-globally@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@ -4341,6 +4383,81 @@ jsprim@^1.2.2:
    json-schema "0.2.3"
    verror "1.10.0"

+jss-camel-case@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+
+jss-compose@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
+  dependencies:
+    warning "^3.0.0"
+
+jss-default-unit@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
+
+jss-expand@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6"
+
+jss-extend@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
+  dependencies:
+    warning "^3.0.0"
+
+jss-global@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
+
+jss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca"
+  dependencies:
+    warning "^3.0.0"
+
+jss-preset-default@^4.3.0, jss-preset-default@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd"
+  dependencies:
+    jss-camel-case "^6.1.0"
+    jss-compose "^5.0.0"
+    jss-default-unit "^8.0.2"
+    jss-expand "^5.3.0"
+    jss-extend "^6.2.0"
+    jss-global "^3.0.0"
+    jss-nested "^6.0.1"
+    jss-props-sort "^6.0.0"
+    jss-template "^1.0.1"
+    jss-vendor-prefixer "^7.0.0"
+
+jss-props-sort@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
+
+jss-template@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
+  dependencies:
+    warning "^3.0.0"
+
+jss-vendor-prefixer@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71"
+  dependencies:
+    css-vendor "^0.3.8"
+
+jss@^9.7.0, jss@^9.8.7:
+  version "9.8.7"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
+  dependencies:
+    is-in-browser "^1.1.3"
+    symbol-observable "^1.1.0"
+    warning "^3.0.0"
+
 jsx-ast-utils@^1.4.0:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
@ -4573,7 +4690,7 @@ longest@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"

-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  dependencies:
@ -4820,6 +4937,13 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
  dependencies:
    minimist "0.0.8"

+mobx-react@^5.2.8:
+  version "5.2.8"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.2.8.tgz#059c7f29254d7cd36e103d79113103b40348d3bf"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    react-lifecycles-compat "^3.0.2"
+
 mobx@^5.1.0:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.1.0.tgz#ae772ca8eb0c1dd93341ffce375f44a80050014d"
@ -5346,7 +5470,7 @@ path-to-regexp@0.1.7:
  version "0.1.7"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"

-path-to-regexp@^1.0.1:
+path-to-regexp@^1.0.1, path-to-regexp@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
  dependencies:
@ -5782,7 +5906,7 @@ promise@8.0.1:
  dependencies:
    asap "~2.0.3"

-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
@ -5981,6 +6105,43 @@ react-error-overlay@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"

+react-jss@^8.6.1:
+  version "8.6.1"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    jss "^9.7.0"
+    jss-preset-default "^4.3.0"
+    prop-types "^15.6.0"
+    theming "^1.3.0"
+
+react-lifecycles-compat@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-router-dom@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
+  dependencies:
+    history "^4.7.2"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.1"
+    react-router "^4.3.1"
+    warning "^4.0.1"
+
+react-router@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
+  dependencies:
+    history "^4.7.2"
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.1"
+    warning "^4.0.1"
+
 react-scripts@1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768"
@ -6321,6 +6482,10 @@ resolve-from@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"

+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@ -6371,6 +6536,18 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
    hash-base "^3.0.0"
    inherits "^2.0.1"

+router@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/router/-/router-1.3.3.tgz#c142f6b5ea4d6b3359022ca95b6580bd217f89cf"
+  dependencies:
+    array-flatten "2.1.1"
+    debug "2.6.9"
+    methods "~1.1.2"
+    parseurl "~1.3.2"
+    path-to-regexp "0.1.7"
+    setprototypeof "1.1.0"
+    utils-merge "1.0.1"
+
 run-async@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@ -7130,6 +7307,10 @@ sw-toolbox@^3.4.0:
    path-to-regexp "^1.0.1"
    serviceworker-cache-polyfill "^4.0.0"

+symbol-observable@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
 symbol-tree@^3.2.1:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@ -7192,6 +7373,15 @@ text-table@0.2.0, text-table@~0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"

+theming@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"
+  dependencies:
+    brcast "^3.0.1"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    prop-types "^15.5.8"
+
 then-fs@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/then-fs/-/then-fs-2.0.0.tgz#72f792dd9d31705a91ae19ebfcf8b3f968c81da2"
@ -7514,6 +7704,10 @@ validate-npm-package-license@^3.0.1:
    spdx-correct "^3.0.0"
    spdx-expression-parse "^3.0.0"

+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vary@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@ -7542,6 +7736,18 @@ walker@~1.0.5:
  dependencies:
    makeerror "1.0.x"

+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
+warning@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.10.0:
  version "0.10.0"
  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"