make it pretty

frontend/src/App.vue

@@ -1,8 +1,12 @@
 <template>
     <div id="app">
+        <b-navbar type="dark" variant="info">
+            <b-navbar-brand>Happy</b-navbar-brand>
+        </b-navbar>
         <div v-show="err">{{err}}</div>
         <user-info class="fixed-bottom userInfo"/>
-        <Chooser/>
+        <h1 class="question">How are you?</h1>
+        <Chooser class="chooser"/>
     </div>
 </template>
 
@@ -29,11 +33,17 @@
         font-family: 'Avenir', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        text-align: center;
         color: #2c3e50;
-        margin-top: 60px;
+    }
+    .chooser {
+        text-align: center;
     }
     .userInfo {
+        text-align: center;
         margin-bottom: 1em;
     }
+    .question {
+        text-align: center;
+        padding-top: 1em;
+    }
 </style>

frontend/src/components/ChoiceButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <b-button v-on:click="click" variant="outline-primary" class="moodButton">{{mood.Key}}</b-button>
+    <b-button v-on:click="click" variant="outline-info" class="moodButton">{{mood.Key}}</b-button>
 </template>
 
 <script>
@@ -18,7 +18,7 @@
 
 <style scoped>
 .moodButton {
-    font-size: 24pt;
+    font-size: 48pt;
     margin: 1em;
 }
 </style>