initial conversion

src/App.js

@@ -97,39 +97,39 @@ class App extends Component {
               <RouteLayout>
                 <PrivateRoute
                   authed={authed}
-                  path="/:year(\d+)"
+                  path="/app/:year(\d+)"
                   component={Year}
                   exact
                 />
                 <PrivateRoute
                   authed={authed}
-                  path="/:year(\d+)/:month(0[1-9]|1[0-2]+)"
+                  path="/app/:year(\d+)/:month(0[1-9]|1[0-2]+)"
                   component={Month}
                   exact
                 />
                 <PrivateRoute
                   authed={authed}
-                  path="/:year(\d+)/:month(0[1-9]|1[0-2]+)/:day(\d+)"
+                  path="/app/:year(\d+)/:month(0[1-9]|1[0-2]+)/:day(\d+)"
                   component={Day}
                   exact
                 />
                 <PrivateRoute
                   authed={authed}
-                  path="/search"
+                  path="/app/search"
                   component={Search}
                   exact
                 />
                 <PrivateRoute
                   authed={authed}
-                  path="/user"
+                  path="/app/user"
                   component={User}
                   exact
                 />
-                <Route path="/login" component={Login} exact />
-                <Route path="/register" component={Register} exact />
-                <Route path="/terms" component={Terms} exact />
-                <Route path="/privacy" component={Privacy} exact />
-                <Route path="/" component={Start} exact />
+                <Route path="/app/login" component={Login} exact />
+                <Route path="/app/register" component={Register} exact />
+                <Route path="/app/terms" component={Terms} exact />
+                <Route path="/app/privacy" component={Privacy} exact />
+                <Route path="/app" component={Start} exact />
               </RouteLayout>
             </FullscreenLayout>
           </Router>

src/components/Layout/Layout.js

@@ -0,0 +1,20 @@
+import React from "react"
+import { Global, css } from "@emotion/core"
+import styled from "@emotion/styled"
+
+export default ({ children }) => (
+  <>
+    <Global
+      styles={css`
+        body {
+          margin: 0;
+          padding: 0;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+            "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+            "Helvetica Neue", sans-serif;
+        }
+      `}
+    />
+    {children}
+  </>
+)

src/components/Layout/index.js

@@ -0,0 +1,2 @@
+import Layout from "./Layout"
+export default Layout

src/components/elements/elements.js

@@ -1,3 +1,4 @@
+import React from "react"
 import { withTheme } from "emotion-theming"
 import { Link } from "react-router-dom"
 import styled from "@emotion/styled"
@@ -57,7 +58,9 @@ export const P = styled.p`
   color: ${props => props.theme.colors.secondary};
 `
 
-export const StyledLink = withTheme(styled(Link)`
+export const AppLink = props => <Link {...props} to={"/app" + props.to} />
+
+export const StyledLink = withTheme(styled(AppLink)`
   text-decoration: none;
   border-radius: 12px;
   outline: none;

src/components/screens/Month/Month.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { Link } from "react-router-dom"
+import { AppLink as Link } from "../../../components/elements"
 import styled from "@emotion/styled"
 import {
   isAfter,

src/components/screens/Search/Search.js

@@ -1,5 +1,5 @@
 import { Component } from "react"
-import { Link } from "react-router-dom"
+import { AppLink as Link } from "../../elements"
 /** @jsx jsx */
 import { jsx, css, keyframes } from "@emotion/core"
 import styled from "@emotion/styled"

src/components/screens/Start/Start.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { Link } from "react-router-dom"
+import { AppLink as Link } from "../../elements"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 

src/components/screens/Year/Year.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { Link } from "react-router-dom"
+import { AppLink as Link } from "../../../components/elements"
 import styled from "@emotion/styled"
 import { addYears, subYears, format, isThisYear, getMonth } from "date-fns"
 import { withTheme } from "emotion-theming"

src/pages/app.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import App from "../App"
+import Layout from "../components/Layout"
+
+export default () => (
+  <Layout>
+    <App />
+  </Layout>
+)

src/pages/index.js

@@ -0,0 +1,2 @@
+import Index from "../components/screens/Start/index"
+export default Index