From 61a975a71597c8fafa051683d988a643b85a8cc9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 5 May 2025 10:04:55 -0400
Subject: [PATCH] CASH-313 chat styling.

---
 .../salesforce-webchat/salesforce-webchat.vue | 82 ++++++++++++-------
 1 file changed, 54 insertions(+), 28 deletions(-)

diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
index f71b8ae90..be58896de 100644
--- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue
+++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
@@ -51,7 +51,7 @@ export default {
 };
 </script>
 
-<style type="text/css">
+<style lang="scss">
 .salesforce-webchat {
     .salesforce-chat-button {
         width: 1.5rem;
@@ -65,52 +65,78 @@ export default {
     }
 }
 
-/* .embeddedServiceHelpButton .helpButton .uiButton {
-    background-color: red;
-    font-family: "Arial", sans-serif;
+.dockableContainer.showDockableContainer .sidebarBody {
+    button {
+        background: #0070d1;
+        color: #fff;
+        &:hover {
+            background: #06577c!important;
+        }
+    }
+    .embeddedServiceSidebarFormField .uiInput input {
+        border: 1px solid #8e9292;
+    }
+    .embeddedServiceSidebarButton.uiButton--inverse .label {
+        color: #fff;
+        text-decoration: underline;
+    }
+    .embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
+        background-color: #0070d1;
+    }
+    .embeddedServiceSidebarFormField .uiInput .uiLabel-left {
+        font-family: AvertaRegular;
+        color: #727676;
+    }
+    .form-element__help {
+        color: #db0020;
+    }
+    .embeddedServiceSidebarFormField .uiInput input {
+        border: 1px solid #06577c;
+    }
+    .embeddedServiceLiveAgentStateChatInputFooter
+        .footerMenuWrapper
+        .footer-menu-items
+        .slds-dropdown__item
+        > a {
+        padding-left: 0;
+        max-width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+    .embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items a {
+        margin: 0 auto;
+    }
+    .embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus {
+        background-color: #0070d1;
+    }
 }
-.embeddedServiceHelpButton .helpButton .uiButton:focus {
-    outline: 1px solid #167cac;
-} */
 
 .embeddedServiceHelpButton .helpButton .uiButton {
-    background-color: #0070d1!important;
+    background-color: #0070d1 !important;
 }
 
-.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar .embeddedServiceSidebarMinimizedDefaultUI.helpButton,
-.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar .sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
+.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar
+    .embeddedServiceSidebarMinimizedDefaultUI.helpButton,
+.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar
+    .sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
     background-color: #0070d1;
     border: 1px solid #0070d1;
 }
 
-.dockableContainer.showDockableContainer .chatHeaderBranding,
-.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
+.dockableContainer.showDockableContainer .chatHeaderBranding {
     background-color: #0070d1;
 }
 
-.dockableContainer.showDockableContainer,
-.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceSidebarFormField .uiInput .uiLabel-left {
+.dockableContainer.showDockableContainer {
     font-family: AvertaRegular;
     color: #727676;
 }
 
-.dockableContainer.showDockableContainer span.required,
-.dockableContainer.showDockableContainer .sidebarBody .form-element__help {
+.dockableContainer.showDockableContainer span.required {
     color: #db0020;
 }
 
-.dockableContainer.showDockableContainer .sidebarBody button {
-    background: linear-gradient(270deg, #0070d1 0%, #003d58 100%);
-    color: #fff;
-}
+.dockableContainer.showDockableContainer .sidebarBody button:hover {
 
-.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceSidebarFormField .uiInput input {
-    border: 1px solid #8e9292;
 }
-
-.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceSidebarButton.uiButton--inverse .label {
-    color: #fff;
-    text-decoration: underline;
-}
- 
 </style>