From b252521943080f0b08ee483da4c2ace7e8d7fae6 Mon Sep 17 00:00:00 2001 From: Rasmus Tauts Date: Wed, 20 Sep 2023 12:34:51 +0300 Subject: [PATCH] Apply Global colors to all views Global colors were not applied to all views and this PR fixes this issue MOB-2679 --- GliaWidgets/Color.swift | 4 +-- .../Theme+SecureConversationsWelcome.swift | 12 +++---- .../RemoteConfiguration.swift | 2 +- .../Sources/Theme/Survey/Theme+Survey.swift | 2 +- .../Survey/Theme.Survey.InputQuestion.swift | 2 +- GliaWidgets/Sources/Theme/Theme+Alert.swift | 2 +- .../Theme/Theme+AlertConfiguration.swift | 4 +-- GliaWidgets/Sources/Theme/Theme+Chat.swift | 34 +++++++++---------- GliaWidgets/Sources/Theme/Theme+Gva.swift | 22 ++++++------ .../Sources/Theme/Theme+VisitorCode.swift | 10 ++---- GliaWidgets/Sources/Theme/Theme.swift | 4 +-- GliaWidgets/Sources/Theme/ThemeColor.swift | 12 ++----- .../Settings/SettingsViewController.swift | 3 +- 13 files changed, 50 insertions(+), 63 deletions(-) diff --git a/GliaWidgets/Color.swift b/GliaWidgets/Color.swift index 0f92d83b9..b2fc2b771 100644 --- a/GliaWidgets/Color.swift +++ b/GliaWidgets/Color.swift @@ -8,7 +8,5 @@ enum Color { static let baseNormal = UIColor(hex: 0x6C7683) // grey static let baseShade = UIColor(hex: 0x6C7683, alpha: 0.5) static let baseDark = UIColor(hex: 0x2C0735) // purple - static let lightGrey = UIColor(hex: 0xF3F3F3) // light gray - static let grey = UIColor(hex: 0x999999) // gray - static let background: UIColor = .white + static let baseNeutral = UIColor(hex: 0xF3F3F3) // light gray } diff --git a/GliaWidgets/SecureConversations/Welcome/Theme+SecureConversationsWelcome.swift b/GliaWidgets/SecureConversations/Welcome/Theme+SecureConversationsWelcome.swift index 448b677d1..e418b6be1 100644 --- a/GliaWidgets/SecureConversations/Welcome/Theme+SecureConversationsWelcome.swift +++ b/GliaWidgets/SecureConversations/Welcome/Theme+SecureConversationsWelcome.swift @@ -54,7 +54,7 @@ extension Theme { borderColor: color.baseNormal, borderWidth: 1, cornerRadius: 4, - backgroundColor: color.background, + backgroundColor: color.baseLight, accessibility: .init(isFontScalingEnabled: true) ) @@ -68,7 +68,7 @@ extension Theme { borderColor: color.primary, borderWidth: 1, cornerRadius: 4, - backgroundColor: color.background, + backgroundColor: color.baseLight, accessibility: .init(isFontScalingEnabled: true) ) @@ -178,7 +178,7 @@ extension Theme { errorIcon: Asset.uploadError.image, errorIconColor: color.systemNegative, backgroundColor: color.primary, - errorBackgroundColor: Color.lightGrey, + errorBackgroundColor: color.baseNeutral, accessibility: .init(isFontScalingEnabled: true) ) let uploading = FileUploadStateStyle( @@ -214,7 +214,7 @@ extension Theme { error: error, progressColor: color.primary, errorProgressColor: color.systemNegative, - progressBackgroundColor: Color.lightGrey, + progressBackgroundColor: color.baseNeutral, removeButtonImage: Asset.mcRemoveUpload.image, removeButtonColor: color.baseNormal, backgroundColor: .commonGray, @@ -267,7 +267,7 @@ extension Theme { return AttachmentSourceListStyle( items: [pickPhoto, takePhoto, browse], separatorColor: color.baseShade, - backgroundColor: Color.lightGrey + backgroundColor: color.baseNeutral ) } @@ -285,7 +285,7 @@ extension Theme { filePickerButtonStyle: filePickerButtonStyle, attachmentListStyle: uploadListStyle, pickMediaStyle: pickMediaStyle, - backgroundColor: color.background + backgroundColor: color.baseLight ) } } diff --git a/GliaWidgets/Sources/RemoteConfiguration/RemoteConfiguration.swift b/GliaWidgets/Sources/RemoteConfiguration/RemoteConfiguration.swift index 4b78ad3cf..c25bb8a3a 100644 --- a/GliaWidgets/Sources/RemoteConfiguration/RemoteConfiguration.swift +++ b/GliaWidgets/Sources/RemoteConfiguration/RemoteConfiguration.swift @@ -20,8 +20,8 @@ extension RemoteConfiguration { let baseLight: String? let baseDark: String? let baseShade: String? - let background: String? let systemNegative: String? + let baseNeutral: String? } } diff --git a/GliaWidgets/Sources/Theme/Survey/Theme+Survey.swift b/GliaWidgets/Sources/Theme/Survey/Theme+Survey.swift index 563428bf5..d5238d6bd 100644 --- a/GliaWidgets/Sources/Theme/Survey/Theme+Survey.swift +++ b/GliaWidgets/Sources/Theme/Survey/Theme+Survey.swift @@ -56,7 +56,7 @@ extension Theme.SurveyStyle { return .init( layer: .init( - background: .fill(color: color.background), + background: .fill(color: color.baseLight), borderColor: color.baseDark.cgColor, cornerRadius: 30 ), diff --git a/GliaWidgets/Sources/Theme/Survey/Theme.Survey.InputQuestion.swift b/GliaWidgets/Sources/Theme/Survey/Theme.Survey.InputQuestion.swift index f164bccf4..6fde7c07d 100644 --- a/GliaWidgets/Sources/Theme/Survey/Theme.Survey.InputQuestion.swift +++ b/GliaWidgets/Sources/Theme/Survey/Theme.Survey.InputQuestion.swift @@ -33,7 +33,7 @@ public extension Theme.SurveyStyle { accessibility: .init(isFontScalingEnabled: true) ), normalLayer: .init( - background: .fill(color: Color.baseLight), + background: .fill(color: color.baseLight), borderColor: color.baseNormal.cgColor, borderWidth: 1, cornerRadius: 4 diff --git a/GliaWidgets/Sources/Theme/Theme+Alert.swift b/GliaWidgets/Sources/Theme/Theme+Alert.swift index 5f5da0a23..eeada367f 100644 --- a/GliaWidgets/Sources/Theme/Theme+Alert.swift +++ b/GliaWidgets/Sources/Theme/Theme+Alert.swift @@ -31,7 +31,7 @@ extension Theme { titleImageColor: color.primary, messageFont: font.bodyText, messageColor: color.baseDark, - backgroundColor: .fill(color: color.background), + backgroundColor: .fill(color: color.baseLight), closeButtonColor: .fill(color: color.baseNormal), actionAxis: .horizontal, positiveAction: positiveAction, diff --git a/GliaWidgets/Sources/Theme/Theme+AlertConfiguration.swift b/GliaWidgets/Sources/Theme/Theme+AlertConfiguration.swift index d70056d0c..61b226442 100644 --- a/GliaWidgets/Sources/Theme/Theme+AlertConfiguration.swift +++ b/GliaWidgets/Sources/Theme/Theme+AlertConfiguration.swift @@ -41,7 +41,7 @@ extension Theme { infoFont: font.subtitle, infoColor: color.baseDark, borderColor: color.primary, - backgroundColor: color.background, + backgroundColor: color.baseLight, icon: Asset.upgradeAudio.image, iconColor: color.primary ) @@ -53,7 +53,7 @@ extension Theme { infoFont: font.subtitle, infoColor: color.baseDark, borderColor: color.primary, - backgroundColor: color.background, + backgroundColor: color.baseLight, icon: Asset.upgradePhone.image, iconColor: color.primary ) diff --git a/GliaWidgets/Sources/Theme/Theme+Chat.swift b/GliaWidgets/Sources/Theme/Theme+Chat.swift index a14f32063..edad47781 100644 --- a/GliaWidgets/Sources/Theme/Theme+Chat.swift +++ b/GliaWidgets/Sources/Theme/Theme+Chat.swift @@ -180,7 +180,7 @@ extension Theme { accessibility: .init(isFontScalingEnabled: true) ) let operatorImageFile = ChatImageFileContentStyle( - backgroundColor: Color.lightGrey, + backgroundColor: color.baseNeutral, accessibility: .init( contentAccessibilityLabel: Localization.Chat.Attachment.Message.Accessibility.label, youAccessibilityPlaceholder: Localization.General.you, @@ -196,7 +196,7 @@ extension Theme { let operatorMessage = OperatorMessageStyle( text: operatorText, background: .init( - background: .fill(color: Color.lightGrey), + background: .fill(color: color.baseNeutral), borderColor: .clear, borderWidth: .zero, cornerRadius: 8.49 @@ -219,7 +219,7 @@ extension Theme { ) ) let choiceCardOptionNormalState = Button( - background: .fill(color: Color.lightGrey), + background: .fill(color: color.baseNeutral), title: .init( color: color.baseDark.hex, font: font.bodyText, @@ -233,7 +233,7 @@ extension Theme { ) ) let choiceCardOptionSelectedState = Button( - background: .fill(color: Color.primary), + background: .fill(color: color.primary), title: .init( color: color.baseLight.hex, font: font.bodyText, @@ -247,16 +247,16 @@ extension Theme { ) ) let choiceCardOptionDisabledState = Button( - background: .fill(color: Color.lightGrey), + background: .fill(color: color.baseNeutral), title: .init( - color: Color.grey.hex, + color: color.baseShade.hex, font: font.bodyText, textStyle: .body, accessibility: .init(isFontScalingEnabled: true) ), cornerRadius: 4, borderWidth: 1, - borderColor: Color.baseShade.toRGBAHex(), + borderColor: color.baseShade.toRGBAHex(), accessibility: .init( label: Localization.Chat.ChoiceCard.Button.Disabled.Accessibility.label, isFontScalingEnabled: true @@ -305,7 +305,7 @@ extension Theme { placeholderFont: font.bodyText, placeholderColor: color.baseNormal, separatorColor: color.baseShade, - backgroundColor: color.background, + backgroundColor: color.baseLight, mediaButton: mediaButton, sendButton: sendButton, uploadList: uploadListStyle, @@ -372,14 +372,14 @@ extension Theme { title: Localization.Chat.unreadMessageDivider, titleColor: Color.baseNormal, titleFont: font.buttonLabel, - lineColor: Color.primary, + lineColor: color.primary, accessibility: .init(isFontScalingEnabled: true) ) let systemMessage = SystemMessageStyle( text: operatorText, background: Theme.Layer( - background: .fill(color: Color.lightGrey), + background: .fill(color: color.baseNeutral), borderColor: .clear, borderWidth: .zero, cornerRadius: 8.49 @@ -391,7 +391,7 @@ extension Theme { return ChatStyle( header: header, connect: connect, - backgroundColor: .fill(color: color.background), + backgroundColor: .fill(color: color.baseLight), preferredStatusBarStyle: .lightContent, title: Localization.Engagement.Chat.title, visitorMessageStyle: visitorMessage, @@ -424,7 +424,7 @@ extension Theme { errorIcon: Asset.uploadError.image, errorIconColor: color.systemNegative, backgroundColor: color.primary, - errorBackgroundColor: Color.lightGrey, + errorBackgroundColor: color.baseNeutral, accessibility: .init(isFontScalingEnabled: true) ) let uploading = FileUploadStateStyle( @@ -460,7 +460,7 @@ extension Theme { error: error, progressColor: color.primary, errorProgressColor: color.systemNegative, - progressBackgroundColor: Color.lightGrey, + progressBackgroundColor: color.baseNeutral, removeButtonImage: Asset.uploadRemove.image, removeButtonColor: color.baseNormal, accessibility: .init( @@ -481,7 +481,7 @@ extension Theme { errorIcon: Asset.uploadError.image, errorIconColor: color.systemNegative, backgroundColor: color.primary, - errorBackgroundColor: Color.lightGrey, + errorBackgroundColor: color.baseNeutral, accessibility: .init(isFontScalingEnabled: true) ) let download = ChatFileDownloadStateStyle( @@ -527,9 +527,9 @@ extension Theme { error: error, progressColor: color.primary, errorProgressColor: color.systemNegative, - progressBackgroundColor: Color.lightGrey, + progressBackgroundColor: color.baseNeutral, backgroundColor: .white, - borderColor: Color.lightGrey, + borderColor: color.baseNeutral, accessibility: .init( contentAccessibilityLabel: Localization.Chat.Attachment.Message.Accessibility.label, youAccessibilityPlaceholder: Localization.General.you, @@ -580,7 +580,7 @@ extension Theme { return AttachmentSourceListStyle( items: [pickPhoto, takePhoto, browse], separatorColor: color.baseShade, - backgroundColor: Color.lightGrey + backgroundColor: color.baseNeutral ) } } diff --git a/GliaWidgets/Sources/Theme/Theme+Gva.swift b/GliaWidgets/Sources/Theme/Theme+Gva.swift index 789ffc1cd..6f7fd7e70 100644 --- a/GliaWidgets/Sources/Theme/Theme+Gva.swift +++ b/GliaWidgets/Sources/Theme/Theme+Gva.swift @@ -20,14 +20,14 @@ extension Theme { ), accessibility: .init(isFontScalingEnabled: true) ), - backgroundColor: .fill(color: color.lightGrey), + backgroundColor: .fill(color: color.baseNeutral), cornerRadius: 10, borderWidth: 0, borderColor: .clear, button: .init( textFont: font.caption, - textColor: .black, - backgroundColor: .fill(color: color.background), + textColor: color.baseDark, + backgroundColor: .fill(color: color.baseLight), cornerRadius: 5, borderColor: .clear, borderWidth: 0, @@ -37,16 +37,16 @@ extension Theme { let quickReplyButton: GvaQuickReplyButtonStyle = .init( textFont: font.buttonLabel, - textColor: Color.primary, - backgroundColor: .fill(color: Color.baseLight), + textColor: color.primary, + backgroundColor: .fill(color: color.baseLight), cornerRadius: 10, - borderColor: Color.primary, + borderColor: color.primary, borderWidth: 1 ) let galleryCard: GvaGalleryCardStyle = .init( cardContainer: .init( - backgroundColor: .fill(color: color.lightGrey), + backgroundColor: .fill(color: color.baseNeutral), cornerRadius: 8, borderColor: .clear, borderWidth: 0 @@ -59,22 +59,22 @@ extension Theme { ), title: .init( font: font.mediumSubtitle1, - textColor: .black, + textColor: color.baseDark, textStyle: .body ), subtitle: .init( font: font.caption, - textColor: .black, + textColor: color.baseDark, textStyle: .caption1 ), button: .init( title: .init( font: font.caption, - textColor: .black, + textColor: color.baseDark, textStyle: .caption1 ), background: .init( - backgroundColor: .fill(color: color.background), + backgroundColor: .fill(color: color.baseLight), cornerRadius: 8, borderColor: .clear, borderWidth: 0 diff --git a/GliaWidgets/Sources/Theme/Theme+VisitorCode.swift b/GliaWidgets/Sources/Theme/Theme+VisitorCode.swift index a07dcbc8a..aff09be1e 100644 --- a/GliaWidgets/Sources/Theme/Theme+VisitorCode.swift +++ b/GliaWidgets/Sources/Theme/Theme+VisitorCode.swift @@ -3,8 +3,8 @@ import UIKit extension Theme { var visitorCodeStyle: VisitorCodeStyle { let numberSlot = NumberSlotStyle( - backgroundColor: .fill(color: color.background), - borderColor: UIColor.ultraLightGray, + backgroundColor: .fill(color: color.baseLight), + borderColor: color.baseNeutral, borderWidth: 1, cornerRadius: 8, numberFont: font.header1, @@ -31,7 +31,7 @@ extension Theme { poweredBy: poweredBy, numberSlot: numberSlot, actionButton: actionButton, - backgroundColor: .fill(color: color.background), + backgroundColor: .fill(color: color.baseLight), cornerRadius: 30, closeButtonColor: .fill(color: color.baseNormal), loadingProgressColor: color.primary, @@ -39,7 +39,3 @@ extension Theme { ) } } - -private extension UIColor { - static let ultraLightGray = UIColor(red: 0.953, green: 0.953, blue: 0.953, alpha: 1) -} diff --git a/GliaWidgets/Sources/Theme/Theme.swift b/GliaWidgets/Sources/Theme/Theme.swift index 97ce15437..dc1f06f6a 100644 --- a/GliaWidgets/Sources/Theme/Theme.swift +++ b/GliaWidgets/Sources/Theme/Theme.swift @@ -91,8 +91,8 @@ public class Theme { baseLight: config.globalColors?.baseLight.map { UIColor(hex: $0) }, baseDark: config.globalColors?.baseDark.map { UIColor(hex: $0) }, baseShade: config.globalColors?.baseShade.map { UIColor(hex: $0) }, - background: config.globalColors?.background.map { UIColor(hex: $0) }, - systemNegative: config.globalColors?.systemNegative.map { UIColor(hex: $0) } + systemNegative: config.globalColors?.systemNegative.map { UIColor(hex: $0) }, + baseNeutral: config.globalColors?.baseNeutral.map { UIColor(hex: $0) } ) ) ) diff --git a/GliaWidgets/Sources/Theme/ThemeColor.swift b/GliaWidgets/Sources/Theme/ThemeColor.swift index 59f9f351a..061a676b4 100644 --- a/GliaWidgets/Sources/Theme/ThemeColor.swift +++ b/GliaWidgets/Sources/Theme/ThemeColor.swift @@ -20,14 +20,11 @@ public struct ThemeColor { /// Base shade color. By default used as a separator color between message input area and chat, in attachment source list and as a border color in media upgrae prompts. public var baseShade: UIColor - /// Background color. By default used as a background color for chat, message input area and alerts. - public var background: UIColor - /// Negative system color. By default used as a background color for "End Engagement" button, negative action button in alerts and as file download/upload error icon, progress bar and text color. public var systemNegative: UIColor /// Light grey color. By default used as a background for gva persistent buttons and gallery cards. - public var lightGrey: UIColor + public var baseNeutral: UIColor /// /// - Parameters: @@ -37,7 +34,6 @@ public struct ThemeColor { /// - baseLight: Base light color. By default used as a text color in chat/call view title, visitor chat message, "End Engagement" button, queue/connection views and operator name in calls, alert titles and some other labels. /// - baseDark: Base dark color. By default used as a text color in chat queue/connect views, operator chat messages, choice cards, message entry area, upgrade prompts, attachment source list and some other labels. /// - baseShade: Base shade color. By default used as a separator color between message input area and chat, in attachment source list and as a border color in media upgrae prompts. - /// - background: Background color. By default used as a background color for chat, message input area and alerts. /// - systemNegative: Negative system color. By default used as a background color for "End Engagement" button, negative action button in alerts and as file download/upload error icon, progress bar and text color. public init( primary: UIColor? = nil, @@ -46,9 +42,8 @@ public struct ThemeColor { baseLight: UIColor? = nil, baseDark: UIColor? = nil, baseShade: UIColor? = nil, - background: UIColor? = nil, systemNegative: UIColor? = nil, - lightGrey: UIColor? = nil + baseNeutral: UIColor? = nil ) { self.primary = primary ?? Color.primary self.secondary = secondary ?? Color.secondary @@ -56,8 +51,7 @@ public struct ThemeColor { self.baseLight = baseLight ?? Color.baseLight self.baseDark = baseDark ?? Color.baseDark self.baseShade = baseShade ?? Color.baseShade - self.background = background ?? Color.background self.systemNegative = systemNegative ?? Color.systemNegative - self.lightGrey = lightGrey ?? Color.lightGrey + self.baseNeutral = baseNeutral ?? Color.baseNeutral } } diff --git a/TestingApp/Settings/SettingsViewController.swift b/TestingApp/Settings/SettingsViewController.swift index 0cfdd1eaa..f09d123ac 100644 --- a/TestingApp/Settings/SettingsViewController.swift +++ b/TestingApp/Settings/SettingsViewController.swift @@ -186,7 +186,7 @@ private extension SettingsViewController { ) backgroundColorCell = SettingsColorCell( title: "Background:", - color: props.theme.color.background + color: props.theme.color.baseLight ) systemNegativeColorCell = SettingsColorCell( title: "System negative:", @@ -316,7 +316,6 @@ private extension SettingsViewController { baseLight: baseLightColorCell.color, baseDark: baseDarkColorCell.color, baseShade: baseShadeColorCell.color, - background: backgroundColorCell.color, systemNegative: systemNegativeColorCell.color ) let font = ThemeFont(