Refactor FXIOS-7397 [v121] Replace RoundedButtons(s) in FirefoxAccoun…

…tSignInViewController (#17049) * 16394 Replace RoundedButtons(s) in FirefoxAccountSignInViewController * Update RustFxA/FirefoxAccountSignInViewController.swift Co-authored-by: lmarceau <[email protected]> * Update FirefoxAccountSignInViewController.swift calling scanButton.applyTheme(theme: theme) & emailButton.applyTheme(theme: theme) in viewWillAppear as requested * Update FirefoxAccountSignInViewController.swift removed button.titleLabel?.font , titleLabel?.adjustsFontForContentSizeCategory and contentPadding * Update FirefoxAccountSignInViewController.swift removing the scanButton & emailButton colors in applyTheme() * Update FirefoxAccountSignInViewController.swift Co-authored-by: lmarceau <[email protected]> * Update FirefoxAccountSignInViewController.swift Co-authored-by: lmarceau <[email protected]> * Fix build issue * Fix button configuration * Move setInsets(forContentPadding:, imageTitlePadding:) method from Client to BrowserKit * Add imageTitlePadding to PrimaryRoundedButton * Set image offset for button in FirefoxAccountSignInViewController --------- Co-authored-by: JOELPOG <[email protected]> Co-authored-by: JOELPOG <[email protected]> Co-authored-by: lmarceau <[email protected]>
mozilla-mobile · Nov 1, 2023 · 7c9fa90 · 7c9fa90
1 parent 377b4c7
commit 7c9fa90
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 40 deletions.
diff --git a/Client/Extensions/UIButton+Extensions.swift → ...Common/Extensions/UIButtonExtension.swift b/Client/Extensions/UIButton+Extensions.swift → ...Common/Extensions/UIButtonExtension.swift
@@ -5,8 +5,9 @@
 import UIKit
 
 extension UIButton {
-    func setInsets(forContentPadding contentPadding: UIEdgeInsets,
-                   imageTitlePadding: CGFloat) {
+    public func setInsets(
+        forContentPadding contentPadding: UIEdgeInsets,
+        imageTitlePadding: CGFloat) {
         let isLTR = effectiveUserInterfaceLayoutDirection == .leftToRight
 
         contentEdgeInsets = UIEdgeInsets(

diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButton.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButton.swift
@@ -11,6 +11,13 @@ public class PrimaryRoundedButton: ResizableButton, ThemeApplicable {
         static let buttonVerticalInset: CGFloat = 12
         static let buttonHorizontalInset: CGFloat = 16
         static let buttonFontSize: CGFloat = 16
+
+        static let contentEdgeInsets = UIEdgeInsets(
+            top: buttonVerticalInset,
+            left: buttonHorizontalInset,
+            bottom: buttonVerticalInset,
+            right: buttonHorizontalInset
+        )
     }
 
     private var highlightedTintColor: UIColor!
@@ -31,15 +38,15 @@ public class PrimaryRoundedButton: ResizableButton, ThemeApplicable {
         layer.cornerRadius = UX.buttonCornerRadius
         titleLabel?.textAlignment = .center
         titleLabel?.adjustsFontForContentSizeCategory = true
-        contentEdgeInsets = UIEdgeInsets(top: UX.buttonVerticalInset,
-                                         left: UX.buttonHorizontalInset,
-                                         bottom: UX.buttonVerticalInset,
-                                         right: UX.buttonHorizontalInset)
+        contentEdgeInsets = UX.contentEdgeInsets
     }
 
     public func configure(viewModel: PrimaryRoundedButtonViewModel) {
         accessibilityIdentifier = viewModel.a11yIdentifier
         setTitle(viewModel.title, for: .normal)
+
+        guard let imageTitlePadding = viewModel.imageTitlePadding else { return }
+        setInsets(forContentPadding: UX.contentEdgeInsets, imageTitlePadding: imageTitlePadding)
     }
 
     required init?(coder aDecoder: NSCoder) {

diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButtonViewModel.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButtonViewModel.swift
@@ -8,9 +8,11 @@ import Foundation
 public struct PrimaryRoundedButtonViewModel {
     public let title: String
     public let a11yIdentifier: String
+    public let imageTitlePadding: Double?
 
-    public init(title: String, a11yIdentifier: String) {
+    public init(title: String, a11yIdentifier: String, imageTitlePadding: Double? = nil) {
         self.title = title
         self.a11yIdentifier = a11yIdentifier
+        self.imageTitlePadding = imageTitlePadding
     }
 }
diff --git a/Client.xcodeproj/project.pbxproj b/Client.xcodeproj/project.pbxproj
@@ -451,7 +451,6 @@
 		5A87148C292EA1640039A5BD /* Fuzi in Frameworks */ = {isa = PBXBuildFile; productRef = 5A87148B292EA1640039A5BD /* Fuzi */; };
 		5A87148E292EA3270039A5BD /* Fuzi in Frameworks */ = {isa = PBXBuildFile; productRef = 5A87148D292EA3270039A5BD /* Fuzi */; };
 		5A871490292EA3910039A5BD /* SiteImageView in Frameworks */ = {isa = PBXBuildFile; productRef = 5A87148F292EA3910039A5BD /* SiteImageView */; };
-		5A8E7B6F29B8E5E500BF060F /* UIButton+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5A8E7B6E29B8E5E500BF060F /* UIButton+Extensions.swift */; };
 		5A8FD0EC293A7D5E00333AA7 /* SnapKit in Frameworks */ = {isa = PBXBuildFile; productRef = 5A8FD0EB293A7D5E00333AA7 /* SnapKit */; };
 		5A8FD0EE293A7D6D00333AA7 /* SnapKit in Frameworks */ = {isa = PBXBuildFile; productRef = 5A8FD0ED293A7D6D00333AA7 /* SnapKit */; };
 		5A8FD0F2293A7D9000333AA7 /* SnapKit in Frameworks */ = {isa = PBXBuildFile; productRef = 5A8FD0F1293A7D9000333AA7 /* SnapKit */; };
@@ -4566,7 +4565,6 @@
 		5A70EF20295E3E0B00790249 /* UnitTestSceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UnitTestSceneDelegate.swift; sourceTree = "<group>"; };
 		5A8017DF29CE15D90047120D /* TabManagerImplementation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabManagerImplementation.swift; sourceTree = "<group>"; };
 		5A81C5DC2A4C981A00BE88C2 /* PasswordManagerCoordinatorTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PasswordManagerCoordinatorTests.swift; sourceTree = "<group>"; };
-		5A8E7B6E29B8E5E500BF060F /* UIButton+Extensions.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "UIButton+Extensions.swift"; sourceTree = "<group>"; };
 		5A9A09D128AFD51900B6F51E /* MockHomepageDataModelDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockHomepageDataModelDelegate.swift; sourceTree = "<group>"; };
 		5A9A09D328B01D8700B6F51E /* MockTelemetryWrapper.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockTelemetryWrapper.swift; sourceTree = "<group>"; };
 		5A9A09D528B01FD500B6F51E /* MockURLBarView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockURLBarView.swift; sourceTree = "<group>"; };
@@ -7610,7 +7608,6 @@
 				E1442FC1294782C2003680B0 /* NSAttributedString+Extension.swift */,
 				E1A6AB4528CA6A4C00EBEBDD /* String+Extension.swift */,
 				E1442FC5294782D7003680B0 /* UIAlertController+Extension.swift */,
-				5A8E7B6E29B8E5E500BF060F /* UIButton+Extensions.swift */,
 				E12BD0AB28AC37F00029AAF0 /* UIColor+Extension.swift */,
 				8A395551299AF83300B2AFBB /* UIControl+Extension.swift */,
 				E18EA56E28AD3279003F97FC /* UIDevice+Extension.swift */,
@@ -13015,7 +13012,6 @@
 				437A857827E43FE100E42764 /* FxAWebViewTelemetry.swift in Sources */,
 				E13E9AB42AAB0FB5001A0E9D /* FakespotCoordinator.swift in Sources */,
 				E1442FD1294782D9003680B0 /* UIModalPresentationStyle+Photon.swift in Sources */,
-				5A8E7B6F29B8E5E500BF060F /* UIButton+Extensions.swift in Sources */,
 				5A32C2B62AD8517200A9B5A4 /* MetricKitWrapper.swift in Sources */,
 				D3FEC38D1AC4B42F00494F45 /* AutocompleteTextField.swift in Sources */,
 				8A19ACAE2A329058001C2147 /* PasswordManagerSetting.swift in Sources */,

diff --git a/RustFxA/FirefoxAccountSignInViewController.swift b/RustFxA/FirefoxAccountSignInViewController.swift
@@ -96,36 +96,24 @@ class FirefoxAccountSignInViewController: UIViewController, Themeable {
         }
     }
 
-    private lazy var scanButton: ResizableButton = .build { button in
-        button.layer.cornerRadius = UX.buttonCornerRadius
+    private lazy var scanButton: PrimaryRoundedButton = .build { button in
+        let viewModel = PrimaryRoundedButtonViewModel(
+            title: .FxASignin_QRScanSignin,
+            a11yIdentifier: AccessibilityIdentifiers.Settings.FirefoxAccount.qrButton,
+            imageTitlePadding: UX.buttonHorizontalInset
+        )
+        button.configure(viewModel: viewModel)
         button.setImage(self.signinSyncQRImage?.tinted(withColor: .white), for: .highlighted)
-        button.setTitle(.FxASignin_QRScanSignin, for: .normal)
-        button.accessibilityIdentifier = AccessibilityIdentifiers.Settings.FirefoxAccount.qrButton
-        button.titleLabel?.font = DefaultDynamicFontHelper.preferredBoldFont(
-            withTextStyle: .callout,
-            size: UX.buttonFontSize)
-
-        let contentPadding = UIEdgeInsets(top: UX.buttonVerticalInset,
-                                          left: UX.buttonHorizontalInset,
-                                          bottom: UX.buttonVerticalInset,
-                                          right: UX.buttonHorizontalInset)
-        button.setInsets(forContentPadding: contentPadding, imageTitlePadding: UX.buttonHorizontalInset)
         button.addTarget(self, action: #selector(self.scanbuttonTapped), for: .touchUpInside)
     }
 
-    private lazy var emailButton: ResizableButton = .build { button in
-        button.layer.cornerRadius = UX.buttonCornerRadius
-        button.setTitle(.FxASignin_EmailSignin, for: .normal)
-        button.accessibilityIdentifier = AccessibilityIdentifiers.Settings.FirefoxAccount.fxaSignInButton
+    private lazy var emailButton: SecondaryRoundedButton = .build { button in
+        let viewModel = SecondaryRoundedButtonViewModel(
+            title: .FxASignin_EmailSignin,
+            a11yIdentifier: AccessibilityIdentifiers.Settings.FirefoxAccount.fxaSignInButton
+        )
+        button.configure(viewModel: viewModel)
         button.addTarget(self, action: #selector(self.emailLoginTapped), for: .touchUpInside)
-        button.titleLabel?.adjustsFontForContentSizeCategory = true
-        button.titleLabel?.font = DefaultDynamicFontHelper.preferredBoldFont(
-            withTextStyle: .callout,
-            size: UX.buttonFontSize)
-        button.contentEdgeInsets = UIEdgeInsets(top: UX.buttonVerticalInset,
-                                                left: UX.buttonHorizontalInset,
-                                                bottom: UX.buttonVerticalInset,
-                                                right: UX.buttonHorizontalInset)
     }
 
     // MARK: - Inits
@@ -242,12 +230,12 @@ class FirefoxAccountSignInViewController: UIViewController, Themeable {
         view.backgroundColor = colors.layer1
         qrSignInLabel.textColor = colors.textPrimary
         instructionsLabel.textColor = colors.textPrimary
-        scanButton.backgroundColor = colors.actionPrimary
-        scanButton.setTitleColor(colors.textInverted, for: .normal)
+
+        let theme = themeManager.currentTheme
+        scanButton.applyTheme(theme: theme)
+        emailButton.applyTheme(theme: theme)
         scanButton.setImage(signinSyncQRImage?
             .tinted(withColor: colors.textInverted), for: .normal)
-        emailButton.backgroundColor = colors.actionSecondary
-        emailButton.setTitleColor(colors.textSecondaryAction, for: .normal)
     }
 
     // MARK: Button Tap Functions