Layout refinments

src/containers/App.css

@@ -0,0 +1,43 @@
+.alignable {
+  margin: 0px auto;
+}
+
+@media (max-width: 749px) and (min-width: 495px) {
+  .alignable {
+    width: 495px;
+  }
+}
+
+@media (max-width: 1004px) and (min-width: 750px) {
+  .alignable {
+    width: 750px;
+  }
+}
+
+@media (max-width: 1259px) and (min-width: 1005px) {
+  .alignable {
+    width: 1005px;
+  }
+}
+
+@media (max-width: 1514px) and (min-width: 1260px) {
+  .alignable {
+    width: 1260px;
+  }
+}
+
+@media (max-width: 1769px) and (min-width: 1515px) {
+  .alignable {
+    width: 1515px;
+  }
+}
+
+@media (min-width: 1770px) {
+  .alignable {
+    width: 1770px;
+  }
+}
+
+.main {
+  padding-top: 60px;
+}

src/containers/App.js

@@ -5,6 +5,7 @@ import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
 import { LIST_POSTS, LIST_FAQ, HELP, MORE_COMMANDS } from '../actions/findbar';
 import FindBar from './FindBar';
+import styles from './App.css';
 
 class App extends React.Component {
   componentDidMount() {
@@ -70,12 +71,18 @@ class App extends React.Component {
 
     return (
       <div>
-        <FindBar commands={[
-          { id: LIST_POSTS, pattern: 'List Posts' },
-          { id: LIST_FAQ, pattern: 'List FAQs' },
-          { id: HELP, pattern: 'Help' },
-        ]} />
-        {children}
+        <header>
+          <div className={styles.alignable}>
+            <FindBar commands={[
+              { id: LIST_POSTS, pattern: 'List Posts' },
+              { id: LIST_FAQ, pattern: 'List FAQs' },
+              { id: HELP, pattern: 'Help' },
+            ]} />
+          </div>
+        </header>
+        <div className={`${styles.alignable} ${styles.main}`}>
+          {children}
+        </div>
       </div>
     );
   }

src/containers/FindBar.css

@@ -10,9 +10,8 @@
   position: relative;
   background-color: var(--backgroundColor);
   padding: 1px 0;
-  margin-bottom: 50px;
+  margin: 4px auto;
 }
-
 .inputArea {
   display: table;
   width: calc(100% - 10px);