mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-29 07:42:40 +00:00
Use readableFrame and OnboardingIconImage everywhere.
Fix order of accentColor modifier.
This commit is contained in:
parent
03e456d26e
commit
77c8bdeff5
8 changed files with 24 additions and 38 deletions
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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())
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue