From 4493325429545c1c49ea4fd2b0d36a5c620fe829 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jorilallo@Joris-MacBook.local>
Date: Mon, 12 Sep 2016 22:19:59 -0700
Subject: [PATCH] Layout changes

---
 frontend/components/Layout/Layout.js | 60 ++++++++++++++--------------
 frontend/scenes/Home/Home.js         | 45 +++++++++++----------
 2 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index 6bec7cc94..891f2cb74 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -36,13 +36,13 @@ class Layout extends React.Component {
 
   @keydown(['/', 't'])
   search() {
-    // if (!this.props.search) return;
+    if (!this.props.user) return;
     _.defer(() => browserHistory.push('/search'));
   }
 
   @keydown(['d'])
   dashboard() {
-    // if (!this.props.search) return;
+    if (!this.props.user) return;
     _.defer(() => browserHistory.push('/'));
   }
 
@@ -75,34 +75,36 @@ class Layout extends React.Component {
             </span>
           </div>
           <Flex className={ styles.headerRight }>
-            { user.user && (
-              <Flex>
-                <Flex align="center" className={ styles.actions }>
-                  { this.props.actions }
-                </Flex>
-                { this.props.search && (
-                  <Flex>
-                    <div
-                      onClick={ this.search }
-                      className={ styles.search }
-                      title="Search (/)"
-                    >
-                      <img src={ require('assets/icons/search.svg') } alt="Search" />
-                    </div>
-                  </Flex>
-                ) }
-                <DropdownMenu
-                  label={ <Avatar
-                    circle
-                    size={ 24 }
-                    src={ user.user.avatarUrl }
-                  /> }
-                >
-                  <MenuItem to="/settings">Settings</MenuItem>
-                  <MenuItem onClick={ user.logout }>Logout</MenuItem>
-                </DropdownMenu>
+            <Flex>
+              <Flex align="center" className={ styles.actions }>
+                { this.props.actions }
               </Flex>
-            ) }
+              { user.user && (
+                <Flex>
+                  { this.props.search && (
+                    <Flex>
+                      <div
+                        onClick={ this.search }
+                        className={ styles.search }
+                        title="Search (/)"
+                      >
+                        <img src={ require('assets/icons/search.svg') } alt="Search" />
+                      </div>
+                    </Flex>
+                  ) }
+                  <DropdownMenu
+                    label={ <Avatar
+                      circle
+                      size={ 24 }
+                      src={ user.user.avatarUrl }
+                    /> }
+                  >
+                    <MenuItem to="/settings">Settings</MenuItem>
+                    <MenuItem onClick={ user.logout }>Logout</MenuItem>
+                  </DropdownMenu>
+                </Flex>
+              ) }
+            </Flex>
           </Flex>
         </div>
 
diff --git a/frontend/scenes/Home/Home.js b/frontend/scenes/Home/Home.js
index a39f60226..9bc841fc3 100644
--- a/frontend/scenes/Home/Home.js
+++ b/frontend/scenes/Home/Home.js
@@ -2,6 +2,9 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { browserHistory } from 'react-router'
 
+import { Flex } from 'reflexbox';
+import Layout from 'components/Layout';
+import CenteredContent from 'components/CenteredContent';
 import SlackAuthLink from 'components/SlackAuthLink';
 
 import styles from './Home.scss';
@@ -20,26 +23,28 @@ export default class Home extends React.Component {
 
   render() {
     return (
-      <div className={ styles.container }>
-        <div className={ styles.content }>
-          <div className={ styles.intro }>
-            <h1>Atlas</h1>
-            <p>Simple, fast, markdown.</p>
-            <p>We're building a modern wiki for engineering teams.</p>
-          </div>
-          <div className={ styles.action }>
-            <SlackAuthLink>
-              <img
-                alt="Sign in with Slack"
-                height="40"
-                width="172"
-                src="https://platform.slack-edge.com/img/sign_in_with_slack.png"
-                srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
-              />
-            </SlackAuthLink>
-          </div>
-        </div>
-      </div>
+      <Flex auto>
+        <Layout>
+          <CenteredContent>
+            <div className={ styles.intro }>
+              <h1>Atlas</h1>
+              <p>Simple, fast, markdown.</p>
+              <p>We're building a modern wiki for engineering teams.</p>
+            </div>
+            <div className={ styles.action }>
+              <SlackAuthLink>
+                <img
+                  alt="Sign in with Slack"
+                  height="40"
+                  width="172"
+                  src="https://platform.slack-edge.com/img/sign_in_with_slack.png"
+                  srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
+                />
+              </SlackAuthLink>
+            </div>
+          </CenteredContent>
+        </Layout>
+      </Flex>
     );
   }
 }