From 4062405fd1826f82d5d088dddf7acc93668997f2 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Tue, 19 Oct 2021 08:28:25 -0400
Subject: [PATCH 1/5] Add styled buttons and add props for button copy. Add
 button animation.

---
 src/Funnel1.vue                               | 27 +++++++++++++-
 src/assets/img/icons/button-spinner.svg       |  3 ++
 src/assets/scss/_CustomVariables.scss         |  7 ++++
 src/assets/scss/components/_buttons.scss      | 37 +++++++++++++++++--
 src/components/buttons/buttonPrimary.vue      |  9 ++++-
 src/components/buttons/buttonPrimaryFocus.vue | 10 +++++
 6 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/img/icons/button-spinner.svg
 create mode 100644 src/components/buttons/buttonPrimaryFocus.vue

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index 51231af84..d01e9de61 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -37,6 +37,27 @@
         ariaLabel="Back glass"
       />
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          btnText="Primary"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimaryFocus
+          btnText="Primary Focus"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary class="button-loader"
+          btnText="w/Loader"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -45,6 +66,8 @@
   import vehicleImage from './components/vehicleImage';
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
+  import buttonPrimary from './components/buttons/buttonPrimary';
+  import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
 
 
   export default {
@@ -53,7 +76,9 @@
       buttonFunnel,
       vehicleImage,
       imageButton,
-      confetti
+      confetti,
+      buttonPrimary,
+      buttonPrimaryFocus
     }
   }
 </script>
