Use readableFrame and OnboardingIconImage everywhere.

Fix order of accentColor modifier.
This commit is contained in:
Doug 2022-05-10 15:30:03 +01:00 committed by Doug
parent 03e456d26e
commit 77c8bdeff5
8 changed files with 24 additions and 38 deletions

View file

@ -60,6 +60,7 @@ struct AnalyticsPrompt: View {
AnalyticsPromptCheckmarkItem(string: VectorL10n.analyticsPromptPoint3) AnalyticsPromptCheckmarkItem(string: VectorL10n.analyticsPromptPoint3)
} }
.fixedSize(horizontal: false, vertical: true)
.font(theme.fonts.body) .font(theme.fonts.body)
.frame(maxWidth: .infinity) .frame(maxWidth: .infinity)
} }
@ -118,14 +119,13 @@ struct AnalyticsPrompt: View {
.frame(height: OnboardingMetrics.spacerHeight(in: geometry)) .frame(height: OnboardingMetrics.spacerHeight(in: geometry))
mainContent mainContent
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.horizontal, horizontalPadding) .padding(.horizontal, horizontalPadding)
.padding(.top, OnboardingMetrics.breakerScreenTopPadding) .padding(.top, OnboardingMetrics.breakerScreenTopPadding)
} }
.frame(maxWidth: .infinity)
buttons buttons
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.horizontal, horizontalPadding) .padding(.horizontal, horizontalPadding)
.padding(.bottom, OnboardingMetrics.actionButtonBottomPadding) .padding(.bottom, OnboardingMetrics.actionButtonBottomPadding)
.padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16) .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)

View file

@ -59,8 +59,7 @@ struct AuthenticationRegistrationScreen: View {
} }
} }
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.frame(maxWidth: .infinity)
.padding(.horizontal, 16) .padding(.horizontal, 16)
.padding(.bottom, 16) .padding(.bottom, 16)
} }
@ -72,14 +71,8 @@ struct AuthenticationRegistrationScreen: View {
/// The header containing the icon, title and message. /// The header containing the icon, title and message.
var header: some View { var header: some View {
VStack(spacing: 8) { VStack(spacing: 8) {
Image(Asset.Images.onboardingCongratulationsIcon.name) OnboardingIconImage(image: Asset.Images.onboardingCongratulationsIcon)
.resizable()
.renderingMode(.template)
.foregroundColor(theme.colors.accent)
.frame(width: 90, height: 90)
.background(Circle().foregroundColor(.white).padding(2))
.padding(.bottom, 8) .padding(.bottom, 8)
.accessibilityHidden(true)
Text(VectorL10n.authenticationRegistrationTitle) Text(VectorL10n.authenticationRegistrationTitle)
.font(theme.fonts.title2B) .font(theme.fonts.title2B)

View file

@ -53,8 +53,8 @@ struct AuthenticationServerSelectionScreen: View {
emsBanner emsBanner
.padding(.vertical, 16) .padding(.vertical, 16)
} }
.frame(maxWidth: OnboardingMetrics.maxContentWidth, minHeight: geometry.size.height) .readableFrame()
.frame(maxWidth: .infinity) .frame(minHeight: geometry.size.height)
.padding(.horizontal, 16) .padding(.horizontal, 16)
.onAppear { scrollView = reader } .onAppear { scrollView = reader }
} }
@ -70,14 +70,8 @@ struct AuthenticationServerSelectionScreen: View {
/// The title, message and icon at the top of the screen. /// The title, message and icon at the top of the screen.
var header: some View { var header: some View {
VStack(spacing: 8) { VStack(spacing: 8) {
Image(Asset.Images.authenticationServerSelectionIcon.name) OnboardingIconImage(image: Asset.Images.authenticationServerSelectionIcon)
.resizable()
.renderingMode(.template)
.foregroundColor(theme.colors.accent)
.frame(width: 90, height: 90)
.background(Circle().foregroundColor(.white).padding(4))
.padding(.bottom, 8) .padding(.bottom, 8)
.accessibilityHidden(true)
Text(VectorL10n.authenticationServerSelectionTitle) Text(VectorL10n.authenticationServerSelectionTitle)
.font(theme.fonts.title2B) .font(theme.fonts.title2B)

View file

@ -43,14 +43,14 @@ struct OnboardingAvatarScreen: View {
buttons buttons
} }
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.horizontal) .padding(.horizontal)
.padding(.top, OnboardingMetrics.topPaddingToNavigationBar) .padding(.top, OnboardingMetrics.topPaddingToNavigationBar)
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxHeight: .infinity)
.accentColor(theme.colors.accent)
.background(theme.colors.background.ignoresSafeArea()) .background(theme.colors.background.ignoresSafeArea())
.alert(item: $viewModel.alertInfo) { $0.alert } .alert(item: $viewModel.alertInfo) { $0.alert }
.accentColor(theme.colors.accent)
} }

View file

@ -39,19 +39,18 @@ struct OnboardingCelebrationScreen: View {
var body: some View { var body: some View {
GeometryReader { geometry in GeometryReader { geometry in
VStack { VStack {
ScrollView(showsIndicators: false) { ScrollView {
Spacer() Spacer()
.frame(height: OnboardingMetrics.spacerHeight(in: geometry)) .frame(height: OnboardingMetrics.spacerHeight(in: geometry))
mainContent mainContent
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.top, OnboardingMetrics.breakerScreenTopPadding) .padding(.top, OnboardingMetrics.breakerScreenTopPadding)
.padding(.horizontal, horizontalPadding) .padding(.horizontal, horizontalPadding)
} }
.frame(maxWidth: .infinity)
buttons buttons
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.horizontal, horizontalPadding) .padding(.horizontal, horizontalPadding)
.padding(.bottom, OnboardingMetrics.actionButtonBottomPadding) .padding(.bottom, OnboardingMetrics.actionButtonBottomPadding)
.padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16) .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
@ -59,7 +58,7 @@ struct OnboardingCelebrationScreen: View {
Spacer() Spacer()
.frame(height: OnboardingMetrics.spacerHeight(in: geometry)) .frame(height: OnboardingMetrics.spacerHeight(in: geometry))
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxHeight: .infinity)
} }
.overlay(effects.ignoresSafeArea()) .overlay(effects.ignoresSafeArea())
.background(theme.colors.background.ignoresSafeArea()) .background(theme.colors.background.ignoresSafeArea())

View file

@ -43,14 +43,13 @@ struct OnboardingCongratulationsScreen: View {
.frame(height: OnboardingMetrics.spacerHeight(in: geometry)) .frame(height: OnboardingMetrics.spacerHeight(in: geometry))
mainContent mainContent
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.top, OnboardingMetrics.breakerScreenTopPadding) .padding(.top, OnboardingMetrics.breakerScreenTopPadding)
.padding(.horizontal, horizontalPadding) .padding(.horizontal, horizontalPadding)
} }
.frame(maxWidth: .infinity)
footer footer
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.horizontal, horizontalPadding) .padding(.horizontal, horizontalPadding)
.padding(.bottom, OnboardingMetrics.actionButtonBottomPadding) .padding(.bottom, OnboardingMetrics.actionButtonBottomPadding)
.padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16) .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
@ -62,9 +61,9 @@ struct OnboardingCongratulationsScreen: View {
} }
.overlay(effects.ignoresSafeArea()) .overlay(effects.ignoresSafeArea())
.background(theme.colors.accent.ignoresSafeArea()) .background(theme.colors.accent.ignoresSafeArea())
.accentColor(.white)
.navigationBarHidden(true) .navigationBarHidden(true)
.preferredColorScheme(.dark) // make the status bar white .preferredColorScheme(.dark) // make the status bar white
.accentColor(.white)
} }
/// The main content of the view to be shown in a scroll view. /// The main content of the view to be shown in a scroll view.

