Merge pull request #7995 from woocommerce/feat/7891-design-polishes

jaclync · web-flow · commit e99b66b77e68 · 2022-11-02T12:29:09.000+08:00
Account creation: design polishes - fonts, ToS link, text field focus styles
diff --git a/WooCommerce/Classes/ViewRelated/Authentication/AccountCreationForm.swift b/WooCommerce/Classes/ViewRelated/Authentication/AccountCreationForm.swift
@@ -35,7 +35,10 @@ final class AccountCreationFormHostingController: UIHostingController<AccountCre
 
 /// A form that allows the user to create a WPCOM account with an email and password.
 struct AccountCreationForm: View {
-    @Environment(\.customOpenURL) var customOpenURL
+    private enum Field: Hashable {
+        case email
+        case password
+    }
 
     /// Triggered when the account is created and the app is authenticated.
     var completion: (() -> Void) = {}
@@ -46,6 +49,9 @@ struct AccountCreationForm: View {
     @ObservedObject private var viewModel: AccountCreationFormViewModel
 
     @State private var isPerformingTask = false
+    @State private var tosURL: URL?
+
+    @FocusState private var focusedField: Field?
 
     init(viewModel: AccountCreationFormViewModel) {
         self.viewModel = viewModel
@@ -82,22 +88,35 @@ struct AccountCreationForm: View {
 
                 // Form fields.
                 VStack(spacing: Layout.verticalSpacingBetweenFields) {
+                    // Email field.
                     AccountCreationFormFieldView(viewModel: .init(header: Localization.emailFieldTitle,
                                                                   placeholder: Localization.emailFieldPlaceholder,
                                                                   keyboardType: .emailAddress,
                                                                   text: $viewModel.email,
                                                                   isSecure: false,
-                                                                  errorMessage: viewModel.emailErrorMessage))
+                                                                  errorMessage: viewModel.emailErrorMessage,
+                                                                  isFocused: focusedField == .email))
+                    .focused($focusedField, equals: .email)
                     .disabled(isPerformingTask)
+
+                    // Password field.
                     AccountCreationFormFieldView(viewModel: .init(header: Localization.passwordFieldTitle,
                                                                   placeholder: Localization.passwordFieldPlaceholder,
                                                                   keyboardType: .default,
                                                                   text: $viewModel.password,
                                                                   isSecure: true,
-                                                                  errorMessage: viewModel.passwordErrorMessage))
+                                                                  errorMessage: viewModel.passwordErrorMessage,
+                                                                  isFocused: focusedField == .password))
+                    .focused($focusedField, equals: .password)
                     .disabled(isPerformingTask)
+
+                    // Terms of Service link.
                     AttributedText(tosAttributedText)
                         .attributedTextLinkColor(Color(.textLink))
+                        .environment(\.customOpenURL) { url in
+                            tosURL = url
+                        }
+                        .safariSheet(url: $tosURL)
                 }
 
                 // CTA to submit the form.
diff --git a/WooCommerce/Classes/ViewRelated/Authentication/AccountCreationFormFieldView.swift b/WooCommerce/Classes/ViewRelated/Authentication/AccountCreationFormFieldView.swift
@@ -14,6 +14,8 @@ struct AccountCreationFormFieldViewModel {
     let isSecure: Bool
     /// Optional error message shown below the text field.
     let errorMessage: String?
+    /// Whether the content in the text field is focused.
+    let isFocused: Bool
 }
 
 /// A field in the account creation form. Currently, there are two fields - email and password.
