styling

VueApp/src/App.vue

@@ -2,11 +2,11 @@
   <div>
     <nav class="navbar navbar-default">
       <div class="container-fluid">
+        <img class="navbar-left logo" src="./assets/PotentialEnergy.png">
         <div class="navbar-header">
-          <a class="navbar-brand" href="#">Potential Energy</a>
           <button
             id="qsLoginBtn"
-            class="btn btn-primary btn-margin"
+            class="btn btn-primary navbar-fixed-bottom"
             v-if="!authenticated"
             @click="login()">
               Log In
@@ -14,7 +14,7 @@
 
           <button
             id="qsLogoutBtn"
-            class="btn btn-primary btn-margin"
+            class="btn btn-primary btn-success btn-margin"
             v-if="authenticated"
             @click="logout()">
               Log Out
@@ -59,8 +59,13 @@ export default {
 
 <style>
 @import '../node_modules/bootstrap/dist/css/bootstrap.css';
-
+.logo {
+  height: 100px;
+  width: 100px;
+}
 .btn-margin {
-  margin-top: 7px
+  margin-top: 30px;
+  margin-left: 10px;
 }
+
 </style>

VueApp/src/components/GoogleMap.vue

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <h1>Temporary Instructions:</h1>
-    <h4>
-      Click the map in two places to begin.
-      You may drag either the markers or the route itself to adjust the path.
-    </h4>
     <div>
       <label>
         <gmap-autocomplete @place_changed="setPlace"></gmap-autocomplete>

VueApp/src/components/Main.vue

@@ -1,7 +1,10 @@
 <template>
   <div v-if="authenticated" class="main-container">
     <div class="appHeader">
-      <img src="http://via.placeholder.com/1000x100"/>
+      <h4>
+        Click the map in two places to begin.
+        You may drag either the markers or the route itself to adjust the path.
+      </h4>
     </div>
     <div class="mainMap">
       <GoogleMap v-on:updateRoute="updateElevation"/>