Update UI components

- add bottom background to certain screens
- change hero images to support green styles and fix default colors
- switch new onboarding screns to the FullScreenDialog
- disable interactive dismissal
- update snapshots

ElementX/Resources/Assets.xcassets/images/Alerts.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "Alerts.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

ElementX/Resources/Assets.xcassets/images/background-bottom-light.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "background-bottom-light.png",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ElementX/Resources/Localizations/en.lproj/Localizable.strings

@@ -398,6 +398,10 @@
 "screen_edit_profile_error_title" = "Unable to update profile";
 "screen_edit_profile_title" = "Edit profile";
 "screen_edit_profile_updating_details" = "Updating profile…";
+"screen_identity_confirmation_subtitle" = "Verify this device to set up secure messaging.";
+"screen_identity_confirmation_title" = "Confirm that it's you";
+"screen_identity_confirmed_subtitle" = "Now you can read or send messages securely, and anyone you chat with can also trust this device.";
+"screen_identity_confirmed_title" = "Device verified";
 "screen_invites_decline_chat_message" = "Are you sure you want to decline the invitation to join %1$@?";
 "screen_invites_decline_chat_title" = "Decline invite";
 "screen_invites_decline_direct_chat_message" = "Are you sure you want to decline this private chat with %1$@?";
@@ -499,7 +503,7 @@
 "screen_room_attachment_text_formatting" = "Text Formatting";
 "screen_room_change_permissions_administrators" = "Admins only";
 "screen_room_change_permissions_ban_people" = "Ban people";
-"screen_room_change_permissions_delete_messages" = "Delete messages";
+"screen_room_change_permissions_delete_messages" = "Remove messages";
 "screen_room_change_permissions_invite_people" = "Invite people";
 "screen_room_change_permissions_moderators" = "Admins and moderators";
 "screen_room_change_permissions_remove_people" = "Remove people";

ElementX/Sources/Generated/Assets.swift

@@ -31,8 +31,10 @@ internal enum Asset {
     internal static let grabber = ColorAsset(name: "colors/grabber")
   }
   internal enum Images {
+    internal static let alerts = ImageAsset(name: "images/Alerts")
     internal static let appLogo = ImageAsset(name: "images/app-logo")
     internal static let serverSelectionIcon = ImageAsset(name: "images/server-selection-icon")
+    internal static let backgroundBottomLight = ImageAsset(name: "images/background-bottom-light")
     internal static let closeRte = ImageAsset(name: "images/close-rte")
     internal static let composerAttachment = ImageAsset(name: "images/composer-attachment")
     internal static let stopRecording = ImageAsset(name: "images/stop-recording")

ElementX/Sources/Generated/Strings.swift

@@ -991,6 +991,14 @@ internal enum L10n {
   internal static var screenEditProfileTitle: String { return L10n.tr("Localizable", "screen_edit_profile_title") }
   /// Updating profile…
   internal static var screenEditProfileUpdatingDetails: String { return L10n.tr("Localizable", "screen_edit_profile_updating_details") }
+  /// Verify this device to set up secure messaging.
+  internal static var screenIdentityConfirmationSubtitle: String { return L10n.tr("Localizable", "screen_identity_confirmation_subtitle") }
+  /// Confirm that it's you
+  internal static var screenIdentityConfirmationTitle: String { return L10n.tr("Localizable", "screen_identity_confirmation_title") }
+  /// Now you can read or send messages securely, and anyone you chat with can also trust this device.
+  internal static var screenIdentityConfirmedSubtitle: String { return L10n.tr("Localizable", "screen_identity_confirmed_subtitle") }
+  /// Device verified
+  internal static var screenIdentityConfirmedTitle: String { return L10n.tr("Localizable", "screen_identity_confirmed_title") }
   /// Are you sure you want to decline the invitation to join %1$@?
   internal static func screenInvitesDeclineChatMessage(_ p1: Any) -> String {
     return L10n.tr("Localizable", "screen_invites_decline_chat_message", String(describing: p1))
@@ -1215,7 +1223,7 @@ internal enum L10n {
   internal static var screenRoomChangePermissionsAdministrators: String { return L10n.tr("Localizable", "screen_room_change_permissions_administrators") }
   /// Ban people
   internal static var screenRoomChangePermissionsBanPeople: String { return L10n.tr("Localizable", "screen_room_change_permissions_ban_people") }
-  /// Delete messages
+  /// Remove messages
   internal static var screenRoomChangePermissionsDeleteMessages: String { return L10n.tr("Localizable", "screen_room_change_permissions_delete_messages") }
   /// Everyone
   internal static var screenRoomChangePermissionsEveryone: String { return L10n.tr("Localizable", "screen_room_change_permissions_everyone") }

ElementX/Sources/Other/SwiftUI/Layout/FullscreenDialog.swift

@@ -72,7 +72,6 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
                     Spacer()
                         .frame(height: UIConstants.spacerHeight(in: geometry))
                 }
-                .background()
             }
         }
     }

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