@@ -27,14 +29,14 @@ struct AccountCreationFormFieldView: View {
     var body: some View {
         VStack(alignment: .leading, spacing: Layout.verticalSpacing) {
             Text(viewModel.header)
-                .bodyStyle()
+                .subheadlineStyle()
             if viewModel.isSecure {
                 SecureField(viewModel.placeholder, text: viewModel.text)
-                    .textFieldStyle(.roundedBorder)
+                    .textFieldStyle(RoundedBorderTextFieldStyle(focused: viewModel.isFocused))
                     .keyboardType(viewModel.keyboardType)
             } else {
                 TextField(viewModel.placeholder, text: viewModel.text)
-                    .textFieldStyle(.roundedBorder)
+                    .textFieldStyle(RoundedBorderTextFieldStyle(focused: viewModel.isFocused))
                     .keyboardType(viewModel.keyboardType)
             }
             if let errorMessage = viewModel.errorMessage {
@@ -58,12 +60,14 @@ struct AccountCreationFormField_Previews: PreviewProvider {
                                                       keyboardType: .emailAddress,
                                                       text: .constant(""),
                                                       isSecure: false,
-                                                      errorMessage: nil))
+                                                      errorMessage: nil,
+                                                      isFocused: true))
         AccountCreationFormFieldView(viewModel: .init(header: "Choose a password",
                                                       placeholder: "Password",
                                                       keyboardType: .default,
                                                       text: .constant("w"),
                                                       isSecure: true,
-                                                      errorMessage: "Too simple"))
+                                                      errorMessage: "Too simple",
+                                                      isFocused: false))
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TextFieldStyles.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TextFieldStyles.swift
@@ -0,0 +1,49 @@
+import SwiftUI
+
+/// Text field has a rounded border that has a thicker border and brighter border color when the field is focused.
+struct RoundedBorderTextFieldStyle: TextFieldStyle {
+    private let focused: Bool
+    private let focusedBorderColor: Color
+    private let unfocusedBorderColor: Color
+
+    init(focused: Bool,
+         focusedBorderColor: Color = Defaults.focusedBorderColor,
+         unfocusedBorderColor: Color = Defaults.unfocusedBorderColor) {
+        self.focused = focused
+        self.focusedBorderColor = focusedBorderColor
+        self.unfocusedBorderColor = unfocusedBorderColor
+    }
+
+    func _body(configuration: TextField<Self._Label>) -> some View {
+        configuration
+            .padding(10)
+            .background(
+                RoundedRectangle(cornerRadius: 8, style: .continuous)
+                    .stroke(focused ? focusedBorderColor: unfocusedBorderColor,
+                            lineWidth: focused ? 2: 1)
+            )
+    }
+}
+
+extension RoundedBorderTextFieldStyle {
+    enum Defaults {
+        static let focusedBorderColor: Color = .init(uiColor: .brand)
+        static let unfocusedBorderColor: Color = .gray
+    }
+}
+
+struct TextFieldStyles_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack {
+            TextField("placeholder", text: .constant("focused"))
+                .textFieldStyle(RoundedBorderTextFieldStyle(focused: true))
+            TextField("placeholder", text: .constant("unfocused"))
+                .textFieldStyle(RoundedBorderTextFieldStyle(focused: false))
+            TextField("placeholder", text: .constant("focused with a different color"))
+                .textFieldStyle(RoundedBorderTextFieldStyle(focused: true, focusedBorderColor: .orange))
+            TextField("placeholder", text: .constant("unfocused with a different color"))
+                .textFieldStyle(RoundedBorderTextFieldStyle(focused: false, unfocusedBorderColor: .cyan))
+        }
+        .preferredColorScheme(.dark)
+    }
+}
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -414,6 +414,7 @@
 		02EA6BFA2435E92600FFF90A /* KingfisherImageDownloader+ImageDownloadable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02EA6BF92435E92600FFF90A /* KingfisherImageDownloader+ImageDownloadable.swift */; };
 		02EA6BFC2435EC3500FFF90A /* MockImageDownloader.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02EA6BFB2435EC3500FFF90A /* MockImageDownloader.swift */; };
 		02EAA4C8290F992B00918DAB /* LoggedOutStoreCreationCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02EAA4C7290F992B00918DAB /* LoggedOutStoreCreationCoordinator.swift */; };
+		02EAA4CA2911004B00918DAB /* TextFieldStyles.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02EAA4C92911004B00918DAB /* TextFieldStyles.swift */; };
 		02ECD1DF24FF48D000735BE5 /* PaginationTracker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02ECD1DE24FF48D000735BE5 /* PaginationTracker.swift */; };
 		02ECD1E124FF496200735BE5 /* PaginationTrackerTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02ECD1E024FF496200735BE5 /* PaginationTrackerTests.swift */; };
 		02ECD1E424FF5E0B00735BE5 /* AddProductCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02ECD1E324FF5E0B00735BE5 /* AddProductCoordinator.swift */; };
@@ -2357,6 +2358,7 @@
 		02EA6BF92435E92600FFF90A /* KingfisherImageDownloader+ImageDownloadable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "KingfisherImageDownloader+ImageDownloadable.swift"; sourceTree = "<group>"; };
 		02EA6BFB2435EC3500FFF90A /* MockImageDownloader.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockImageDownloader.swift; sourceTree = "<group>"; };
 		02EAA4C7290F992B00918DAB /* LoggedOutStoreCreationCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoggedOutStoreCreationCoordinator.swift; sourceTree = "<group>"; };
+		02EAA4C92911004B00918DAB /* TextFieldStyles.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextFieldStyles.swift; sourceTree = "<group>"; };
 		02ECD1DE24FF48D000735BE5 /* PaginationTracker.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationTracker.swift; sourceTree = "<group>"; };
 		02ECD1E024FF496200735BE5 /* PaginationTrackerTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationTrackerTests.swift; sourceTree = "<group>"; };
 		02ECD1E324FF5E0B00735BE5 /* AddProductCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddProductCoordinator.swift; sourceTree = "<group>"; };
@@ -5962,6 +5964,7 @@
 				03076D39290C22BE008EE839 /* WebView.swift */,
 				03076D35290C162E008EE839 /* WebViewSheet.swift */,
 				03076D37290C223D008EE839 /* WooNavigationSheet.swift */,
+				02EAA4C92911004B00918DAB /* TextFieldStyles.swift */,
 			);
 			path = "SwiftUI Components";
 			sourceTree = "<group>";
@@ -10321,6 +10324,7 @@
 				AE6C4FDF28A15BFE00EAC00D /* FeatureAnnouncementCardCell.swift in Sources */,
 				CE5F462723AAC8C0006B1A5C /* RefundDetailsViewModel.swift in Sources */,
 				D8815B132638686200EDAD62 /* CardPresentModalError.swift in Sources */,
+				02EAA4CA2911004B00918DAB /* TextFieldStyles.swift in Sources */,
 				453DBF8E2387F34A006762A5 /* UICollectionViewCell+Helpers.swift in Sources */,
 				45B9C63E23A8E50D007FC4C5 /* ProductPriceSettingsViewController.swift in Sources */,
 				318853362639FC9C00F66A9C /* CardReaderSettingsPresentingViewController.swift in Sources */,