View file

@ -48,14 +48,14 @@ struct OnboardingDisplayNameScreen: View {
buttons buttons
} }
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.horizontal) .padding(.horizontal)
.padding(.top, OnboardingMetrics.topPaddingToNavigationBar) .padding(.top, OnboardingMetrics.topPaddingToNavigationBar)
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxHeight: .infinity)
.accentColor(theme.colors.accent)
.background(theme.colors.background.ignoresSafeArea()) .background(theme.colors.background.ignoresSafeArea())
.alert(item: $viewModel.alertInfo) { $0.alert } .alert(item: $viewModel.alertInfo) { $0.alert }
.accentColor(theme.colors.accent)
.onChange(of: viewModel.displayName) { _ in .onChange(of: viewModel.displayName) { _ in
viewModel.send(viewAction: .validateDisplayName) viewModel.send(viewAction: .validateDisplayName)
} }

View file

@ -102,12 +102,11 @@ struct OnboardingUseCaseSelectionScreen: View {
useCaseButtons useCaseButtons
} }
.frame(maxWidth: OnboardingMetrics.maxContentWidth) .readableFrame()
.padding(.top, OnboardingMetrics.topPaddingToNavigationBar) .padding(.top, OnboardingMetrics.topPaddingToNavigationBar)
.padding(.bottom, 8) .padding(.bottom, 8)
.padding(.horizontal, 16) .padding(.horizontal, 16)
} }
.frame(maxWidth: .infinity)
serverFooter serverFooter
.padding(.horizontal, 16) .padding(.horizontal, 16)
@ -128,7 +127,9 @@ struct OnboardingUseCase_Previews: PreviewProvider {
static var previews: some View { static var previews: some View {
stateRenderer.screenGroup(addNavigation: true) stateRenderer.screenGroup(addNavigation: true)
.theme(.light).preferredColorScheme(.light) .theme(.light).preferredColorScheme(.light)
.navigationViewStyle(.stack)
stateRenderer.screenGroup(addNavigation: true) stateRenderer.screenGroup(addNavigation: true)
.theme(.dark).preferredColorScheme(.dark) .theme(.dark).preferredColorScheme(.dark)
.navigationViewStyle(.stack)
} }
} }