aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/react/components/page/Index.js3
-rw-r--r--src/client/react/index.js4
-rw-r--r--src/client/style/index.scss18
3 files changed, 23 insertions, 2 deletions
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;