diff --git a/src/assets/img/icons/button-spinner.svg b/src/assets/img/icons/button-spinner.svg
new file mode 100644
index 000000000..0cc8b58cc
--- /dev/null
+++ b/src/assets/img/icons/button-spinner.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z" fill="#fff"/>
+</svg>
diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss
index 005dbddff..85c3bcb8f 100644
--- a/src/assets/scss/_CustomVariables.scss
+++ b/src/assets/scss/_CustomVariables.scss
@@ -24,6 +24,7 @@ $grays: (
 $blue-200:   #E7F1F6;
 $blue-300:   #B9D7E6;
 $blue-400:   #125B7E;
+$blue-700:   #06577C;
 $blue:       #167CAC;//Default Blue (Blue 500)
 $indigo:     #6610f2;
 $purple:     #6f42c1;
@@ -95,3 +96,9 @@ $font-family-code:            $font-family-monospace;
 
 //Gutters
 $grid-gutter-width:           .75rem;
+
+//Border Radius
+$border-radius:               .25rem;
+$border-radius-sm:            .2rem;
+$border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
+$border-radius-pill:          50rem;
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index a6238f36b..b1453d110 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -1,15 +1,44 @@
 //Custom button styles
 .btn {
-  &.btn-secondary {
+  &.btn-primary,
+  &.btn-primary-focus {
+    position: relative;
+    background: $blue-700;
+    background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%);
+    border: none;
+    border-radius: $border-radius-lg;
+    height: 48px;
+    color: $white;
+    transition: all 100ms linear; 
+    &:hover {
+      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+    }
+    &.button-loader {
+      padding: 0 48px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner.svg);
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+    }
+  }
+  &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
     margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
-    border-radius: 8px;//To match Figma border radius
-    &:after {
+    &:before {
       content: "";
       position: absolute;
       width: calc(100% + 12px);
       height: calc(100% + 12px);
-      border: 3px solid $secondary;
+      border: 3px solid $blue-700;
       background-color: $white;
       border-radius: 12px;
       left: -6px;
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index 97bdcdf2d..53fb2ad65 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,3 +1,10 @@
 <template>
-  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-primary">{{btnText}}</button>
 </template>
+
+<script>
+export default {
+  name: 'buttonPrimary',
+  props: ['btnText']
+}
+</script>
diff --git a/src/components/buttons/buttonPrimaryFocus.vue b/src/components/buttons/buttonPrimaryFocus.vue
new file mode 100644
index 000000000..d2c89581c
--- /dev/null
+++ b/src/components/buttons/buttonPrimaryFocus.vue
@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-primary-focus">{{btnText}}</button>
+</template>
+
+<script>
+export default {
+  name: 'buttonPrimaryFocus',
+  props: ['btnText']
+}
+</script>

From 7f4aa2ceb0cb47339f6e87bc6107ff2f7ef72e50 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Tue, 19 Oct 2021 09:36:12 -0400
Subject: [PATCH 2/5] Button updates. Add disabled button.

---
 src/Funnel1.vue                               | 12 +++++++++++-
 src/assets/scss/components/_buttons.scss      | 14 ++++++++++----
 src/components/buttons/buttonDisabled.vue     | 10 ++++++++++
 src/components/buttons/buttonPrimary.vue      |  2 +-
 src/components/buttons/buttonPrimaryFocus.vue |  2 +-
 5 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/components/buttons/buttonDisabled.vue

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index d01e9de61..2c9ca1cae 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -55,6 +55,14 @@
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary class="button-loader"
           btnText="w/Loader"
+          btnClass="test"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonDisabled
+          btnText="Disabled"
         />
       </div>
     </div>
@@ -68,6 +76,7 @@
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
   import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
+  import buttonDisabled from './components/buttons/buttonDisabled';
 
 
   export default {
@@ -78,7 +87,8 @@
       imageButton,
       confetti,
       buttonPrimary,
-      buttonPrimaryFocus
+      buttonPrimaryFocus,
+      buttonDisabled
     }
   }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index b1453d110..efbb34ded 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -9,17 +9,18 @@
     border-radius: $border-radius-lg;
     height: 48px;
     color: $white;
-    transition: all 100ms linear; 
+    transition: all 150ms linear;
     &:hover {
       background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
     }
     &.button-loader {
-      padding: 0 48px 0 12px;
+      padding: 0 40px 0 12px;
       &:after {
         content: url(../../assets/img/icons/button-spinner.svg);
         position: absolute;
-        width: 24px;
-        height: 24px;
+        right: 14px;
+        width: 16px;
+        height: 16px;
         margin-left: 12px;
         animation: rotation 1s infinite linear;
         @keyframes rotation {
@@ -29,6 +30,11 @@
         }
       }
     }
+    &:disabled {
+      background: $gray-100;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+      color: $gray-400;
+    }
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/components/buttons/buttonDisabled.vue b/src/components/buttons/buttonDisabled.vue
new file mode 100644
index 000000000..72a4ef80b
--- /dev/null
+++ b/src/components/buttons/buttonDisabled.vue
@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-primary" disabled>{{btnText}}</button>
+</template>
+
+<script>
+export default {
+  name: 'buttonDisabled',
+  props: ['btnText']
+}
+</script>
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index 53fb2ad65..50cd6daa7 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="btn btn-primary">{{btnText}}</button>
+  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button>
 </template>
 
 <script>
diff --git a/src/components/buttons/buttonPrimaryFocus.vue b/src/components/buttons/buttonPrimaryFocus.vue
index d2c89581c..922587323 100644
--- a/src/components/buttons/buttonPrimaryFocus.vue
+++ b/src/components/buttons/buttonPrimaryFocus.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="btn btn-primary-focus">{{btnText}}</button>
+  <button type="button" class="btn btn-primary-focus d-flex align-items-center">{{btnText}}</button>
 </template>
 
 <script>

From 868897f0d2353ca307692fc57235fa1d42292b48 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Wed, 20 Oct 2021 10:43:04 -0400
Subject: [PATCH 3/5] Update buttons to use one button for all instances (so
 far).

---
 src/Funnel1.vue                          | 27 ++++++++----------------
 src/assets/scss/components/_buttons.scss | 10 ++++-----
 src/components/buttons/buttonPrimary.vue | 24 +++++++++++++++++++--
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index 2c9ca1cae..0998aa9d8 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -40,29 +40,24 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-          btnText="Primary"
+          buttonText="Primary"
+          buttonType="btn-primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimaryFocus
-          btnText="Primary Focus"
+        <buttonPrimary
+          buttonText="Primary Focus"
+          buttonType="btn-primary-focus"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary class="button-loader"
-          btnText="w/Loader"
-          btnClass="test"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonDisabled
-          btnText="Disabled"
+        <buttonPrimary
+          buttonText="Disabled"
+          buttonType="disabled"
         />
       </div>
     </div>
@@ -75,8 +70,6 @@
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
-  import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
-  import buttonDisabled from './components/buttons/buttonDisabled';
 
 
   export default {
@@ -86,9 +79,7 @@
       vehicleImage,
       imageButton,
       confetti,
-      buttonPrimary,
-      buttonPrimaryFocus,
-      buttonDisabled
+      buttonPrimary
     }
   }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index efbb34ded..0d0608dd7 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -30,11 +30,11 @@
         }
       }
     }
