Update HeroImage to match the BigIcon component from Compound. (#3439)

We can move it across in a following PR.

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

@@ -10,39 +10,36 @@ import SwiftUI
 
 /// An image that is styled for use as the main/top/hero screen icon. This component
 /// takes a compound icon. If you would like to apply it to an SFSymbol, you can call
-/// the `heroImage()` modifier directly on the Image.
-struct HeroImage: View {
+/// the `bigIcon()` modifier directly on the Image.
+struct BigIcon: View {
     enum Style {
-        case normal
-        case subtle
+        case defaultSolid
+        case `default`
+        case alertSolid
+        case alert
+        case successSolid
         case success
-        case critical
-        case criticalOnSecondary
         
         var foregroundColor: Color {
             switch self {
-            case .normal:
-                .compound.iconPrimary
-            case .subtle:
+            case .defaultSolid, .default:
                 .compound.iconSecondary
-            case .success:
-                .compound.iconSuccessPrimary
-            case .critical, .criticalOnSecondary:
+            case .alertSolid, .alert:
                 .compound.iconCriticalPrimary
+            case .successSolid, .success:
+                .compound.iconSuccessPrimary
             }
         }
         
         var backgroundFillColor: Color {
             switch self {
-            case .normal:
+            case .defaultSolid:
                 .compound.bgSubtleSecondary
-            case .subtle:
-                .compound.bgSubtlePrimary
-            case .success:
-                .compound.bgSuccessSubtle
-            case .critical:
+            case .alertSolid:
                 .compound.bgCriticalSubtle
-            case .criticalOnSecondary:
+            case .successSolid:
+                .compound.bgSuccessSubtle
+            case .default, .alert, .success:
                 .compound.bgCanvasDefault
             }
         }
@@ -50,32 +47,32 @@ struct HeroImage: View {
     
     /// The icon that is shown.
     let icon: KeyPath<CompoundIcons, Image>
-    var style: Style = .normal
+    var style: Style = .defaultSolid
     
     var body: some View {
-        CompoundIcon(icon, size: .custom(42), relativeTo: .title)
-            .modifier(HeroImageModifier(style: style))
+        CompoundIcon(icon, size: .custom(32), relativeTo: .title)
+            .modifier(BigIconModifier(style: style))
     }
 }
 
 extension Image {
     /// Styles the image for use as the main/top/hero screen icon. You should prefer
-    /// the HeroImage component when possible, by using an icon from Compound.
-    func heroImage(insets: CGFloat = 16, style: HeroImage.Style = .normal) -> some View {
+    /// the BigIcon component when possible, by using an icon from Compound.
+    func bigIcon(insets: CGFloat = 16, style: BigIcon.Style = .defaultSolid) -> some View {
         resizable()
             .renderingMode(.template)
             .aspectRatio(contentMode: .fit)
             .scaledPadding(insets, relativeTo: .title)
-            .modifier(HeroImageModifier(style: style))
+            .modifier(BigIconModifier(style: style))
     }
 }
 
-private struct HeroImageModifier: ViewModifier {
-    let style: HeroImage.Style
+private struct BigIconModifier: ViewModifier {
+    let style: BigIcon.Style
     
     func body(content: Content) -> some View {
         content
-            .scaledFrame(size: 70, relativeTo: .title)
+            .scaledFrame(size: 64, relativeTo: .title)
             .foregroundColor(style.foregroundColor)
             .background {
                 RoundedRectangle(cornerRadius: 14)
@@ -87,22 +84,32 @@ private struct HeroImageModifier: ViewModifier {
 
 // MARK: - Previews
 
-struct HeroImage_Previews: PreviewProvider, TestablePreview {
+struct BigIcon_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack(spacing: 20) {
+        VStack(spacing: 40) {
             HStack(spacing: 20) {
-                HeroImage(icon: \.lockSolid)
+                BigIcon(icon: \.lockSolid)
                 Image(systemName: "hourglass")
-                    .heroImage()
+                    .bigIcon()
                 Image(asset: Asset.Images.serverSelectionIcon)
-                    .heroImage(insets: 19)
+                    .bigIcon(insets: 19)
             }
             
-            HStack(spacing: 20) {
-                HeroImage(icon: \.helpSolid, style: .subtle)
-                HeroImage(icon: \.checkCircleSolid, style: .success)
-                HeroImage(icon: \.error, style: .critical)
-                HeroImage(icon: \.error, style: .criticalOnSecondary)
+            VStack(spacing: 20) {
+                HStack(spacing: 20) {
+                    BigIcon(icon: \.helpSolid)
+                    BigIcon(icon: \.helpSolid, style: .default)
+                }
+                
+                HStack(spacing: 20) {
+                    BigIcon(icon: \.error, style: .alertSolid)
+                    BigIcon(icon: \.error, style: .alert)
+                }
+                
+                HStack(spacing: 20) {
+                    BigIcon(icon: \.checkCircleSolid, style: .successSolid)
+                    BigIcon(icon: \.checkCircleSolid, style: .success)
+                }
             }
         }
     }