Update the welcome screen with the latest designs. (#2067)

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

@@ -76,6 +76,7 @@ struct AnalyticsPromptScreen: View {
         }
         .fixedSize(horizontal: false, vertical: true)
         .frame(maxWidth: .infinity)
+        .environment(\.backgroundStyle, AnyShapeStyle(.compound.bgSubtleSecondary))
     }
 
     @ViewBuilder

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

@@ -34,10 +34,16 @@ enum ListPosition {
 }
 
 struct RoundedLabelItem<Icon: View>: View {
+    @Environment(\.backgroundStyle) private var backgroundStyle
+    
     let title: String
     let listPosition: ListPosition
     let iconContent: () -> Icon
     
+    private var backgroundColor: AnyShapeStyle {
+        backgroundStyle ?? AnyShapeStyle(.compound.bgSubtleSecondary)
+    }
+    
     var body: some View {
         Label { Text(title) } icon: {
             iconContent()
@@ -46,7 +52,7 @@ struct RoundedLabelItem<Icon: View>: View {
         .padding(.horizontal, 20)
         .padding(.vertical, 12)
         .frame(maxWidth: .infinity, alignment: .leading)
-        .background(Color.compound.bgSubtleSecondary, in: RoundedCornerShape(radius: 16, corners: listPosition.roundedCorners))
+        .background(backgroundColor, in: RoundedCornerShape(radius: 16, corners: listPosition.roundedCorners))
     }
 }
 

ElementX/Sources/Screens/WelcomeScreenScreen/View/WelcomeScreen.swift

@@ -17,7 +17,6 @@
 import SwiftUI
 
 struct WelcomeScreen: View {
-    @ScaledMetric var iconSize = 20
     @ObservedObject var context: WelcomeScreenScreenViewModel.Context
     
     var body: some View {
@@ -33,56 +32,41 @@ struct WelcomeScreen: View {
         }
     }
     
-    @ViewBuilder
     private var mainContent: some View {
-        VStack(spacing: 42) {
+        VStack(spacing: 80) {
             header
             list
         }
     }
     
-    @ViewBuilder
     private var header: some View {
         VStack(spacing: 32) {
             OnboardingLogo(isOnGradient: true)
                 .scaleEffect(x: 0.75, y: 0.75)
                 .padding(.vertical, -20)
             
-            title
+            Text(L10n.screenWelcomeTitle(InfoPlistReader.main.bundleDisplayName))
-        }
-    }
-
-    @ViewBuilder
-    private var title: some View {
-        VStack(spacing: 12) {
-            Text(context.viewState.title)
                 .font(Font.compound.headingLGBold)
                 .foregroundColor(Color.compound.textPrimary)
                 .multilineTextAlignment(.center)
-            Text(context.viewState.subtitle)
-                .font(Font.compound.bodyMD)
-                .foregroundColor(Color.compound.textPrimary)
-                .multilineTextAlignment(.center)
         }
     }
 
     private var list: some View {
         VStack(alignment: .leading, spacing: 4) {
-            RoundedLabelItem(title: context.viewState.bullet1, listPosition: .top) {
+            RoundedLabelItem(title: L10n.screenWelcomeBullet2, listPosition: .top) {
-                Image(systemName: "exclamationmark.transmission")
-                    .foregroundColor(.compound.iconSecondary)
-            }
-            RoundedLabelItem(title: context.viewState.bullet2, listPosition: .middle) {
                 Image(systemName: "lock")
-                    .foregroundColor(.compound.iconSecondary)
+                    .foregroundColor(.compound.iconSecondaryAlpha)
             }
-            RoundedLabelItem(title: context.viewState.bullet3, listPosition: .bottom) {
+            RoundedLabelItem(title: L10n.screenWelcomeBullet3, listPosition: .bottom) {
-                Image(systemName: "plus.bubble")
+                Image(systemName: "exclamationmark.bubble")
-                    .foregroundColor(.compound.iconSecondary)
+                    .padding(.horizontal, -3)
+                    .foregroundColor(.compound.iconSecondaryAlpha)
             }
         }
         .fixedSize(horizontal: false, vertical: true)
         .frame(maxWidth: .infinity)
+        .environment(\.backgroundStyle, AnyShapeStyle(.compound.bgCanvasDefaultLevel1))
     }
 
     @ViewBuilder
@@ -90,7 +74,7 @@ struct WelcomeScreen: View {
         Button {
             context.send(viewAction: .doneTapped)
         } label: {
-            Text(context.viewState.buttonTitle)
+            Text(L10n.screenWelcomeButton)
         }
         .buttonStyle(.compound(.primary))
         .accessibilityIdentifier(A11yIdentifiers.welcomeScreen.letsGo)

ElementX/Sources/Screens/WelcomeScreenScreen/WelcomeScreenScreenModels.swift

@@ -20,14 +20,7 @@ enum WelcomeScreenScreenViewModelAction {
     case dismiss
 }
 
-struct WelcomeScreenScreenViewState: BindableState {
+struct WelcomeScreenScreenViewState: BindableState { }
-    let title = L10n.screenWelcomeTitle(InfoPlistReader.main.bundleDisplayName)
-    let subtitle = L10n.screenWelcomeSubtitle
-    let bullet1 = L10n.screenWelcomeBullet1
-    let bullet2 = L10n.screenWelcomeBullet2
-    let bullet3 = L10n.screenWelcomeBullet3
-    let buttonTitle = L10n.screenWelcomeButton
-}
 
 enum WelcomeScreenScreenViewAction {
     case doneTapped

UnitTests/__Snapshots__/PreviewTests/test_welcomeScreen.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:59f9e3a817e49f7f258014d05595bba1c14a7cbb701f11ba6d092fd7c9f55f17
+oid sha256:587d707df3881ab349bc4656c275eaa394b11fb742f1718a4617778bf38771df
-size 814989
+size 836620

changelog.d/2053.change

@@ -0,0 +1 @@
+Update the Welcome Screen to the latest designs.