From 73f590169d43679731ced27c6a3bb974e7a2c6b1 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Tue, 4 Oct 2016 17:12:54 -0700
Subject: [PATCH 01/17] trying to fix font sizes

---
 src/App.vue                  | 29 +++++++-----
 src/components/Dashboard.vue | 24 +++++-----
 src/components/Goal.vue      |  4 +-
 src/components/Profile.vue   | 90 +++++++++++++++++-------------------
 src/components/Settings.vue  | 24 +++++++---
 5 files changed, 91 insertions(+), 80 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c55f9ff..e6083f1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,55 +26,60 @@
 </script>
 
 <style>
-  .global-font-size {
-    font-size: 50px;
-  }
-  .navbar-one {
-    position: fixed; 
-    bottom: 0px; 
-    width: 100%;
-  }
-  body {
+  /* body {
     align-items: center;
     justify-content: center;
     padding: 5px !important;
     flex-wrap: nowrap !important;
     background-color: ghostwhite !important;
+  } */
+
+  .navbar-one {
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
   }
+
   .wrapper {
-    height: 81vh !important;
-    width: 100% !important;
+    height: 81vh;
+    width: 100%;
   }
+/* 
   .btn-padding {
     padding: 10px !important;
     font-size: 20px !important;
     text-transform: uppercase !important;
     height: 150px !important;
   }
+
   .red-nav {
     color: red !important;
     border-color: red !important;
     background-color: white !important;
   }
+
   .red-nav:hover {
     background-color: black !important;
     color: white !important;
     border-color: red !important;
     background-color: white;
   }
+
   .red-nav:focus {
     background-color: black !important;
     color: white !important;
     border-color: red !important;
     background-color: white;
   }
+
   .red-nav:active {
     background-color: black !important;
     color: white !important;
     border-color: white !important;
     background-color: white;
   }
+
   .lil-marg {
     margin-right: 25px !important;
-  }
+  } */
 </style>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index ba98b6f..6a0a4ce 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,35 +1,33 @@
 <template>
 
-<div class="global-font-size">
+<div class="content is-large">
     <div class="is-mobile lil-marg">
         <div class="has-text-right page-title">Dashboard</div>
     </div>
     <div class="card is-fullwidth margin-dash">
         <div class="card-content">
             <div class="content">
-                <strong>Goal Name</strong> username with GoalProvider
+                <h1 class=""><strong>Goal Name</strong> username with GoalProvider</h1>
                 <progress class="progress is-small is-success" value="15" max="100">15%</progress>
-                percentage of goal completion%
+                <h3>percentage of goal completion%</h3>
             </div>
         </div>
     </div>
     <div class="card is-fullwidth margin-dash">
         <div class="card-content">
             <div class="content">
-                <strong>Treehouse</strong> comrww
-                <img src="../assets/treehouse-logo.png" class="is-pulled-right goal-provider-icon">
+                <h1><strong>Treehouse</strong> comrww <img src="../assets/treehouse-logo.png" class="is-pulled-right goal-provider-icon"></h1>
                 <progress class="progress is-small is-success" value="45" max="100">45%</progress>
-                45%
+                <h3>45%</h3>
             </div>
         </div>
     </div>
     <div class="card is-fullwidth margin-dash">
         <div class="card-content">
             <div class="content">
-                <strong>DuoLingo</strong> comrww
-                <img src="../assets/duolingo-logo.png" class="is-pulled-right goal-provider-icon">
+                <h1><strong>DuoLingo</strong> comrww <img src="../assets/duolingo-logo.png" class="is-pulled-right goal-provider-icon"></h1>
                 <progress class="progress is-small is-success" value="5" max="100">5%</progress>
-                5%
+                <h3>5%</h3>
             </div>
         </div>
     </div>
@@ -52,14 +50,14 @@ export default {
 
 <style lang="css" scoped>
 .margin-dash {
-	margin-top: 15px;
+	margin-top: 1rem;
 }
 .page-title {
-  font-size: 40px; 
+  font-size: 3rem;
   color: #587272;
 }
 .goal-provider-icon {
-  height: 50px; 
-  width: 50px;
+  height: 4rem;
+  width: 4rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Goal.vue b/src/components/Goal.vue
index 882e96d..9d57db1 100644
--- a/src/components/Goal.vue
+++ b/src/components/Goal.vue
@@ -1,6 +1,6 @@
 <template>
-	
-<div class="global-font-size">
+
+<div class="content">
     <div class="is-mobile lil-marg">
         <div class="has-text-right main-title">New Goal</div>
     </div>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 0d455c5..8615bb5 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,31 +1,27 @@
 <template>
 
-<div class="global-font-size">
-    <div class="is-mobile lil-marg">
-        <div class="has-text-right page-title">Profile Settings</div>
-    </div>
-    <div class="card is-fullwidth">
-        <div class="card-content">
-            <div class="content">
-                <form action="" class="form-horizontal b-pad">
-                    <label class="label super-mario" for="">name</label>
-                    <input placeholder="Ryan Wilson" class="input super-mario h-fix" type="text" disabled>
-                    <br>
-                    <label class="label super-mario" for="">username</label>
-                    <input placeholder="comrww" class="input super-mario h-fix" type="text" disabled>
-                    <br>
-                    <label class="label super-mario" for="">password</label>
-                    <input placeholder="Thelion1" class="input super-mario h-fix" type="password" disabled>
-                    <br>
-                    <label class="label super-mario" for="">age</label>
-                    <input placeholder="25" class="input super-mario h-fix" type="text" disabled>
-                    <br>
-                    <br>
-                    <button class="button red-nav btn-on-profile">Edit</button>
-                </form>
-            </div>
-        </div>
-    </div>
+<div class="content">
+  <div class="">
+    <div class="has-text-right page-title">Profile Settings</div>
+  </div>
+
+  <div class="control box profileForm">
+    <label class="label"><h1 class="is-large title">name</h1></label>
+    <input placeholder="Ryan Wilson" class="input is-large" type="text" disabled>
+
+    <label class="label"><h1 class="is-large title">username</h1></label>
+    <input placeholder="comrww" class="input is-large" type="text" disabled>
+
+    <label class="label"><h1 class="is-large title">password</h1></label>
+    <input placeholder="••••••" class="input is-large" type="password" disabled>
+
+    <label class="label"><h1 class="is-large title">confirm password</h1></label>
+    <input placeholder="••••••" class="input is-large" type="password" disabled>
+
+    <label class="label"><h1 class="is-large title">age</h1></label>
+    <input placeholder="25" class="input is-large" type="text" disabled>
+    <button class="button red-nav edit-btn">Edit</button>
+  </div>
 </div>
 
 </template>
@@ -50,30 +46,30 @@ export default {
 </script>
 
 <style lang="css" scoped>
-	/*fix for viewing on mobile device*/
-	.super-mario {
-		font-size: 40px !important;
-		line-height: 200%;
-	}
-	.btn-on-profile {
-	    padding: 10px !important;
-	    font-size: 20px !important;
-	    text-transform: uppercase !important;
-	    height: 100px !important;
-	    width: 200px !important;
-	    font-size: 30px !important;
-  	}
-	.some-padding-profile {
-		padding-top: 50px;
-	}
-	.h-fix {
-		height: 100px !important;
+
+  .input{
+    margin-bottom: 2%;
+  }
+
+  .profileForm{
+    font-size: 2rem;
+  }
+
+	.edit-btn {
+    padding: .8rem;
+    font-size: 1.25rem;
+    text-transform: uppercase;
+    height: 7rem;
+    width: 14rem;
+    font-size: 2.5rem;
 	}
-	.b-pad {
-		padding-bottom: 15px;
+
+	.btn-padding {
+		padding-bottom: 1rem;
 	}
+
 	.page-title {
-		font-size: 40px; 
+		font-size: 3rem;
 		color: #587272;
 	}
 </style>
\ No newline at end of file
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 0675142..f5d0513 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,16 +1,25 @@
 <template>
-  <div class="global-font-size">  
-	<div class="is-mobile lil-marg">
-  		<div class="has-text-right page-title">Settings</div>
+  <div class="content is-large">
+  	<div class="is-mobile lil-marg">
+  	  <div class="has-text-right page-title">Settings</div>
   	</div>
 
     <!-- Terms and Condition of Application Use -->
   <div class="card is-fullwidth margin-dash">
     <div class="card-content">
       <div class="content">
-        <div v-on:click = "showTerms = !showTerms" v-show = "showTerms"><strong>Terms & Conditions</strong><i class="fa fa-plus is-pulled-right page-headings" aria-hidden="true"></i></div>
-         <div v-on:click = "showTerms = !showTerms" v-show = "!showTerms"><strong>Terms & Conditions</strong><i class="fa fa-minus is-pulled-right page-headings" aria-hidden="true"></i></div>
-      <div v-show = "!showTerms">
+        <div v-on:click = "showTerms = !showTerms" v-show = "showTerms">
+          <h1>
+            <strong>Terms & Conditions</strong>
+          </h1><i class="fa fa-plus is-pulled-right page-headings" aria-hidden="true"></i>
+        </div>
+
+        <div v-on:click = "showTerms = !showTerms" v-show = "!showTerms">
+          <h1>
+            <strong>Terms & Conditions</strong>
+          </h1><i class="fa fa-minus is-pulled-right page-headings" aria-hidden="true"></i>
+        </div>
+      <div v-show = "!showTerms" class="content">
       <p>These terms and conditions outline the rules and regulations for the use of  Incentify's Website. <br />
         <span style="text-transform: capitalize;">Incentify</span> is located at:<br />
         <address>
@@ -156,13 +165,16 @@ export default {
 .margin-dash {
   margin-top: 15px;
 }
+
 .lil-marg {
   margin-right: 25px !important;
 }
+
 .page-title {
   font-size: 40px;
   color: #587272;
 }
+
 .page-headings {
   font-size: 60px;
 }

From 15cf2bdae29729ba2d655ccaf737ed5f89ca12a3 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 10:10:46 -0700
Subject: [PATCH 02/17] fixed top branding padding

---
 src/components/top-branding.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/top-branding.vue b/src/components/top-branding.vue
index a9bf1b2..209bae8 100644
--- a/src/components/top-branding.vue
+++ b/src/components/top-branding.vue
@@ -1,9 +1,7 @@
 <template>
-	<div class="box">
-	    <div class="btn-group btn-group-block">
-	          <a class="btn top-padding red-nav" href="#" v-link="{path:'dashboard'}"><img src="../assets/incentify-logo-rectangle.png"></a>
-	    </div>
-	  </div>
+	<div class="box box-slim">
+      <a class="btn top-padding red-nav" href="#" v-link="{path:'dashboard'}"><img class="logo-size" src="../assets/incentify-logo-rectangle.png"></a>
+  </div>
 </template>
 
 <script>
@@ -20,10 +18,18 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.top-padding {
-    padding: 10px !important;
-    font-size: 20px !important;
+  .top-padding {
+    /* padding: 10px !important; */
+    /* font-size: 20px !important; */
     text-transform: uppercase !important;
-    height: 120px !important;
+    /* height: 120px !important; */
+  }
+
+  .logo-size{
+    width: 12rem;
+  }
+
+  .box-slim{
+    padding: 1%;
   }
 </style>
\ No newline at end of file

From cd88b83a1ba59369d25be5963bff1530d5949135 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 10:12:20 -0700
Subject: [PATCH 03/17] code cleanup

---
 src/components/top-branding.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/top-branding.vue b/src/components/top-branding.vue
index 209bae8..93a050b 100644
--- a/src/components/top-branding.vue
+++ b/src/components/top-branding.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="box box-slim">
-      <a class="btn top-padding red-nav" href="#" v-link="{path:'dashboard'}"><img class="logo-size" src="../assets/incentify-logo-rectangle.png"></a>
+      <a class="btn red-nav" href="#"><img class="logo-size" src="../assets/incentify-logo-rectangle.png"></a>
   </div>
 </template>
 
@@ -18,12 +18,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-  .top-padding {
-    /* padding: 10px !important; */
-    /* font-size: 20px !important; */
-    text-transform: uppercase !important;
-    /* height: 120px !important; */
-  }
 
   .logo-size{
     width: 12rem;

From 2872fc7e15728202f7e5912b1c27194e7ab774cf Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 10:49:54 -0700
Subject: [PATCH 04/17] navbar has colors that stay on clicking different tabs

---
 src/components/navbar.vue | 61 ++++++++++++++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 49a907e..535644f 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,26 +1,67 @@
 <template>
 
-  <footer class="card-footer">
-    <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'dashboard'}"><i class="fa fa-tachometer navbar-font-size" aria-hidden="true"></i></a>
+  <!-- <footer class="card-footer navbar-background-color"> -->
+    <!-- <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'dashboard'}"><i class="fa fa-tachometer navbar-font-size" aria-hidden="true"></i></a>
     <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'profile'}"><i class="fa fa-user navbar-font-size" aria-hidden="true"></i></a>
     <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'settings'}"><i class="fa fa-cog navbar-font-size" aria-hidden="true"></i></a>
-    <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'goal'}"><i class="fa fa-plus navbar-font-size" aria-hidden="true"></i></a>
-  </footer>
+    <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'goal'}"><i class="fa fa-plus navbar-font-size" aria-hidden="true"></i></a> -->
+
+    <div class="tabs is-toggle is-fullwidth navbar-background-color">
+      <ul>
+        <!-- class binding works by checking if the tab key equals the @click value  -->
+        <li v-bind:class="{ 'is-active': isActive.tab === 1}">
+          <a v-link="{path:'dashboard'}" @click="isActive.tab = 1">
+            <span class="icon"><i class="fa fa-tachometer navbar-font-size" aria-hidden="true"></i></span>
+          </a>
+        </li>
+
+        <li v-bind:class="{ 'is-active': isActive.tab === 2}">
+          <a v-link="{path:'profile'}" @click="isActive.tab = 2">
+            <span class="icon"><i class="fa fa-user navbar-font-size" aria-hidden="true"></i></span>
+          </a>
+        </li>
+
+        <li v-bind:class="{ 'is-active': isActive.tab === 3}">
+          <a v-link="{path:'settings'}" @click="isActive.tab = 3">
+            <span class="icon"><i class="fa fa-cog navbar-font-size" aria-hidden="true"></i></span>
+          </a>
+        </li>
+
+        <li v-bind:class="{ 'is-active': isActive.tab === 4}">
+          <a v-link="{path:'goal'}" @click="isActive.tab = 4">
+            <span class="icon"><i class="fa fa-plus navbar-font-size" aria-hidden="true"></i></span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  <!-- </footer> -->
 
 </template>
 
 <script>
   export default {
-    // components: {
-    // }
+    data() {
+      return {
+        isActive: {
+          tab: 1,
+        },
+      };
+    },
+    methods: {
+      changeTabColor() {
+        this.isActive = !this.isActive;
+      },
+    },
   };
 </script>
 
 <style scoped>
-.remove-all-padding {
-  padding: 0;
-}
+
 .navbar-font-size {
-  font-size: 60px;
+  font-size: 2.5rem;
+}
+
+.navbar-background-color{
+  background-color: ghostwhite;
 }
 </style>

From 57fc003e74144d18ee0829774680e17321b1eda4 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 10:55:43 -0700
Subject: [PATCH 05/17] refactoring Dashboard style

---
 src/components/Dashboard.vue | 48 ++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 6a0a4ce..9d3ffbb 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,33 +1,26 @@
 <template>
 
-<div class="content is-large">
+<div class="content">
     <div class="is-mobile lil-marg">
         <div class="has-text-right page-title">Dashboard</div>
     </div>
-    <div class="card is-fullwidth margin-dash">
-        <div class="card-content">
-            <div class="content">
-                <h1 class=""><strong>Goal Name</strong> username with GoalProvider</h1>
-                <progress class="progress is-small is-success" value="15" max="100">15%</progress>
-                <h3>percentage of goal completion%</h3>
-            </div>
-        </div>
-    </div>
-    <div class="card is-fullwidth margin-dash">
+
+    <div class="card is-fullwidth goal-vertical-spacing">
         <div class="card-content">
             <div class="content">
                 <h1><strong>Treehouse</strong> comrww <img src="../assets/treehouse-logo.png" class="is-pulled-right goal-provider-icon"></h1>
                 <progress class="progress is-small is-success" value="45" max="100">45%</progress>
-                <h3>45%</h3>
+                <h3>45% of {{55}} Points</h3> Time Remaining: 1 day, 23 hours, 21 minutes
             </div>
         </div>
     </div>
-    <div class="card is-fullwidth margin-dash">
+
+    <div class="card is-fullwidth goal-vertical-spacing">
         <div class="card-content">
             <div class="content">
                 <h1><strong>DuoLingo</strong> comrww <img src="../assets/duolingo-logo.png" class="is-pulled-right goal-provider-icon"></h1>
                 <progress class="progress is-small is-success" value="5" max="100">5%</progress>
-                <h3>5%</h3>
+                <h3>5% of {{55}} Points</h3> Time Remaining: 2 days, 3 hours, 10 minutes
             </div>
         </div>
     </div>
@@ -38,8 +31,6 @@
 <script>
 export default {
 
-  // name: 'component_name',
-
   data() {
     return {
 
@@ -49,15 +40,18 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.margin-dash {
-	margin-top: 1rem;
-}
-.page-title {
-  font-size: 3rem;
-  color: #587272;
-}
-.goal-provider-icon {
-  height: 4rem;
-  width: 4rem;
-}
+    .goal-vertical-spacing {
+    	margin-top: .75rem;
+    }
+
+    .page-title {
+      font-size: 1.8rem;
+      color: #587272;
+      margin-right: 3%;
+    }
+
+    .goal-provider-icon {
+      height: 2.2rem;
+      width: 2.2rem;
+    }
 </style>
\ No newline at end of file

From 40215c50a97e2bc8faa4cb8235ee5fefcb9bfa79 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:29:16 -0700
Subject: [PATCH 06/17] commented in a note about the webroot for cordova vs
 server

---
 config/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/config/index.js b/config/index.js
index 1f608ad..83a084b 100644
--- a/config/index.js
+++ b/config/index.js
@@ -7,7 +7,8 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    // remove the dot below if you want it for webroot vs cordova
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

From c97e428298bc4719956369f3c9fa015d953bdea1 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:31:09 -0700
Subject: [PATCH 07/17] removed this component

---
 src/components/header.vue | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/components/header.vue

diff --git a/src/components/header.vue b/src/components/header.vue
deleted file mode 100644
index 6bb066d..0000000
--- a/src/components/header.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-</template>
-
-<script>
-export default {
-
-  name: 'component_name',
-
-  data() {
-    return {
-
-    };
-  },
-};
-</script>
-
-<style lang="css" scoped>
-</style>
\ No newline at end of file

From cc46183600dd0454ae55c2d7581f18ef50969a16 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:31:32 -0700
Subject: [PATCH 08/17] resized inputs

---
 src/components/Profile.vue | 48 ++++++++++++++------------------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 8615bb5..746ea61 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -5,25 +5,26 @@
     <div class="has-text-right page-title">Profile Settings</div>
   </div>
 
-  <div class="control box profileForm">
-    <label class="label"><h1 class="is-large title">name</h1></label>
-    <input placeholder="Ryan Wilson" class="input is-large" type="text" disabled>
+  <div class="control card is-fullwidth">
+    <div class="card-content">
+      <label class="label"><h2 class="is-large title">name</h2></label>
+      <input class="input" type="text" disabled>
 
-    <label class="label"><h1 class="is-large title">username</h1></label>
-    <input placeholder="comrww" class="input is-large" type="text" disabled>
+      <label class="label"><h2 class="">username</h2></label>
+      <input class="input" type="text" disabled>
 
-    <label class="label"><h1 class="is-large title">password</h1></label>
-    <input placeholder="••••••" class="input is-large" type="password" disabled>
+      <label class="label"><h2 class="">password</h2></label>
+      <input class="input" type="password" disabled>
 
-    <label class="label"><h1 class="is-large title">confirm password</h1></label>
-    <input placeholder="••••••" class="input is-large" type="password" disabled>
+      <label class="label"><h2 class="">confirm password</h2></label>
+      <input class="input" type="password" disabled>
 
-    <label class="label"><h1 class="is-large title">age</h1></label>
-    <input placeholder="25" class="input is-large" type="text" disabled>
-    <button class="button red-nav edit-btn">Edit</button>
+      <label class="label"><h2 class="">age</h2></label>
+      <input class="input" type="text" disabled>
+      <button class="button is-large red-nav">Edit</button>
+    </div>
   </div>
 </div>
-
 </template>
 
 <script>
@@ -51,25 +52,10 @@ export default {
     margin-bottom: 2%;
   }
 
-  .profileForm{
-    font-size: 2rem;
-  }
-
-	.edit-btn {
-    padding: .8rem;
-    font-size: 1.25rem;
-    text-transform: uppercase;
-    height: 7rem;
-    width: 14rem;
-    font-size: 2.5rem;
-	}
-
-	.btn-padding {
-		padding-bottom: 1rem;
-	}
-
 	.page-title {
-		font-size: 3rem;
+		font-size: 1.8rem;
 		color: #587272;
+    margin-right: 2%;
+    padding-bottom: 2%;
 	}
 </style>
\ No newline at end of file

From d7b261a2375fe0684865b374105c532b0f169510 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:31:50 -0700
Subject: [PATCH 09/17] reordered components, removed Settings

---
 src/components/navbar.vue | 63 +++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 535644f..b329241 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,40 +1,37 @@
 <template>
 
-  <!-- <footer class="card-footer navbar-background-color"> -->
-    <!-- <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'dashboard'}"><i class="fa fa-tachometer navbar-font-size" aria-hidden="true"></i></a>
-    <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'profile'}"><i class="fa fa-user navbar-font-size" aria-hidden="true"></i></a>
-    <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'settings'}"><i class="fa fa-cog navbar-font-size" aria-hidden="true"></i></a>
-    <a class="card-footer-item btn-padding red-nav" href="#" v-link="{path:'goal'}"><i class="fa fa-plus navbar-font-size" aria-hidden="true"></i></a> -->
+  <div class="tabs is-toggle is-fullwidth navbar-background-color">
+    <ul>
+      <!-- class binding works by checking if the tab key equals the @click value  -->
+      <!-- Dashboard -->
+      <li v-bind:class="{ 'is-active': isActive.tab === 1}">
+        <a v-link="{path:'dashboard'}" @click="isActive.tab = 1">
+          <span class="icon"><i class="fa fa-tachometer navbar-font-size" aria-hidden="true"></i></span>
+        </a>
+      </li>
 
-    <div class="tabs is-toggle is-fullwidth navbar-background-color">
-      <ul>
-        <!-- class binding works by checking if the tab key equals the @click value  -->
-        <li v-bind:class="{ 'is-active': isActive.tab === 1}">
-          <a v-link="{path:'dashboard'}" @click="isActive.tab = 1">
-            <span class="icon"><i class="fa fa-tachometer navbar-font-size" aria-hidden="true"></i></span>
-          </a>
-        </li>
+      <!-- Goal -->
+      <li v-bind:class="{ 'is-active': isActive.tab === 4}">
+        <a v-link="{path:'goal'}" @click="isActive.tab = 4">
+          <span class="icon"><i class="fa fa-plus navbar-font-size" aria-hidden="true"></i></span>
+        </a>
+      </li>
 
-        <li v-bind:class="{ 'is-active': isActive.tab === 2}">
-          <a v-link="{path:'profile'}" @click="isActive.tab = 2">
-            <span class="icon"><i class="fa fa-user navbar-font-size" aria-hidden="true"></i></span>
-          </a>
-        </li>
+      <!-- Profile -->
+      <li v-bind:class="{ 'is-active': isActive.tab === 2}">
+        <a v-link="{path:'profile'}" @click="isActive.tab = 2">
+          <span class="icon"><i class="fa fa-user navbar-font-size" aria-hidden="true"></i></span>
+        </a>
+      </li>
 
-        <li v-bind:class="{ 'is-active': isActive.tab === 3}">
-          <a v-link="{path:'settings'}" @click="isActive.tab = 3">
-            <span class="icon"><i class="fa fa-cog navbar-font-size" aria-hidden="true"></i></span>
-          </a>
-        </li>
-
-        <li v-bind:class="{ 'is-active': isActive.tab === 4}">
-          <a v-link="{path:'goal'}" @click="isActive.tab = 4">
-            <span class="icon"><i class="fa fa-plus navbar-font-size" aria-hidden="true"></i></span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  <!-- </footer> -->
+      <!-- Settings -->
+     <!--  <li v-bind:class="{ 'is-active': isActive.tab === 3}">
+        <a v-link="{path:'settings'}" @click="isActive.tab = 3">
+          <span class="icon"><i class="fa fa-cog navbar-font-size" aria-hidden="true"></i></span>
+        </a>
+      </li> -->
+    </ul>
+  </div>
 
 </template>
 
@@ -58,7 +55,7 @@
 <style scoped>
 
 .navbar-font-size {
-  font-size: 2.5rem;
+  font-size: 3rem;
 }
 
 .navbar-background-color{

From afce37a17c4eb0696c504c1cd55a24bd5c884dcc Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:32:35 -0700
Subject: [PATCH 10/17] just commiting to get rid of it, deprecated component

---
 src/components/Settings.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index f5d0513..7d608be 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -150,8 +150,6 @@
 <script>
 export default {
 
-  // name: 'component_name',
-
   data() {
     return {
       showTerms: true,
@@ -163,19 +161,19 @@ export default {
 
 <style lang="css" scoped>
 .margin-dash {
-  margin-top: 15px;
+  /* margin-top: 15px; */
 }
 
 .lil-marg {
-  margin-right: 25px !important;
+  /* margin-right: 25px !important; */
 }
 
 .page-title {
-  font-size: 40px;
+  /* font-size: 40px; */
   color: #587272;
 }
 
 .page-headings {
-  font-size: 60px;
+  /* font-size: 60px; */
 }
 </style>
\ No newline at end of file

From 6f5ef614560828156b4dc05d815d98412fb2323b Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:33:05 -0700
Subject: [PATCH 11/17] capitalizing navbar component

---
 src/App.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e6083f1..4b6bac4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,22 +3,20 @@
     <!-- route outlet -->
     <top-branding></top-branding>
     <router-view class="wrapper"></router-view>
-    <navbar class="navbar-one"></navbar>
+    <Navbar class="Navbar-one"></Navbar>
   </div>
 </template>
 
 <script>
-  import navbar from './components/navbar';
+  import Navbar from './components/Navbar';
   import topBranding from './components/top-branding';
 
-  // require('spectre.css/dist/spectre.css');
-  // require('bulma/css/bulma.css');
   require('bulma/bulma.sass');
   require('font-awesome/css/font-awesome.css');
 
   export default {
     components: {
-      navbar,
+      Navbar,
       topBranding,
     },
     replace: false,
@@ -34,7 +32,7 @@
     background-color: ghostwhite !important;
   } */
 
-  .navbar-one {
+  .Navbar-one {
     position: fixed;
     bottom: 0px;
     width: 100%;

From 114b7f6c4c8499a2098e0166ff3dac728008318d Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:33:50 -0700
Subject: [PATCH 12/17] unfinished commit, commented out styles

---
 src/components/Goal.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Goal.vue b/src/components/Goal.vue
index 9d57db1..4df1f77 100644
--- a/src/components/Goal.vue
+++ b/src/components/Goal.vue
@@ -99,15 +99,15 @@ export default {
 
 <style lang="css" scoped>
   .margin-goal {
-    margin-top: 15px !important;
+    /* margin-top: 15px !important; */
   }
   .btn-on-goal {
-    padding: 10px !important;
-    font-size: 20px !important;
+    /* padding: 10px !important; */
+    /* font-size: 20px !important; */
     text-transform: uppercase !important;
-    height: 100px !important;
-    width: 200px !important;
-    font-size: 30px !important;
+    /* height: 100px !important; */
+    /* width: 200px !important; */
+    /* font-size: 30px !important; */
   }
   .red-inverse-nav {
     color: white !important;
@@ -131,25 +131,25 @@ export default {
   }
   /*General Heigh Fix for Mobilization*/
   .h-fix {
-    height: 100px !important;
+    /* height: 100px !important; */
   }
   .set-goal {
-    font-size: 40px !important;
+    /* font-size: 40px !important; */
     line-height: 200%;
   }
   .main-title {
-    font-size: 40px; 
+    /* font-size: 40px;  */
     color: #587272;
   }
   .set-icon-size {
-    font-size: 60px;
+    /* font-size: 60px; */
   }
   .more-button-width {
-    width: 300px !important;
+    /* width: 300px !important; */
   }
   .formatting-around-dollar-sign {
     color: red !important; 
     text-align: center !important; 
-    width: 100px !important;
+    /* width: 100px !important; */
   }
 </style>
\ No newline at end of file

From bf445148829479afad3e4e6502c24972d5b66262 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:46:38 -0700
Subject: [PATCH 13/17] un-capitalizing navbar

---
 src/App.vue               | 23 +++++------------------
 src/components/navbar.vue | 12 ++++++------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4b6bac4..df8006a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,12 @@
     <!-- route outlet -->
     <top-branding></top-branding>
     <router-view class="wrapper"></router-view>
-    <Navbar class="Navbar-one"></Navbar>
+    <navbar class="navbar-one"></navbar>
   </div>
 </template>
 
 <script>
-  import Navbar from './components/Navbar';
+  import navbar from './components/navbar';
   import topBranding from './components/top-branding';
 
   require('bulma/bulma.sass');
@@ -16,7 +16,7 @@
 
   export default {
     components: {
-      Navbar,
+      navbar,
       topBranding,
     },
     replace: false,
@@ -24,15 +24,8 @@
 </script>
 
 <style>
-  /* body {
-    align-items: center;
-    justify-content: center;
-    padding: 5px !important;
-    flex-wrap: nowrap !important;
-    background-color: ghostwhite !important;
-  } */
 
-  .Navbar-one {
+  .navbar-one {
     position: fixed;
     bottom: 0px;
     width: 100%;
@@ -42,13 +35,7 @@
     height: 81vh;
     width: 100%;
   }
-/* 
-  .btn-padding {
-    padding: 10px !important;
-    font-size: 20px !important;
-    text-transform: uppercase !important;
-    height: 150px !important;
-  }
+/*
 
   .red-nav {
     color: red !important;
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index b329241..4e28175 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -54,11 +54,11 @@
 
 <style scoped>
 
-.navbar-font-size {
-  font-size: 3rem;
-}
+  .navbar-font-size {
+    font-size: 3rem;
+  }
 
-.navbar-background-color{
-  background-color: ghostwhite;
-}
+  .navbar-background-color{
+    background-color: ghostwhite;
+  }
 </style>

From 61bb10e5daa00c549ba8c08edf5b4465e7485e72 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 11:46:51 -0700
Subject: [PATCH 14/17] indented styles

---
 src/components/Goal.vue     |  4 ++--
 src/components/Register.vue |  6 +++---
 src/components/Settings.vue | 32 ++++++++++++++++----------------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Goal.vue b/src/components/Goal.vue
index 4df1f77..f688a43 100644
--- a/src/components/Goal.vue
+++ b/src/components/Goal.vue
@@ -135,7 +135,7 @@ export default {
   }
   .set-goal {
     /* font-size: 40px !important; */
-    line-height: 200%;
+    /* line-height: 200%; */
   }
   .main-title {
     /* font-size: 40px;  */
@@ -149,7 +149,7 @@ export default {
   }
   .formatting-around-dollar-sign {
     color: red !important; 
-    text-align: center !important; 
+    /* text-align: center !important;  */
     /* width: 100px !important; */
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 72e9d8b..e462255 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -17,7 +17,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1 {
-  color: #14b1ff;
-}
+  h1 {
+    color: #14b1ff;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 7d608be..51a6309 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -160,20 +160,20 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.margin-dash {
-  /* margin-top: 15px; */
-}
-
-.lil-marg {
-  /* margin-right: 25px !important; */
-}
-
-.page-title {
-  /* font-size: 40px; */
-  color: #587272;
-}
-
-.page-headings {
-  /* font-size: 60px; */
-}
+  .margin-dash {
+    /* margin-top: 15px; */
+  }
+
+  .lil-marg {
+    /* margin-right: 25px !important; */
+  }
+
+  .page-title {
+    /* font-size: 40px; */
+    color: #587272;
+  }
+
+  .page-headings {
+    /* font-size: 60px; */
+  }
 </style>
\ No newline at end of file

From a049bfac6878c7dce316e47b473dfe832692aae1 Mon Sep 17 00:00:00 2001
From: wishinghand <wishinghand@gmail.com>
Date: Wed, 5 Oct 2016 12:04:32 -0700
Subject: [PATCH 15/17] viewport meta tag

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index fa76497..b07ef4d 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Incentify</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
     <!-- built files will be auto injected -->

From e11285fd1b025aa71555aed908b1bf2f010b7c94 Mon Sep 17 00:00:00 2001
From: Reggie Sibley <Tre@Reggies-MacBook-Pro.local>
Date: Wed, 5 Oct 2016 13:47:07 -0700
Subject: [PATCH 16/17] restorededit and save functionality on input field

---
 src/components/Profile.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 746ea61..7694363 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -8,20 +8,21 @@
   <div class="control card is-fullwidth">
     <div class="card-content">
       <label class="label"><h2 class="is-large title">name</h2></label>
-      <input class="input" type="text" disabled>
+      <input class="input" type="text" :disabled="formDisabled">
 
       <label class="label"><h2 class="">username</h2></label>
-      <input class="input" type="text" disabled>
+      <input class="input" type="text" :disabled="formDisabled">
 
       <label class="label"><h2 class="">password</h2></label>
-      <input class="input" type="password" disabled>
+      <input class="input" type="password" :disabled="formDisabled">
 
       <label class="label"><h2 class="">confirm password</h2></label>
-      <input class="input" type="password" disabled>
+      <input class="input" type="password" :disabled="formDisabled">
 
       <label class="label"><h2 class="">age</h2></label>
-      <input class="input" type="text" disabled>
-      <button class="button is-large red-nav">Edit</button>
+      <input class="input" type="text" :disabled="formDisabled">
+      <button class="button is-large red-nav" @click = "editProfile" v-show="formDisabled">Edit</button>
+      <button class="button is-large red-nav" @click = "submitProfile" v-show="!formDisabled">Save</button>
     </div>
   </div>
 </div>

From 03a296387b70094572345d34b6e5f027067ff046 Mon Sep 17 00:00:00 2001
From: Reggie Sibley <Tre@Reggies-MacBook-Pro.local>
Date: Wed, 5 Oct 2016 16:54:45 -0700
Subject: [PATCH 17/17] fixed all issues with goal component

---
 package.json            |   5 +-
 src/App.vue             |   1 +
 src/components/Goal.vue | 230 ++++++++++++++++++----------------------
 3 files changed, 107 insertions(+), 129 deletions(-)

diff --git a/package.json b/package.json
index cf84ec2..5bd1039 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,9 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "vue": "^1.0.21",
-    "babel-runtime": "^6.0.0"
+    "animate.css": "^3.5.2",
+    "babel-runtime": "^6.0.0",
+    "vue": "^1.0.21"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/App.vue b/src/App.vue
index df8006a..d6afd4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@
 
   require('bulma/bulma.sass');
   require('font-awesome/css/font-awesome.css');
+  require('animate.css/animate.css');
 
   export default {
     components: {
diff --git a/src/components/Goal.vue b/src/components/Goal.vue
index f688a43..0963eb9 100644
--- a/src/components/Goal.vue
+++ b/src/components/Goal.vue
@@ -2,82 +2,88 @@
 
 <div class="content">
     <div class="is-mobile lil-marg">
-        <div class="has-text-right main-title">New Goal</div>
-    </div>
-    <div class="card is-fullwidth margin-goal">
-        <div class="card-content">
-            <div class="content">
-                <div v-on:click="showTreehouseInfo = !showTreehouseInfo" v-show="showTreehouseInfo"><strong>Treehouse</strong><i class="fa fa-plus is-pulled-right set-icon-size" aria-hidden="true"></i></div>
-                <div v-on:click="showTreehouseInfo = !showTreehouseInfo" v-show="!showTreehouseInfo"><strong>Treehouse</strong><i class="fa fa-minus is-pulled-right set-icon-size" aria-hidden="true"></i></div>
-                <div v-show="!showTreehouseInfo">
-                    <p>Treehouse brings affordable technology education to people everywhere in order to help them achieve their dreams and change the world.</p>
-                    <p class="control has-addons">
-                        <a class="button red-inverse-nav btn-on-goal more-button-width">
-                            <span class="icon is-small"></span>
-                            <span><strong>incentive</strong></span></a>
-                        <a class="button red-nav btn-on-goal">
-                            <span>$5</span>
-                        </a>
-                        <a class="button red-nav btn-on-goal">
-                            <span>$25</span>
-                        </a>
-                        <a class="button red-nav btn-on-goal">
-                            <span>$50</span>
-                        </a>
-                        <a class="button red-nav btn-on-goal more-button-width">
-                            <span>other</span>
-                        </a>
-                    </p>
-                    <p class="control has-addons has-addons-centered">
-                        <span>
-                  <span class="btn-on-goal set-goal formatting-around-dollar-sign">$</span>
-                        </span>
-                        <input class="input h-fix set-goal" type="text" placeholder="Amount of money">
-                        <a class="button is-primary red-nav btn-on-goal">
-                            <strong>set goal</strong>
-                        </a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="card is-fullwidth margin-goal">
-        <div class="card-content">
-            <div class="content">
-                <div v-on:click="showDuoLingoInfo = !showDuoLingoInfo" v-show="showDuoLingoInfo"><strong>DuoLingo</strong><i class="fa fa-plus is-pulled-right set-icon-size" aria-hidden="true"></i></div>
-                <div v-on:click="showDuoLingoInfo = !showDuoLingoInfo" v-show="!showDuoLingoInfo"><strong>DuoLingo</strong><i class="fa fa-minus is-pulled-right set-icon-size" aria-hidden="true"></i></div>
-                <div v-show="!showDuoLingoInfo">
-                    <p>Learning with Duolingo is fun and addictive. Earn points for correct answers, race against the clock, and level up. Our bite-sized lessons are effective, and we have proof that it works.</p>
-                    <p class="control has-addons">
-                        <a class="button red-inverse-nav btn-on-goal more-button-width">
-                            <span class="icon is-small"></span>
-                            <span><strong>incentive</strong></span></a>
-                        <a class="button red-nav btn-on-goal">
-                            <span>$5</span>
-                        </a>
-                        <a class="button red-nav btn-on-goal">
-                            <span>$25</span>
-                        </a>
-                        <a class="button red-nav btn-on-goal">
-                            <span>$50</span>
-                        </a>
-                        <a class="button red-nav btn-on-goal more-button-width">
-                            <span>other</span>
-                        </a>
-                    </p>
-                    <p class="control has-addons has-addons-centered">
-                        <span>
-                  <span class="btn-on-goal set-goal formatting-around-dollar-sign">$</span>
-                        </span>
-                        <input class="input h-fix set-goal" type="text" placeholder="Amount of money">
-                        <a class="button is-primary red-nav btn-on-goal">
-                            <strong>set goal</strong>
-                        </a>
-                    </p>
-                </div>
-            </div>
-        </div>
+        <div class="has-text-right page-title">New Goal</div>
     </div>
+      <div class="animated slideInUp ">
+      <div class="card is-fullwidth margin-goal">
+          <div class="card-content ">
+              <div class="content">
+                  <div v-on:click="showTreehouseInfo = !showTreehouseInfo" v-show="showTreehouseInfo"><strong><span>Treehouse<i class="fa fa-plus is-pulled-right set-icon-size" aria-hidden="true"></i></span></strong></div>
+                  <div v-on:click="showTreehouseInfo = !showTreehouseInfo" v-show="!showTreehouseInfo"><strong><span>Treehouse<i class="fa fa-minus is-pulled-right set-icon-size" aria-hidden="true"></i></span></strong></div>
+                  <div v-show="!showTreehouseInfo" class="animated fadeIn">
+                      <p>Treehouse brings affordable technology education to people everywhere in order to help them achieve their dreams and change the world.</p>
+                      <p class="control has-addons">
+                          <a class="button red-inverse-nav btn-on-goal more-button-width">
+                              <span class="icon is-small"></span>
+                              <span><strong>incentive</strong></span></a>
+                          <a class="button red-nav btn-on-goal" v-bind:class="{ 'is-active': isActive.tab === 1}">
+                              <span @click="isActive.tab = 1">$5</span>
+                          </a>
+                          <a class="button red-nav btn-on-goal" v-bind:class="{ 'is-active': isActive.tab === 4}">
+                              <span @click="isActive.tab = 4">$25</span>
+                          </a>
+                          <a class="button red-nav btn-on-goal" v-bind:class="{ 'is-active': isActive.tab === 2}">
+                              <span @click="isActive.tab = 2">$50</span>
+                          </a>
+                          <a class="button red-nav btn-on-goal more-button-width" @click="showTreehouseAmount = !showTreehouseAmount" v-bind:class="{ 'is-active': isActive.tab === 3}">
+                              <span @click="isActive.tab = 3">other</span>
+                          </a>
+                           <a class="button red-nav btn-on-goal more-button-width submitButton">
+                                  <button>Submit</button>
+                           </a>
+                      </p>
+                      <div class="animated fadeIn" v-show="!showTreehouseAmount">
+                        <p class="control has-addons has-addons-centered">
+                          <input class="input" type="text" placeholder="Amount of money">
+                          <a class="button is-primary red-nav btn-on-goal">
+                              <strong>set goal</strong>
+                          </a>
+                        </p>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="card is-fullwidth margin-goal">
+          <div class="card-content goal-vertical-spacing">
+              <div class="content">
+                  <div v-on:click="showDuoLingoInfo = !showDuoLingoInfo" v-show="showDuoLingoInfo"><strong><span>DuoLingo<i class="fa fa-plus is-pulled-right set-icon-size" aria-hidden="true"></i></span></strong></i></div>
+                  <div v-on:click="showDuoLingoInfo = !showDuoLingoInfo" v-show="!showDuoLingoInfo"><strong><span>DuoLingo<i class="fa fa-minus is-pulled-right set-icon-size" aria-hidden="true"></i></span></strong></div>
+                  <div v-show="!showDuoLingoInfo" class="animated fadeIn">
+                      <p>Learning with Duolingo is fun and addictive. Earn points for correct answers, race against the clock, and level up. Our bite-sized lessons are effective, and we have proof that it works.</p>
+                          <p class="control has-addons">
+                              <a class="button red-inverse-nav btn-on-goal more-button-width">
+                                  <span class="icon is-small"></span>
+                                  <span><strong>incentive</strong></span></a>
+                              <a class="button btn-on-goal" v-bind:class="{ 'is-active': isActive.tab === 1}">
+                                  <span @click="isActive.tab = 1">$5</span>
+                              </a>
+                              <a class="button btn-on-goal" v-bind:class="{ 'is-active': isActive.tab === 4}">
+                                  <span @click="isActive.tab = 4">$25</span>
+                              </a>
+                              <a class="button btn-on-goal" v-bind:class="{ 'is-active': isActive.tab === 2}">
+                                  <span @click="isActive.tab = 2">$50</span>
+                              </a>
+                              <a class="button btn-on-goal more-button-width" @click="showDuoAmount = !showDuoAmount" v-bind:class="{ 'is-active': isActive.tab === 3}">
+                                  <span @click="isActive.tab = 3">other</span>
+                              </a>
+                               <a class="button red-nav btn-on-goal more-button-width submitButton">
+                                  <button>Submit</button>
+                              </a>
+                          </p>
+                          <div class="animated fadeIn" v-show="!showDuoAmount">
+                            <p class="control has-addons has-addons-centered">                 
+                                <input class="input" type="text" placeholder="Amount of money">
+                                <a class="button is-primary red-nav btn-on-goal">
+                                    <strong>set goal</strong>
+                                </a>
+                            </p>
+                          </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
 </div>
 </div>
 
@@ -92,64 +98,34 @@ export default {
     return {
       showTreehouseInfo: true,
       showDuoLingoInfo: true,
+      showTreehouseAmount: true,
+      showDuoAmount: true,
+      isActive: {
+        tab: 1,
+      },
     };
   },
+  methods: {
+    changeTabColor() {
+      this.isActive = !this.isActive;
+    },
+  },
+
 };
 </script>
 
 <style lang="css" scoped>
-  .margin-goal {
-    /* margin-top: 15px !important; */
-  }
-  .btn-on-goal {
-    /* padding: 10px !important; */
-    /* font-size: 20px !important; */
-    text-transform: uppercase !important;
-    /* height: 100px !important; */
-    /* width: 200px !important; */
-    /* font-size: 30px !important; */
-  }
-  .red-inverse-nav {
-    color: white !important;
-    border-color: red !important;
-    background-color: red !important;
-  }
-  .red-inverse-nav:hover {
-    background-color: red !important;
-    color: white !important;
-    border-color: red !important;
-  }
-  .red-inverse-nav:focus {
-    background-color: red !important;
-    color: white !important;
-    border-color: red !important;
-  }
-  .red-inverse-nav:active {
-    background-color: red !important;
-    color: white !important;
-    border-color: red !important;
-  }
-  /*General Heigh Fix for Mobilization*/
-  .h-fix {
-    /* height: 100px !important; */
-  }
-  .set-goal {
-    /* font-size: 40px !important; */
-    /* line-height: 200%; */
-  }
-  .main-title {
-    /* font-size: 40px;  */
+    .page-title {
+    font-size: 1.8rem;
     color: #587272;
+    margin-right: 2%;
+    padding-bottom: 2%;
   }
-  .set-icon-size {
-    /* font-size: 60px; */
-  }
-  .more-button-width {
-    /* width: 300px !important; */
-  }
-  .formatting-around-dollar-sign {
-    color: red !important; 
-    /* text-align: center !important;  */
-    /* width: 100px !important; */
-  }
+   .goal-vertical-spacing {
+      margin-top: .75rem;
+    }
+
+    .submitButton {
+      margin-left: 5%;
+    }
 </style>
\ No newline at end of file