Design review for first public TestFlight (#492)

* 430 - Design review for first public TestFlight
This commit is contained in:
Gil Eluard
2023-01-26 16:32:39 +01:00
committed by GitHub
parent 413b433806
commit eeb69d1971
57 changed files with 5887 additions and 5169 deletions
@@ -18,16 +18,17 @@ import SwiftUI
/// An image that is styled for use as the screen icon in the onboarding flow.
struct AuthenticationIconImage: View {
let image: ImageAsset
let image: Image
var body: some View {
Image(image.name)
image
.resizable()
.renderingMode(.template)
.foregroundColor(.element.accent)
.frame(width: 90, height: 90)
.background(.white, in: Circle().inset(by: 2))
.foregroundColor(.element.secondaryContent)
.accessibilityHidden(true)
.padding(20)
.frame(width: 72, height: 72)
.background(RoundedRectangle(cornerRadius: 14).fill(Color.element.quinaryContent))
}
}
@@ -35,6 +36,6 @@ struct AuthenticationIconImage: View {
struct AuthenticationIconImage_Previews: PreviewProvider {
static var previews: some View {
AuthenticationIconImage(image: Asset.Images.serverSelectionIcon)
AuthenticationIconImage(image: Image(asset: Asset.Images.serverSelectionIcon))
}
}
@@ -197,13 +197,11 @@ final class LoginCoordinator: CoordinatorProtocol {
/// Presents the server selection screen as a modal.
private func presentServerSelectionScreen() {
let serverSelectionNavigationStackCoordinator = NavigationStackCoordinator()
let userNotificationController = UserNotificationController(rootCoordinator: serverSelectionNavigationStackCoordinator)
let userNotificationController = UserNotificationController(rootCoordinator: navigationStackCoordinator)
let parameters = ServerSelectionCoordinatorParameters(authenticationService: authenticationService,
userNotificationController: userNotificationController,
isModallyPresented: true)
isModallyPresented: false)
let coordinator = ServerSelectionCoordinator(parameters: parameters)
coordinator.callback = { [weak self, weak coordinator] action in
@@ -211,9 +209,7 @@ final class LoginCoordinator: CoordinatorProtocol {
self.serverSelectionCoordinator(coordinator, didCompleteWith: action)
}
serverSelectionNavigationStackCoordinator.setRootCoordinator(coordinator)
navigationStackCoordinator.setSheetCoordinator(userNotificationController)
navigationStackCoordinator.push(coordinator)
}
/// Handles the result from the server selection modal, dismissing it after updating the view.
@@ -223,7 +219,7 @@ final class LoginCoordinator: CoordinatorProtocol {
updateViewModel()
}
navigationStackCoordinator.setSheetCoordinator(nil)
navigationStackCoordinator.pop()
}
/// Shows the forgot password screen.
@@ -29,15 +29,10 @@ struct LoginScreen: View {
VStack(spacing: 0) {
header
.padding(.top, UIConstants.topPaddingToNavigationBar)
.padding(.bottom, 36)
.padding(.bottom, 32)
serverInfo
.padding(.leading, 12)
Rectangle()
.fill(Color.element.quinaryContent)
.frame(height: 1)
.padding(.vertical, 21)
.padding(.bottom, 32)
switch context.viewState.loginMode {
case .password:
@@ -59,7 +54,7 @@ struct LoginScreen: View {
/// The header containing a Welcome Back title.
var header: some View {
Text(ElementL10n.ftueAuthWelcomeBackTitle)
.font(.element.title2Bold)
.font(.element.title1Bold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
}
@@ -73,7 +68,13 @@ struct LoginScreen: View {
/// The form with text fields for username and password, along with a submit button.
var loginForm: some View {
VStack(spacing: 14) {
VStack(alignment: .leading, spacing: 0) {
Text(ElementL10n.ftueAuthSignInEnterDetails)
.font(.element.subheadline)
.foregroundColor(.element.primaryContent)
.padding(.horizontal, 16)
.padding(.bottom, 8)
TextField(ElementL10n.loginSigninUsernameHint, text: $context.username)
.focused($isUsernameFocused)
.textFieldStyle(.elementInput())
@@ -84,8 +85,7 @@ struct LoginScreen: View {
.onChange(of: isUsernameFocused, perform: usernameFocusChanged)
.onSubmit { isPasswordFocused = true }
.accessibilityIdentifier("usernameTextField")
Spacer().frame(height: 20)
.padding(.bottom, 20)
SecureField(ElementL10n.loginSignupPasswordHint, text: $context.password)
.focused($isPasswordFocused)
@@ -95,15 +95,18 @@ struct LoginScreen: View {
.onSubmit(submit)
.accessibilityIdentifier("passwordTextField")
Button { context.send(viewAction: .forgotPassword) } label: {
Text(ElementL10n.ftueAuthForgotPassword)
.font(.element.body)
}
.frame(maxWidth: .infinity, alignment: .trailing)
.padding(.bottom, 8)
// uncomment this piece of code once forgot password will be available
// Button { context.send(viewAction: .forgotPassword) } label: {
// Text(ElementL10n.ftueAuthForgotPassword)
// .font(.element.body)
// }
// .frame(maxWidth: .infinity, alignment: .trailing)
// .padding(.bottom, 8)
Spacer().frame(height: 32)
Button(action: submit) {
Text(ElementL10n.loginSignupSubmit)
Text(ElementL10n.loginContinue)
}
.buttonStyle(.elementAction(.xLarge))
.disabled(!context.viewState.canSubmit)
@@ -29,25 +29,36 @@ struct LoginServerInfoSection: View {
// MARK: - Views
var body: some View {
VStack(alignment: .leading, spacing: 4) {
VStack(alignment: .leading, spacing: 8) {
Text(ElementL10n.ftueAuthSignInChooseServerHeader)
.font(.element.subheadline)
.foregroundColor(.element.secondaryContent)
.foregroundColor(.element.primaryContent)
.padding(.horizontal, 16)
HStack {
Text(address)
.font(.element.body)
.foregroundColor(.element.primaryContent)
Spacer()
Button(action: editAction) {
Text(ElementL10n.edit)
.padding(.vertical, 2)
Button(action: editAction) {
HStack {
Text(address)
.font(.element.subheadlineBold)
.foregroundColor(.element.primaryContent)
.padding(.horizontal, 16)
.padding(.vertical)
Spacer()
Image(systemName: "chevron.right")
.foregroundColor(.element.tertiaryContent)
.padding(.trailing, 16)
}
.buttonStyle(.elementGhost())
.accessibilityIdentifier("editServerButton")
.background(RoundedRectangle(cornerRadius: 14).fill(Color.element.system))
}
.accessibilityIdentifier("editServerButton")
}
}
}
struct LoginServerInfoSection_Previews: PreviewProvider {
static var previews: some View {
LoginServerInfoSection(address: "matrix.org", editAction: { })
.padding()
}
}
@@ -38,7 +38,7 @@ struct ServerSelectionViewState: BindableState {
/// The title shown on the confirm button.
var buttonTitle: String {
isModallyPresented ? ElementL10n.actionConfirm : ElementL10n.actionNext
isModallyPresented ? ElementL10n.continue : ElementL10n.actionNext
}
/// The text field is showing an error.
@@ -40,7 +40,7 @@ struct ServerSelectionScreen: View {
/// The title, message and icon at the top of the screen.
var header: some View {
VStack(spacing: 8) {
AuthenticationIconImage(image: Asset.Images.serverSelectionIcon)
AuthenticationIconImage(image: Image(asset: Asset.Images.serverSelectionIcon))
.padding(.bottom, 8)
Text(ElementL10n.ftueAuthChooseServerTitle)
@@ -51,13 +51,14 @@ struct ServerSelectionScreen: View {
Text(ElementL10n.ftueAuthChooseServerSubtitle)
.font(.element.body)
.multilineTextAlignment(.center)
.foregroundColor(.element.secondaryContent)
.foregroundColor(.element.tertiaryContent)
}
.padding(.horizontal, 16)
}
/// The text field and confirm button where the user enters a server URL.
var serverForm: some View {
VStack(alignment: .leading, spacing: 12) {
VStack(alignment: .leading, spacing: 24) {
TextField(ElementL10n.ftueAuthChooseServerEntryHint, text: $context.homeserverAddress)
.textFieldStyle(.elementInput(labelText: ElementL10n.hsUrl,
footerText: context.viewState.footerMessage,
@@ -70,8 +71,6 @@ struct ServerSelectionScreen: View {
.onSubmit(submit)
.accessibilityIdentifier("addressTextField")
Divider()
TextField(ElementL10n.ftueAuthChooseServerEntryHint, text: $context.slidingSyncProxyAddress)
.textFieldStyle(.elementInput(labelText: "Sliding sync proxy URL"))
.keyboardType(.URL)
@@ -80,6 +79,7 @@ struct ServerSelectionScreen: View {
.submitLabel(.done)
.onSubmit(submit)
.accessibilityIdentifier("slidingSyncProxyAddressTextField")
.padding(.bottom, 8)
Button(action: submit) {
Text(context.viewState.buttonTitle)