-    &:disabled {
-      background: $gray-100;
-      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
-      color: $gray-400;
-    }
+  }
+  &.disabled {
+    background: $gray-100;
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+    color: $gray-400;
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index 50cd6daa7..abc24e291 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,10 +1,30 @@
 <template>
-  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button>
+  <button
+    type="button"
+    class="btn d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
+    >
+    {{ this.buttonText }}
+  </button>
 </template>
 
 <script>
 export default {
   name: 'buttonPrimary',
-  props: ['btnText']
+  props: {
+    buttonText: String,
+    buttonType: String
+  },
+  data(){
+    return {
+      isLoading: false
+    }
+  },
+  methods: {
+    showLoader(){
+      this.isLoading = true;
+    }
+  }
 }
 </script>

From c4aec696787de30702fddb04cf9ce6e77de7aebe Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 20 Oct 2021 11:54:08 -0400
Subject: [PATCH 4/5] Revert "Update buttons to use one button for all
 instances (so far)."

This reverts commit 868897f0d2353ca307692fc57235fa1d42292b48.
---
 src/Funnel1.vue                          | 27 ++++++++++++++++--------
 src/assets/scss/components/_buttons.scss | 10 ++++-----
 src/components/buttons/buttonPrimary.vue | 24 ++-------------------
 3 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index 8bbfbc974..f55bfe40c 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -26,24 +26,29 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-          buttonText="Primary"
-          buttonType="btn-primary"
+          btnText="Primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-          buttonText="Primary Focus"
-          buttonType="btn-primary-focus"
+        <buttonPrimaryFocus
+          btnText="Primary Focus"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-          buttonText="Disabled"
-          buttonType="disabled"
+        <buttonPrimary class="button-loader"
+          btnText="w/Loader"
+          btnClass="test"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonDisabled
+          btnText="Disabled"
         />
       </div>
     </div>
@@ -56,6 +61,8 @@
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
+  import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
+  import buttonDisabled from './components/buttons/buttonDisabled';
 
 
   export default {
@@ -65,7 +72,9 @@
       vehicleImage,
       imageButton,
       confetti,
-      buttonPrimary
+      buttonPrimary,
+      buttonPrimaryFocus,
+      buttonDisabled
     }
 }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 0d0608dd7..efbb34ded 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -30,11 +30,11 @@
         }
       }
     }
