Update and enable the new bloom style on the home screen. (#4291)

* Update Compound

* Adopt the new accent colour (and gradient) tokens.

ElementX/Sources/Other/SwiftUI/Views/AvatarHeaderView.swift

@@ -134,19 +134,19 @@ struct AvatarHeaderView<Footer: View>: View {
                 case .encrypted(true):
                     BadgeLabel(title: L10n.screenRoomDetailsBadgeEncrypted,
                                icon: \.lockSolid,
-                               isHighlighted: true)
+                               style: .accent)
                 case .encrypted(false):
                     BadgeLabel(title: L10n.screenRoomDetailsBadgeNotEncrypted,
                                icon: \.lockOff,
-                               isHighlighted: false)
+                               style: .info)
                 case .public:
                     BadgeLabel(title: L10n.screenRoomDetailsBadgePublic,
                                icon: \.public,
-                               isHighlighted: false)
+                               style: .info)
                 case .verified:
                     BadgeLabel(title: L10n.commonVerified,
                                icon: \.verified,
-                               isHighlighted: true)
+                               style: .accent)
                 }
             }
         }

ElementX/Sources/Other/SwiftUI/Views/BadgeLabel.swift

@@ -9,46 +9,64 @@ import Compound
 import SwiftUI
 
 struct BadgeLabel: View {
+    enum Style {
+        case accent
+        case info
+        case `default`
+    }
+    
     let title: String
     let icon: KeyPath<CompoundIcons, Image>
-    let isHighlighted: Bool
+    let style: Style
     
     var body: some View {
         Label(title,
               icon: icon,
               iconSize: .xSmall,
               relativeTo: .compound.bodySM)
-            .labelStyle(BadgeLabelStyle(isHighlighted: isHighlighted))
-    }
-}
-
-private struct BadgeLabelStyle: LabelStyle {
-    let isHighlighted: Bool
-    
-    var titleColor: Color {
-        isHighlighted ? .compound.textBadgeAccent : .compound.textBadgeInfo
+            .labelStyle(LabelStyle(style: style))
     }
     
-    var iconColor: Color {
-        isHighlighted ? .compound.iconSuccessPrimary : .compound.iconInfoPrimary
-    }
-    
-    var backgroundColor: Color {
-        isHighlighted ? .compound.bgBadgeAccent : .compound.bgBadgeInfo
-    }
-    
-    func makeBody(configuration: Configuration) -> some View {
-        HStack(spacing: 4) {
-            configuration.icon
-                .foregroundStyle(iconColor)
-            configuration.title
-                .foregroundStyle(titleColor)
+    private struct LabelStyle: SwiftUI.LabelStyle {
+        let style: Style
+        
+        var titleColor: Color {
+            switch style {
+            case .accent: .compound.textBadgeAccent
+            case .info: .compound.textBadgeInfo
+            case .default: .compound.textPrimary
+            }
+        }
+        
+        var iconColor: Color {
+            switch style {
+            case .accent: .compound.iconAccentPrimary
+            case .info: .compound.iconInfoPrimary
+            case .default: .compound.iconPrimary
+            }
+        }
+        
+        var backgroundColor: Color {
+            switch style {
+            case .accent: .compound.bgBadgeAccent
+            case .info: .compound.bgBadgeInfo
+            case .default: .compound.bgBadgeDefault
+            }
+        }
+        
+        func makeBody(configuration: Configuration) -> some View {
+            HStack(spacing: 4) {
+                configuration.icon
+                    .foregroundStyle(iconColor)
+                configuration.title
+                    .foregroundStyle(titleColor)
+            }
+            .font(.compound.bodySM)
+            .padding(.leading, 8)
+            .padding(.trailing, 12)
+            .padding(.vertical, 4)
+            .background(Capsule().fill(backgroundColor))
         }
-        .font(.compound.bodySM)
-        .padding(.leading, 8)
-        .padding(.trailing, 12)
-        .padding(.vertical, 4)
-        .background(Capsule().fill(backgroundColor))
     }
 }
 
@@ -57,10 +75,13 @@ struct BadgeLabel_Previews: PreviewProvider, TestablePreview {
         VStack(spacing: 10) {
             BadgeLabel(title: "Encrypted",
                        icon: \.lockSolid,
-                       isHighlighted: true)
+                       style: .accent)
             BadgeLabel(title: "Not encrypted",
                        icon: \.lockSolid,
-                       isHighlighted: false)
+                       style: .info)
+            BadgeLabel(title: "1234",
+                       icon: \.userProfile,
+                       style: .default)
         }
     }
 }

ElementX/Sources/Other/SwiftUI/Views/HorizontalHighlightGradient.swift

@@ -8,28 +8,29 @@
 import Compound
 import SwiftUI
 
+extension View {
+    func highlight(gradient: Gradient, borderColor: Color, backgroundColor: Color = .clear) -> some View {
+        modifier(HorizontalHighlightGradient(gradient: gradient, borderColor: borderColor, backgroundColor: backgroundColor))
+    }
+}
+
 struct HorizontalHighlightGradient: ViewModifier {
+    let gradient: Gradient
     let borderColor: Color
-    let primaryColor: Color
-    let secondaryColor: Color
+    let backgroundColor: Color
     
     func body(content: Content) -> some View {
         ZStack(alignment: .top) {
             VStack(spacing: 0) {
                 borderColor
                     .frame(height: 1)
-                LinearGradient(colors: [primaryColor, secondaryColor],
+                LinearGradient(gradient: gradient,
                                startPoint: .top,
                                endPoint: .bottom)
+                    .background(backgroundColor)
             }
             content
                 .layoutPriority(1)
         }
     }
 }
-
-extension View {
-    func highlight(borderColor: Color, primaryColor: Color, secondaryColor: Color) -> some View {
-        modifier(HorizontalHighlightGradient(borderColor: borderColor, primaryColor: primaryColor, secondaryColor: secondaryColor))
-    }
-}