Merge pull request #2723 from Safelite/CASH-1326-header-updates

CASH-1326 header updates

src/fmg-components/funnel-header/funnel-header.vue

@@ -15,7 +15,9 @@
                         v-show="shouldShowWebchatButton"
                         v-on:click="webchatClicked"
                         type="button"
-                        class="chat-button"></button>
+                        class="chat-button">
+                        <span>Chat Now</span>
+                    </button>
                 </span>
             </div>
             <div class="button-container">
@@ -197,6 +199,7 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
+    margin-bottom: 1rem;
     .container {
         padding: 1rem 0.75rem;
         display: flex;
@@ -206,14 +209,11 @@ export default {
         }
     }
     position: relative;
-    padding: 0 0 1rem 0;
+    padding: 0;
 
     .button-container {
         &.webchat {
-            margin-right: 1rem;
+            margin-right: 0.875rem;
-            @include media-breakpoint-up(md) {
-                margin-right: 2rem;
-            }
         }
     }
 
@@ -232,14 +232,28 @@ export default {
 
     .webchat {
         .chat-button {
-            width: 1.5rem;
+            width: 7.5rem;
-            height: 1.5rem;
+            height: 2rem;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
-            background-size: 1.5rem 1.5rem;
+            background-size: 2rem 2rem;
-            background-position: center;
+            background-position: right;
             border: none;
             background-color: transparent;
+            padding-right: 2rem;
+            font-size: 0.875rem;
+            font-weight: 600;
+            font-family: "UrbanistSemibold";
+            color: $blue;
+            @include media-breakpoint-down(md) {
+                width: 2rem;
+                padding-right: 0;
+            }
+            span {
+                @include media-breakpoint-down(md) {
+                    display: none;
+                }
+            }
         }
     }
 }

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -39,25 +39,14 @@
                             <span class="dot4"></span>
                         </div>
                         <div class="d-flex flex-column justify-content-between">
-                            <div class="step-containers">
+                            <div class="step-containers" v-for="step in steps" :key="step.number">
-                                <span class="step-number">Step 1 of 4</span>
+                                <span class="step-number">Step {{ step.number }} of 4</span>
                                 <br />
-                                <span class="step-name">Vehicle</span>
+                                <span
-                            </div>
+                                    class="step-name"
-                            <div class="step-containers">
+                                    :class="{ 'active-step': step.number === currentStepNumber }">
-                                <span class="step-number">Step 2 of 4</span>
+                                    {{ step.name }}
-                                <br />
+                                </span>
-                                <span class="step-name">Quote</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 3 of 4</span>
-                                <br />
-                                <span class="step-name">Schedule</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 4 of 4</span>
-                                <br />
-                                <span class="step-name">Review</span>
                             </div>
                         </div>
                     </div>
@@ -107,6 +96,14 @@ export default {
         currentStepNumber() {
             return getProgressBarStep(this.$route.name);
         },
+        steps() {
+            return [
+                { number: 1, name: "Vehicle" },
+                { number: 2, name: "Quote" },
+                { number: 3, name: "Schedule" },
+                { number: 4, name: "Review" },
+            ];
+        },
     },
     components: {
         progressBar,
@@ -118,6 +115,10 @@ export default {
 .menu-modal-container {
     button {
         border: none;
+        color: $blue;
+        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        font-weight: 600;
+        font-size: 0.875rem;
         &.menu-button {
             width: auto;
             height: auto;
@@ -254,6 +255,10 @@ export default {
                 .step-name {
                     font-size: 1.25rem;
                 }
+                .active-step {
+                    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                    font-weight: 600;
+                }
             }
         }
         .modal-fullscreen {

src/layouts/vehicle/vehicle.vue

@@ -631,8 +631,7 @@ export default {
     margin-bottom: 0;
 }
 .siteSubHeader {
-    margin-top: 1.5rem;
+    margin: 0;
-    margin-bottom: 0;
 }
 .separator-line {
     grid-area: 2/1/2/8;