-  }
-  &.disabled {
-    background: $gray-100;
-    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
-    color: $gray-400;
+    &:disabled {
+      background: $gray-100;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+      color: $gray-400;
+    }
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index abc24e291..50cd6daa7 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,30 +1,10 @@
 <template>
-  <button
-    type="button"
-    class="btn d-flex align-items-center"
-    v-on:click="showLoader()"
-    v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
-    >
-    {{ this.buttonText }}
-  </button>
+  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button>
 </template>
 
 <script>
 export default {
   name: 'buttonPrimary',
-  props: {
-    buttonText: String,
-    buttonType: String
-  },
-  data(){
-    return {
-      isLoading: false
-    }
-  },
-  methods: {
-    showLoader(){
-      this.isLoading = true;
-    }
-  }
+  props: ['btnText']
 }
 </script>

From 8faf7c1b2c227f0b1beb10494fc3fcae43c23457 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Wed, 20 Oct 2021 12:17:23 -0400
Subject: [PATCH 5/5] Re-push button updates.

---
 src/Funnel1.vue                          | 75 +++++++++++++-----------
 src/assets/scss/components/_buttons.scss | 10 ++--
 src/components/buttons/buttonPrimary.vue | 24 +++++++-
 3 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index f55bfe40c..0998aa9d8 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -1,54 +1,63 @@
 <template>
-<router-view></router-view>
-<div class="container-fluid">
+  <div class="container-fluid">
     <div class="row">
-        <div class="col my-3 d-flex justify-content-center">
-            <vehicleImage />
-        </div>
+      <div class="col my-3 d-flex justify-content-center">
+        <vehicleImage/>
+      </div>
     </div>
     <div class="row">
-        <div class="col">
-            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
-            <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
-        </div>
+      <div class="col">
+        <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
+      </div>
     </div>
     <div class="row">
-        <div class="col">
-            <buttonFunnel />
-            <confetti />
-        </div>
+      <div class="col">
+        <buttonFunnel/>
+        <confetti/>
+      </div>
     </div>
     <div class="row mt-5">
-        <imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" />
-        <imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" />
-        <imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" />
+      <imageButton
+        btnText="windshield-damage.svg"
+        altText="Windshield"
+        damageTitle="Windshield"
+        ariaLabel="Windshield"
+      />
+      <imageButton
+        btnText="side-window-damage.svg"
+        altText="Side Window"
+        damageTitle="Side door"
+        ariaLabel="Side door"
+      />
+      <imageButton
+        btnText="back-glass-damage.svg"
+        altText="Back Glass"
+        damageTitle="Back glass"
+        ariaLabel="Back glass"
+      />
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-          btnText="Primary"
+          buttonText="Primary"
+          buttonType="btn-primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimaryFocus
-          btnText="Primary Focus"
+        <buttonPrimary
+          buttonText="Primary Focus"
+          buttonType="btn-primary-focus"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary class="button-loader"
-          btnText="w/Loader"
-          btnClass="test"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonDisabled
-          btnText="Disabled"
+        <buttonPrimary
+          buttonText="Disabled"
+          buttonType="disabled"
         />
       </div>
     </div>
@@ -61,8 +70,6 @@
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
-  import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
-  import buttonDisabled from './components/buttons/buttonDisabled';
 
 
   export default {
@@ -72,9 +79,7 @@
       vehicleImage,
       imageButton,
       confetti,
-      buttonPrimary,
-      buttonPrimaryFocus,
-      buttonDisabled
+      buttonPrimary
     }
-}
+  }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index efbb34ded..0d0608dd7 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -30,11 +30,11 @@
         }
       }
     }
-    &:disabled {
-      background: $gray-100;
-      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
-      color: $gray-400;
-    }
+  }
+  &.disabled {
+    background: $gray-100;
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+    color: $gray-400;
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index 50cd6daa7..abc24e291 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,10 +1,30 @@
 <template>
-  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button>
+  <button
+    type="button"
+    class="btn d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
+    >
+    {{ this.buttonText }}
+  </button>
 </template>
 
 <script>
 export default {
   name: 'buttonPrimary',
-  props: ['btnText']
+  props: {
+    buttonText: String,
+    buttonType: String
+  },
+  data(){
+    return {
+      isLoading: false
+    }
+  },
+  methods: {
+    showLoader(){
+      this.isLoading = true;
+    }
+  }
 }
 </script>