From af9a07b6e2bacf0f047124b5a7398f6fa4e10ac3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 4 Aug 2025 12:16:36 -0400
Subject: [PATCH] CASH-1326 UI bug fixes.

---
 .../funnel-header/funnel-header.vue           | 32 +++++++++-----
 .../funnel-header/menu-modal/menu-modal.vue   | 44 +++++++++++--------
 src/layouts/vehicle/vehicle.vue               |  3 +-
 3 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index bad77ede5..8bc509c77 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -15,7 +15,7 @@
                         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 +197,7 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
+    margin-bottom: 1rem;
     .container {
         padding: 1rem 0.75rem;
         display: flex;
@@ -206,14 +207,11 @@ export default {
         }
     }
     position: relative;
-    padding: 0 0 1rem 0;
+    padding: 0;
 
     .button-container {
         &.webchat {
-            margin-right: 1rem;
-            @include media-breakpoint-up(md) {
-                margin-right: 2rem;
-            }
+            margin-right: 0.875rem;
         }
     }
 
@@ -232,14 +230,28 @@ export default {
 
     .webchat {
         .chat-button {
-            width: 1.5rem;
-            height: 1.5rem;
+            width: 7.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-position: center;
+            background-size: 2rem 2rem;
+            background-position: right;
             border: none;
             background-color: transparent;
+            padding-right: 2rem;
+            font-size: .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;
+                }
+            }
         }
     }
 }
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index fdb458af3..c75a145df 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -39,25 +39,17 @@
                             <span class="dot4"></span>
                         </div>
                         <div class="d-flex flex-column justify-content-between">
-                            <div class="step-containers">
-                                <span class="step-number">Step 1 of 4</span>
+                            <div
+                                class="step-containers"
+                                v-for="step in steps"
+                                :key="step.number">
+                                <span class="step-number">Step {{ step.number }} of 4</span>
                                 <br />
-                                <span class="step-name">Vehicle</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 2 of 4</span>
-                                <br />
-                                <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>
+                                <span
+                                    class="step-name"
+                                    :class="{ 'active-step': step.number === currentStepNumber }">
+                                    {{ step.name }}
+                                </span>
                             </div>
                         </div>
                     </div>
@@ -107,6 +99,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 +118,10 @@ export default {
 .menu-modal-container {
     button {
         border: none;
+        color: $blue;
+        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        font-weight: 600;
+        font-size: .875rem;
         &.menu-button {
             width: auto;
             height: auto;
@@ -254,6 +258,10 @@ export default {
                 .step-name {
                     font-size: 1.25rem;
                 }
+                .active-step {
+                    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+                    font-weight: 600;
+                }
             }
         }
         .modal-fullscreen {
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 3bc2d8565..d809732ff 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -631,8 +631,7 @@ export default {
     margin-bottom: 0;
 }
 .siteSubHeader {
-    margin-top: 1.5rem;
-    margin-bottom: 0;
+    margin: 0;
 }
 .separator-line {
     grid-area: 2/1/2/8;