From 63c9f8e184c8c235856979d910436adeacfe0dbe Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 6 May 2025 15:42:14 -0400 Subject: [PATCH 1/2] CASH-313 Chat style updates. --- .../salesforce-webchat/salesforce-webchat.vue | 164 +++++++++++------- 1 file changed, 97 insertions(+), 67 deletions(-) diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue index 975c639a8..84a06d241 100644 --- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue +++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue @@ -65,77 +65,107 @@ export default { } } -.dockableContainer.showDockableContainer .sidebarBody { - button { - background: #0070d1; - color: #fff; - &:hover { - background: #06577c !important; +.dockableContainer { + &.showDockableContainer { + font-family: AvertaRegular; + color: #4d5151; + .sidebarBody { + button { + background: #0070d1; + color: #fff; + &:hover { + background: #06577c !important; + } + } + .form-element__help { + color: #db0020; + } + .embeddedServiceSidebarFormField { + .uiInput { + .uiLabel-left { + color: #4d5151; + } + } + } + .embeddedServiceSidebarButton { + &.uiButton--inverse { + .label { + color: #fff; + text-decoration: underline; + } + &:not(:disabled):focus { + background-color: #0070d1; + } + } + } + .embeddedServiceLiveAgentStateChatAvatar { + &.isLightningOutContext { + .agentIconColor0 { + background-color: #0070d1; + } + } + } + .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; + } + } + } + } + } + .chatHeaderBranding { + background-color: #0070d1; + } + span { + &.required { + color: #db0020; + } } } - .embeddedServiceSidebarFormField .uiInput input { - border: 1px solid #8e9292; +} +.embeddedServiceHelpButton { + .helpButton { + .uiButton { + background-color: #0070d1 !important; + } } - .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; + .embeddedServiceIcon { + display: inline-block!important; } } - -.embeddedServiceHelpButton .helpButton .uiButton { - background-color: #0070d1 !important; -} - -.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 { - background-color: #0070d1; -} - -.dockableContainer.showDockableContainer { - font-family: AvertaRegular; - color: #727676; -} - -.dockableContainer.showDockableContainer span.required { - color: #db0020; -} - -.dockableContainer.showDockableContainer .sidebarBody button:hover { +.modalContainer { + &.sidebarMinimized { + &.layout-docted { + &.embeddedServiceSidebar { + .embeddedServiceSidebarMinimizedDefaultUI { + .helpButton, + .sidebarHeader { + &.minimizedContainer { + .embeddedServiceSidebarMinimizedDefaultUI { + background-color: #0070d1; + border: 1px solid #0070d1; + } + } + } + } + } + } + } } From 30b290b4e92303ebe0b4a3ca32942c4ee52d5b8a Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 6 May 2025 15:49:45 -0400 Subject: [PATCH 2/2] Format code. --- .../salesforce-webchat/salesforce-webchat.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue index 84a06d241..9022553a7 100644 --- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue +++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue @@ -146,7 +146,7 @@ export default { } } .embeddedServiceIcon { - display: inline-block!important; + display: inline-block !important; } } .modalContainer {