diff options
| -rw-r--r-- | src/client/react/components/page/Index.js | 3 | ||||
| -rw-r--r-- | src/client/react/index.js | 4 | ||||
| -rw-r--r-- | src/client/style/index.scss | 18 |
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; |