From 2232877ed5b3c0b60789940d2a367726ee8919c5 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 17 Jan 2018 16:45:17 +0100
Subject: Add some basic styling

---
 src/client/react/components/page/Index.js |  3 ++-
 src/client/react/index.js                 |  4 ++++
 src/client/style/index.scss               | 18 +++++++++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/react/components/page/Index.js b/src/client/react/components/page/Index.js
index a91d7a9..9b8dbd7 100644
--- a/src/client/react/components/page/Index.js
+++ b/src/client/react/components/page/Index.js
@@ -2,7 +2,8 @@ import React from 'react';
 import Search from '../container/Search';
 
 const App = () => (
-  <div>
+  <div className="page-index">
+    <img src="/icons/mml-logo.png" alt="Metis" />
     <Search />
   </div>
 );
diff --git a/src/client/react/index.js b/src/client/react/index.js
index a7006d4..e70b442 100644
--- a/src/client/react/index.js
+++ b/src/client/react/index.js
@@ -27,3 +27,7 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('root'),
 );
+
+// We only want to focus the input on page load. NOT on a in-javascript
+// redirect. This is because that is when people usually want to start typing.
+document.querySelector('.search input').focus();
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index 7c83c77..9fa267c 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -1,12 +1,28 @@
 body {
-  background-color: #ececec;
   font-family: 'Roboto';
+  margin: 0;
 }
 
 * {
   box-sizing: border-box;
 }
 
+.page-index {
+  background-color: #ececec;
+  padding-top: 24vh;
+  height: 100vh;
+
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .search {
+    margin: 0 auto;
+    margin-top: 64px;
+  }
+}
+
 .search {
   width: 580px;
   border-radius: 2px;
-- 
cgit v1.1