From b4ec04ec268db9cc90d1f51d8391ec1533ad1091 Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Mon, 13 Nov 2023 09:42:43 +0000 Subject: [PATCH] Update the welcome screen with the latest designs. (#2067) --- .../View/AnalyticsPromptScreen.swift | 1 + .../View/RoundedLabelItem.swift | 8 +++- .../View/WelcomeScreen.swift | 40 ++++++------------- .../WelcomeScreenScreenModels.swift | 9 +---- .../PreviewTests/test_welcomeScreen.1.png | 4 +- changelog.d/2053.change | 1 + 6 files changed, 24 insertions(+), 39 deletions(-) create mode 100644 changelog.d/2053.change diff --git a/ElementX/Sources/Screens/AnalyticsPromptScreen/View/AnalyticsPromptScreen.swift b/ElementX/Sources/Screens/AnalyticsPromptScreen/View/AnalyticsPromptScreen.swift index 2ec08c419..12bde95cf 100644 --- a/ElementX/Sources/Screens/AnalyticsPromptScreen/View/AnalyticsPromptScreen.swift +++ b/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 diff --git a/ElementX/Sources/Screens/AnalyticsPromptScreen/View/RoundedLabelItem.swift b/ElementX/Sources/Screens/AnalyticsPromptScreen/View/RoundedLabelItem.swift index 9aaf1ef81..162bfe0eb 100644 --- a/ElementX/Sources/Screens/AnalyticsPromptScreen/View/RoundedLabelItem.swift +++ b/ElementX/Sources/Screens/AnalyticsPromptScreen/View/RoundedLabelItem.swift @@ -34,10 +34,16 @@ enum ListPosition { } struct RoundedLabelItem: 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: 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)) } } diff --git a/ElementX/Sources/Screens/WelcomeScreenScreen/View/WelcomeScreen.swift b/ElementX/Sources/Screens/WelcomeScreenScreen/View/WelcomeScreen.swift index b9587354b..6768e8e5f 100644 --- a/ElementX/Sources/Screens/WelcomeScreenScreen/View/WelcomeScreen.swift +++ b/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 { @@ -32,57 +31,42 @@ struct WelcomeScreen: View { context.send(viewAction: .appeared) } } - - @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 - } - } - - @ViewBuilder - private var title: some View { - VStack(spacing: 12) { - Text(context.viewState.title) + Text(L10n.screenWelcomeTitle(InfoPlistReader.main.bundleDisplayName)) .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) { - Image(systemName: "exclamationmark.transmission") - .foregroundColor(.compound.iconSecondary) - } - RoundedLabelItem(title: context.viewState.bullet2, listPosition: .middle) { + RoundedLabelItem(title: L10n.screenWelcomeBullet2, listPosition: .top) { Image(systemName: "lock") - .foregroundColor(.compound.iconSecondary) + .foregroundColor(.compound.iconSecondaryAlpha) } - RoundedLabelItem(title: context.viewState.bullet3, listPosition: .bottom) { - Image(systemName: "plus.bubble") - .foregroundColor(.compound.iconSecondary) + RoundedLabelItem(title: L10n.screenWelcomeBullet3, listPosition: .bottom) { + Image(systemName: "exclamationmark.bubble") + .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) diff --git a/ElementX/Sources/Screens/WelcomeScreenScreen/WelcomeScreenScreenModels.swift b/ElementX/Sources/Screens/WelcomeScreenScreen/WelcomeScreenScreenModels.swift index 6d3834ea4..a9845b4d2 100644 --- a/ElementX/Sources/Screens/WelcomeScreenScreen/WelcomeScreenScreenModels.swift +++ b/ElementX/Sources/Screens/WelcomeScreenScreen/WelcomeScreenScreenModels.swift @@ -20,14 +20,7 @@ enum WelcomeScreenScreenViewModelAction { case dismiss } -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 -} +struct WelcomeScreenScreenViewState: BindableState { } enum WelcomeScreenScreenViewAction { case doneTapped diff --git a/UnitTests/__Snapshots__/PreviewTests/test_welcomeScreen.1.png b/UnitTests/__Snapshots__/PreviewTests/test_welcomeScreen.1.png index a00952dee..3572f91fe 100644 --- a/UnitTests/__Snapshots__/PreviewTests/test_welcomeScreen.1.png +++ b/UnitTests/__Snapshots__/PreviewTests/test_welcomeScreen.1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:59f9e3a817e49f7f258014d05595bba1c14a7cbb701f11ba6d092fd7c9f55f17 -size 814989 +oid sha256:587d707df3881ab349bc4656c275eaa394b11fb742f1718a4617778bf38771df +size 836620 diff --git a/changelog.d/2053.change b/changelog.d/2053.change new file mode 100644 index 000000000..a251f58d9 --- /dev/null +++ b/changelog.d/2053.change @@ -0,0 +1 @@ +Update the Welcome Screen to the latest designs. \ No newline at end of file