From 5f5ca81c1f314c2c59fb01fdef0d95d93b47aec9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 30 Apr 2025 14:02:29 -0400
Subject: [PATCH] CASH-313 chat styles and refactor funnel-header.

---
 .../salesforce-webchat/salesforce-webchat.vue | 26 +++++++--
 .../funnel-header/funnel-header.vue           | 55 ++++++++-----------
 .../funnel-header/menu-modal/menu-modal.vue   | 18 ------
 3 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
index 9283bda62..ac7f8c505 100644
--- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue
+++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
@@ -1,5 +1,7 @@
 <template>
-    <span class="salesforce-webchat"></span>
+    <span class="salesforce-webchat">
+        <button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
+    </span>
 </template>
 
 <script>
@@ -50,11 +52,23 @@ export default {
 </script>
 
 <style type="text/css">
-.embeddedServiceHelpButton .helpButton .uiButton {
-    background-color: #167cac;
-    font-family: "Arial", sans-serif;
+.salesforce-webchat {
+    .salesforce-chat-button {
+        width: 1.5rem;
+        height: 1.5rem;
+        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;
+        border: none;
+        background-color: transparent;
+    }
+    .embeddedServiceHelpButton .helpButton .uiButton {
+        background-color: #167cac;
+        font-family: "Arial", sans-serif;
 }
-.embeddedServiceHelpButton .helpButton .uiButton:focus {
-    outline: 1px solid #167cac;
+    .embeddedServiceHelpButton .helpButton .uiButton:focus {
+        outline: 1px solid #167cac;
+    }
 }
 </style>
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index 8bebb55bd..c78339e38 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -1,23 +1,20 @@
 <template>
     <div class="funnel-header" v-if="imageSrc">
-        <salesforceWebchat hideSalesforceWebchatLaunchButton />
-        <div class="header-column-1 d-flex justify-content-between">
-            <div class="d-flex justify-content-center align-items-center">
-                <button class="salesforce-chat-button"></button>
+        <div class="d-flex justify-content-between align-items-center">
+            <div class="button-container">
+                <salesforceWebchat hideSalesforceWebchatLaunchButton />
             </div>
-            <div class="d-flex justify-content-center align-items-center">
+            <div class="site-logo">
                 <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
             </div>
-            <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
-            <div class="d-flex justify-content-center align-items-center position-relative">
+            <div class="button-container">
+                <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
                 <menuModal />
+                <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
             </div>
-            <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
         </div>
-        <div class="header-column-2">
-            <div class="d-flex w-100 flex-wrap">
-                <progressBar />
-            </div>
+        <div class="d-flex w-100">
+            <progressBar />
         </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
@@ -56,7 +53,7 @@ export default {
         cmsWidgetName: String,
         hideSalesforceWebchatLaunchButton: {
             type: Boolean,
-            default: false,
+            default: true,
         },
     },
     computed: {
@@ -111,27 +108,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.menu-modal-container) {
-    //display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
-}
 .funnel-header {
     position: relative;
-    padding: 0.97rem 0;
-}
+    padding: 1rem 0;
 
-.logo-image {
-    width: auto;
-    height: 1.1875rem;
-}
+    .button-container {
+        width: 1.5rem;
+        height: 1.625rem;
+    }
 
-.salesforce-chat-button {
-    width: 1.5rem;
-    height: 1.5rem;
-    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;
-    border: none;
-    background-color: transparent;
+    .logo-image {
+        width: auto;
+        height: 1.1875rem;
+        margin: 0 auto;
+    }
+
+    :deep(.menu-modal-container) {
+        display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
+    }
 }
 </style>
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 4bb658594..8f68ab6e9 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -11,21 +11,6 @@
             <div class="bar3"></div>
         </button>
     </div>
-    <!-- <div class="menu-modal-container">
-        <button
-            aria-hidden="true"
-            tabindex="-1"
-            class="menu-button"
-            type="button"
-            :class="[isActive ? 'active' : '']"
-            @click="toggleModal"
-            aria-label="Hamburger Menu (modal window)">
-            <div class="bar1"></div>
-            <div class="bar2"></div>
-            <div class="bar3"></div>
-        </button>
-    </div> -->
-    <!-- Modal -->
     <div
         class="modal menu-modal fade"
         data-bs-backdrop="false"
@@ -123,9 +108,6 @@ export default {
 
 <style lang="scss" scoped>
 .menu-modal-container {
-    //position: absolute;
-    //padding: 1.47rem 0 1.47rem 1.47rem;
-    //right: 0;
     button {
         border: none;
         &.menu-button {