Client - update app style + add link in nav-bar

fittrackee_client/src/components/Footer.vue

@@ -62,6 +62,7 @@
       .footer-item {
         padding: 10px 10px;
 
+        border-top: solid 1px var(--footer-border-color);
         text-align: center;
       }
     }

fittrackee_client/src/components/NavBar.vue

@@ -1,8 +1,10 @@
 <template>
   <div id="nav">
-    <div class="container">
+    <div class="nav-container">
       <div class="nav-app-name">
-        <div class="nav-item app-name">FitTrackee</div>
+        <div class="nav-item app-name" @click="$router.push('/')">
+          FitTrackee
+        </div>
       </div>
       <div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
         <i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
@@ -104,6 +106,18 @@
     display: flex;
     padding: 15px 10px;
 
+    .nav-container {
+      display: flex;
+
+      margin-left: auto;
+      margin-right: auto;
+      padding: 0 15px 15px 15px;
+      max-width: $container-width;
+      width: 100%;
+
+      border-bottom: solid 1px var(--nav-border-color);
+    }
+
     a {
       &.router-link-exact-active {
         color: var(--nav-bar-link-active);
@@ -114,6 +128,10 @@
       font-size: 1.2em;
       font-weight: bold;
       margin-right: 10px;
+
+      &:hover {
+        cursor: pointer;
+      }
     }
 
     .fa {

fittrackee_client/src/scss/base.scss

@@ -23,17 +23,8 @@ a {
   text-decoration: none;
 }
 
-.container {
-  display: flex;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-  max-width: $container-width;
-  width: 100%;
-}
-
 button {
+  background: var(--app-background-color);
   border: solid 1px var(--app-color);
   border-radius: 0;
   box-shadow: 2px 2px 2px var(--app-shadow-color);

fittrackee_client/src/scss/colors.scss

@@ -1,12 +1,14 @@
 :root {
-  --app-background-color: #eaeaea;
+  --app-background-color: #FFFFFF;
   --app-color: #2c3e50;
   --app-a-color: #40578a;
 
   --nav-bar-background-color: #FFFFFF;
   --nav-bar-link-active: #485b6e;
+  --nav-border-color: #c5ccdb;
 
   --footer-background-color: #FFFFFF;
+  --footer-border-color: #ebeef3;
   --footer-color: #8b8c8c;
 
   --app-shadow-color: lightgrey;