@@ -21,35 +21,61 @@ import SwiftUI
 /// 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 {
+    enum Style {
+        case normal
+        case positive
+
+        var foregroundColor: Color {
+            switch self {
+            case .normal:
+                return .compound.iconSecondaryAlpha
+            case .positive:
+                return .compound.iconSuccessPrimary
+            }
+        }
+
+        var backgroundFillColor: Color {
+            switch self {
+            case .normal:
+                return .compound.bgSubtleSecondary
+            case .positive:
+                return .compound.bgSuccessSubtle
+            }
+        }
+    }
+
     /// The icon that is shown.
     let icon: KeyPath<CompoundIcons, Image>
+    var style: Style = .normal
 
     var body: some View {
         CompoundIcon(icon, size: .custom(42), relativeTo: .title)
-            .modifier(HeroImageModifier())
+            .modifier(HeroImageModifier(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) -> some View {
+    func heroImage(insets: CGFloat = 16, style: HeroImage.Style = .normal) -> some View {
         resizable()
             .renderingMode(.template)
             .aspectRatio(contentMode: .fit)
             .scaledPadding(insets, relativeTo: .title)
-            .modifier(HeroImageModifier())
+            .modifier(HeroImageModifier(style: style))
     }
 }
 
 private struct HeroImageModifier: ViewModifier {
+    let style: HeroImage.Style
+
     func body(content: Content) -> some View {
         content
-            .foregroundColor(.compound.iconPrimary)
             .scaledFrame(size: 70, relativeTo: .title)
+            .foregroundColor(style.foregroundColor)
             .background {
                 RoundedRectangle(cornerRadius: 14)
-                    .fill(Color.compound.bgSubtleSecondary)
+                    .fill(style.backgroundFillColor)
             }
             .accessibilityHidden(true)
     }

ElementX/Sources/Screens/Onboarding/AnalyticsPromptScreen/View/AnalyticsPromptScreen.swift

@@ -26,10 +26,11 @@ struct AnalyticsPromptScreen: View {
         } bottomContent: {
             buttons
         }
-        .background()
+        .background(Asset.Images.backgroundBottomLight.swiftUIImage.resizable().ignoresSafeArea())
         .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
         .navigationBarHidden(true)
         .navigationBarBackButtonHidden(true)
+        .interactiveDismissDisabled()
     }
 
     /// The main content of the screen that is shown inside the scroll view.

ElementX/Sources/Screens/Onboarding/IdentityConfirmationScreen/View/IdentityConfirmationScreen.swift

@@ -21,16 +21,16 @@ struct IdentityConfirmationScreen: View {
     @ObservedObject var context: IdentityConfirmationScreenViewModel.Context
 
     var body: some View {
-        ScrollView {
-            VStack(spacing: 32) {
-                screenHeader
-            }
-            .padding(.horizontal, 16)
-            .padding(.top, 24)
-            .frame(maxWidth: .infinity)
+        FullscreenDialog(topPadding: UIConstants.startScreenBreakerScreenTopPadding) {
+            screenHeader
+        } bottomContent: {
+            actionButtons
         }
-        .safeAreaInset(edge: .bottom) { actionButtons.padding() }
-        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+        .background()
+        .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
+        .navigationBarHidden(true)
+        .navigationBarBackButtonHidden(true)
+        .interactiveDismissDisabled()
     }
 
     // MARK: - Private
@@ -41,15 +41,13 @@ struct IdentityConfirmationScreen: View {
             HeroImage(icon: \.lockSolid)
                 .padding(.bottom, 16)
 
-            #warning("FIXME")
-            Text("Confirm that it's you")
+            Text(L10n.screenIdentityConfirmationTitle)
                 .font(.title2.bold())
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textPrimary)
                 .padding(.bottom, 8)
 
-            #warning("FIXME")
-            Text("Verify this device to set up secure messaging.")
+            Text(L10n.screenIdentityConfirmationSubtitle)
                 .font(.subheadline)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textSecondary)

ElementX/Sources/Screens/Onboarding/IdentityConfirmedScreen/View/IdentityConfirmedScreen.swift

@@ -21,35 +21,33 @@ struct IdentityConfirmedScreen: View {
     @ObservedObject var context: IdentityConfirmedScreenViewModel.Context
 
     var body: some View {
-        ScrollView {
-            VStack(spacing: 32) {
-                screenHeader
-            }
-            .padding(.horizontal, 16)
-            .padding(.top, 24)
-            .frame(maxWidth: .infinity)
+        FullscreenDialog(topPadding: UIConstants.startScreenBreakerScreenTopPadding) {
+            screenHeader
+        } bottomContent: {
+            actionButtons
         }
-        .safeAreaInset(edge: .bottom) { actionButtons.padding() }
-        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+        .background()
+        .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
+        .navigationBarHidden(true)
+        .navigationBarBackButtonHidden(true)
+        .interactiveDismissDisabled()
     }
 
     // MARK: - Private
 
     @ViewBuilder
     private var screenHeader: some View {
         VStack(spacing: 0) {
-            HeroImage(icon: \.checkCircle)
+            HeroImage(icon: \.checkCircle, style: .positive)
                 .padding(.bottom, 16)
 
-            #warning("FIXME")
-            Text("Device verified")
+            Text(L10n.screenIdentityConfirmedTitle)
                 .font(.title2.bold())
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textPrimary)
                 .padding(.bottom, 8)
 
-            #warning("FIXME")
-            Text("Now you can read or send messages securely, and anyone you chat with can also trust this device.")
+            Text(L10n.screenIdentityConfirmedSubtitle)
                 .font(.subheadline)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textSecondary)

ElementX/Sources/Screens/Onboarding/NotificationPermissionsScreen/View/NotificationPermissionsScreen.swift

@@ -26,10 +26,11 @@ struct NotificationPermissionsScreen: View {
         } bottomContent: {
             buttons
         }
-        .background()
+        .background(Asset.Images.backgroundBottomLight.swiftUIImage.resizable().ignoresSafeArea())
         .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
         .navigationBarHidden(true)
         .navigationBarBackButtonHidden(true)
+        .interactiveDismissDisabled()
     }
 
     /// The main content of the screen that is shown inside the scroll view.
@@ -38,17 +39,17 @@ struct NotificationPermissionsScreen: View {
             HeroImage(icon: \.notificationsSolid)
                 .padding(.bottom, 8)
 
-            #warning("FIXME")
-            Text("Allow notifications and never miss a message")
+            Text(L10n.screenNotificationOptinTitle)
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textPrimary)
 
-            #warning("FIXME")
-            Text("You can change your settings later.")
+            Text(L10n.screenNotificationOptinSubtitle)
                 .font(.compound.bodyMD)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textSecondary)
+
+            Asset.Images.alerts.swiftUIImage.resizable().aspectRatio(contentMode: .fit)
         }
     }