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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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