From 7361490758534af31fa5a52c339eb36e2af0ca03 Mon Sep 17 00:00:00 2001 From: "roux g. buciu" <11182210+adudenamedruby@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:20:39 -0400 Subject: [PATCH] Refactor FXIOS-8979 [Onboarding Customization] Fix button layout for null second button (#19825) * Update rounded Button * Consolidate & simplify view * Minor nits --- .../Buttons/SecondaryRoundedButton.swift | 52 +++++-- .../SecondaryRoundedButtonViewModel.swift | 4 +- .../OnboardingCardViewController.swift | 127 +++++++++++++++++ .../OnboardingBasicCardViewController.swift | 127 +---------------- ...dingMultipleChoiceCardViewController.swift | 128 +----------------- 5 files changed, 180 insertions(+), 258 deletions(-) diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButton.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButton.swift index 48b8575a551b..878b7ca5d522 100644 --- a/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButton.swift +++ b/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButton.swift @@ -28,6 +28,8 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable { configuration = UIButton.Configuration.filled() titleLabel?.adjustsFontForContentSizeCategory = true + isUserInteractionEnabled = true + isAccessibilityElement = true } required init?(coder aDecoder: NSCoder) { @@ -35,16 +37,13 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable { } override public func updateConfiguration() { - guard var updatedConfiguration = configuration else { - return - } + guard var updatedConfiguration = configuration else { return } updatedConfiguration.background.backgroundColor = switch state { - case [.highlighted]: - highlightedBackgroundColor - default: - normalBackgroundColor + case [.highlighted]: highlightedBackgroundColor + default: normalBackgroundColor } + updatedConfiguration.baseForegroundColor = foregroundColor let transformer = UIConfigurationTextAttributesTransformer { [weak foregroundColor] incoming in @@ -60,9 +59,7 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable { } public func configure(viewModel: SecondaryRoundedButtonViewModel) { - guard var updatedConfiguration = configuration else { - return - } + guard var updatedConfiguration = configuration else { return } updatedConfiguration.contentInsets = UX.contentInsets updatedConfiguration.title = viewModel.title @@ -79,13 +76,38 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable { configuration = updatedConfiguration } - // MARK: ThemeApplicable + /// To keep alignment && spacing consistent between the buttons on pages, + /// we must make the secondary button invisible if there is no + /// secondary button in the configuration. + public func makeButtonInvisible() { + guard var updatedConfiguration = configuration else { return } - public func applyTheme(theme: Theme) { - highlightedBackgroundColor = theme.colors.actionSecondaryHover - normalBackgroundColor = theme.colors.actionSecondary - foregroundColor = theme.colors.textPrimary + isUserInteractionEnabled = false + isAccessibilityElement = false + normalBackgroundColor = .clear + highlightedBackgroundColor = .clear + foregroundColor = .clear + + // In order to have a proper height, the button needs some text. This + // is invisible, but something sensible is used as a placeholder. + updatedConfiguration.title = "Skip" + + configuration = updatedConfiguration setNeedsUpdateConfiguration() } + + // MARK: ThemeApplicable + + public func applyTheme(theme: Theme) { + if configuration?.title == nil || !isUserInteractionEnabled { + makeButtonInvisible() + } else { + highlightedBackgroundColor = theme.colors.actionSecondaryHover + normalBackgroundColor = theme.colors.actionSecondary + foregroundColor = theme.colors.textPrimary + + setNeedsUpdateConfiguration() + } + } } diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButtonViewModel.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButtonViewModel.swift index b4e718c06384..afd22e5acf88 100644 --- a/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButtonViewModel.swift +++ b/BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButtonViewModel.swift @@ -6,10 +6,10 @@ import Foundation /// The view model used to configure a `SecondaryRoundedButton` public struct SecondaryRoundedButtonViewModel { - public let title: String + public let title: String? public let a11yIdentifier: String - public init(title: String, a11yIdentifier: String) { + public init(title: String?, a11yIdentifier: String) { self.title = title self.a11yIdentifier = a11yIdentifier } diff --git a/firefox-ios/Client/Frontend/Onboarding/Protocols/OnboardingCardViewController.swift b/firefox-ios/Client/Frontend/Onboarding/Protocols/OnboardingCardViewController.swift index c218716a7b36..e8f2f9776ed0 100644 --- a/firefox-ios/Client/Frontend/Onboarding/Protocols/OnboardingCardViewController.swift +++ b/firefox-ios/Client/Frontend/Onboarding/Protocols/OnboardingCardViewController.swift @@ -4,10 +4,97 @@ import UIKit import Common +import ComponentLibrary class OnboardingCardViewController: UIViewController, Themeable { + // MARK: - Common UX Elements + struct SharedUX { + static let topStackViewSpacing: CGFloat = 24 + static let titleFontSize: CGFloat = UIDevice.current.userInterfaceIdiom == .pad ? 28 : 22 + static let descriptionFontSize: CGFloat = 17 + + // small device + static let smallTitleFontSize: CGFloat = 20 + static let smallStackViewSpacing: CGFloat = 8 + static let smallScrollViewVerticalPadding: CGFloat = 20 + } + let windowUUID: WindowUUID var currentWindowUUID: UUID? { windowUUID } + + // Adjusting layout for devices with height lower than 667 + // including now iPhone SE 2nd generation and iPad + var shouldUseSmallDeviceLayout: Bool { + return view.frame.height <= 667 || UIDevice.current.userInterfaceIdiom == .pad + } + + // Adjusting layout for tiny devices (iPhone SE 1st generation) + var shouldUseTinyDeviceLayout: Bool { + return UIDevice().isTinyFormFactor + } + + // MARK: - Common UI Elements + lazy var scrollView: UIScrollView = .build { view in + view.backgroundColor = .clear + } + + lazy var containerView: UIView = .build { view in + view.backgroundColor = .clear + } + + lazy var contentContainerView: UIView = .build { stack in + stack.backgroundColor = .clear + } + + lazy var topStackView: UIStackView = .build { stack in + stack.backgroundColor = .clear + stack.alignment = .center + stack.distribution = .fill + stack.spacing = SharedUX.topStackViewSpacing + stack.axis = .vertical + } + + lazy var contentStackView: UIStackView = .build { stack in + stack.backgroundColor = .clear + stack.alignment = .center + stack.distribution = .equalSpacing + stack.axis = .vertical + } + lazy var imageView: UIImageView = .build { imageView in + imageView.contentMode = .scaleAspectFit + imageView.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)ImageView" + } + + lazy var titleLabel: UILabel = .build { label in + label.numberOfLines = 0 + label.textAlignment = .center + let fontSize = self.shouldUseSmallDeviceLayout ? SharedUX.smallTitleFontSize : SharedUX.titleFontSize + label.font = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .largeTitle, + size: fontSize) + label.adjustsFontForContentSizeCategory = true + label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)TitleLabel" + label.accessibilityTraits.insert(.header) + } + + lazy var descriptionLabel: UILabel = .build { label in + label.numberOfLines = 0 + label.textAlignment = .center + label.font = DefaultDynamicFontHelper.preferredFont( + withTextStyle: .body, + size: SharedUX.descriptionFontSize + ) + label.adjustsFontForContentSizeCategory = true + label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)DescriptionLabel" + } + + lazy var primaryButton: PrimaryRoundedButton = .build { button in + button.addTarget(self, action: #selector(self.primaryAction), for: .touchUpInside) + } + + lazy var secondaryButton: SecondaryRoundedButton = .build { button in + button.addTarget(self, action: #selector(self.secondaryAction), for: .touchUpInside) + } + // MARK: - Themeable var themeManager: Common.ThemeManager var themeObserver: NSObjectProtocol? @@ -15,6 +102,7 @@ class OnboardingCardViewController: UIViewController, Themeable { var viewModel: OnboardingCardInfoModelProtocol + // MARK: - Initializers init( viewModel: OnboardingCardInfoModelProtocol, windowUUID: WindowUUID, @@ -33,5 +121,44 @@ class OnboardingCardViewController: UIViewController, Themeable { fatalError("init(coder:) has not been implemented") } + func currentTheme() -> Theme { + return themeManager.currentTheme(for: windowUUID) + } + + func updateLayout() { + titleLabel.text = viewModel.title + descriptionLabel.text = viewModel.body + imageView.image = viewModel.image + + setupPrimaryButton() + setupSecondaryButton() + } + + @objc + func primaryAction() { } + + @objc + func secondaryAction() { } + + func setupPrimaryButton() { + let buttonViewModel = PrimaryRoundedButtonViewModel( + title: viewModel.buttons.primary.title, + a11yIdentifier: "\(self.viewModel.a11yIdRoot)PrimaryButton" + ) + + primaryButton.configure(viewModel: buttonViewModel) + primaryButton.applyTheme(theme: themeManager.currentTheme(for: windowUUID)) + } + + func setupSecondaryButton() { + let buttonViewModel = SecondaryRoundedButtonViewModel( + title: viewModel.buttons.secondary?.title, + a11yIdentifier: "\(self.viewModel.a11yIdRoot)SecondaryButton" + ) + + secondaryButton.configure(viewModel: buttonViewModel) + secondaryButton.applyTheme(theme: currentTheme()) + } + func applyTheme() { } } diff --git a/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingBasicCardViewController.swift b/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingBasicCardViewController.swift index 980b6f8856ed..bb381a786fc8 100644 --- a/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingBasicCardViewController.swift +++ b/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingBasicCardViewController.swift @@ -12,7 +12,6 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { static let stackViewSpacingWithLink: CGFloat = 15 static let stackViewSpacingWithoutLink: CGFloat = 24 static let stackViewSpacingButtons: CGFloat = 16 - static let topStackViewSpacing: CGFloat = 24 static let topStackViewPaddingPad: CGFloat = 70 static let topStackViewPaddingPhone: CGFloat = 90 static let bottomStackViewPaddingPad: CGFloat = 32 @@ -20,15 +19,10 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { static let horizontalTopStackViewPaddingPad: CGFloat = 100 static let horizontalTopStackViewPaddingPhone: CGFloat = 24 static let scrollViewVerticalPadding: CGFloat = 62 - static let titleFontSize: CGFloat = UIDevice.current.userInterfaceIdiom == .pad ? 28 : 22 static let descriptionBoldFontSize: CGFloat = 20 - static let descriptionFontSize: CGFloat = 17 static let imageViewSize = CGSize(width: 240, height: 300) // small device - static let smallTitleFontSize: CGFloat = 20 - static let smallStackViewSpacing: CGFloat = 8 - static let smallScrollViewVerticalPadding: CGFloat = 20 static let smallImageViewSize = CGSize(width: 240, height: 280) static let smallTopStackViewPadding: CGFloat = 40 @@ -41,83 +35,12 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { // MARK: - Properties weak var delegate: OnboardingCardDelegate? - // Adjusting layout for devices with height lower than 667 - // including now iPhone SE 2nd generation and iPad - var shouldUseSmallDeviceLayout: Bool { - return view.frame.height <= 667 || UIDevice.current.userInterfaceIdiom == .pad - } - - // Adjusting layout for tiny devices (iPhone SE 1st generation) - var shouldUseTinyDeviceLayout: Bool { - return UIDevice().isTinyFormFactor - } - - private lazy var scrollView: UIScrollView = .build { view in - view.backgroundColor = .clear - } - - lazy var containerView: UIView = .build { view in - view.backgroundColor = .clear - } - - lazy var contentContainerView: UIView = .build { stack in - stack.backgroundColor = .clear - } - - lazy var topStackView: UIStackView = .build { stack in - stack.backgroundColor = .clear - stack.alignment = .center - stack.distribution = .fill - stack.spacing = UX.topStackViewSpacing - stack.axis = .vertical - } - - lazy var contentStackView: UIStackView = .build { stack in - stack.backgroundColor = .clear - stack.alignment = .center - stack.distribution = .equalSpacing - stack.axis = .vertical - } - - lazy var imageView: UIImageView = .build { imageView in - imageView.contentMode = .scaleAspectFit - imageView.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)ImageView" - } - - private lazy var titleLabel: UILabel = .build { label in - label.numberOfLines = 0 - label.textAlignment = .center - let fontSize = self.shouldUseSmallDeviceLayout ? UX.smallTitleFontSize : UX.titleFontSize - label.font = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .largeTitle, - size: fontSize) - label.adjustsFontForContentSizeCategory = true - label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)TitleLabel" - label.accessibilityTraits.insert(.header) - } - - private lazy var descriptionLabel: UILabel = .build { label in - label.numberOfLines = 0 - label.textAlignment = .center - label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body, - size: UX.descriptionFontSize) - label.adjustsFontForContentSizeCategory = true - label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)DescriptionLabel" - } - lazy var buttonStackView: UIStackView = .build { stack in stack.backgroundColor = .clear stack.distribution = .equalSpacing stack.axis = .vertical } - private lazy var primaryButton: PrimaryRoundedButton = .build { button in - button.addTarget(self, action: #selector(self.primaryAction), for: .touchUpInside) - } - - private lazy var secondaryButton: SecondaryRoundedButton = .build { button in - button.addTarget(self, action: #selector(self.secondaryAction), for: .touchUpInside) - } - private lazy var linkButton: LinkButton = .build { button in button.addTarget(self, action: #selector(self.linkButtonAction), for: .touchUpInside) } @@ -192,12 +115,12 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { topStackView.spacing = stackViewSpacing() buttonStackView.spacing = UX.stackViewSpacingButtons if traitCollection.horizontalSizeClass == .regular { - scrollViewVerticalPadding = UX.smallScrollViewVerticalPadding + scrollViewVerticalPadding = SharedUX.smallScrollViewVerticalPadding topPadding = UX.topStackViewPaddingPad horizontalTopStackViewPadding = UX.horizontalTopStackViewPaddingPad bottomStackViewPadding = -UX.bottomStackViewPaddingPad } else { - scrollViewVerticalPadding = UX.smallScrollViewVerticalPadding + scrollViewVerticalPadding = SharedUX.smallScrollViewVerticalPadding topPadding = UX.topStackViewPaddingPhone horizontalTopStackViewPadding = UX.horizontalTopStackViewPaddingPhone bottomStackViewPadding = -UX.bottomStackViewPaddingPhone @@ -206,9 +129,9 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { horizontalTopStackViewPadding = UX.horizontalTopStackViewPaddingPhone bottomStackViewPadding = -UX.bottomStackViewPaddingPhone if shouldUseSmallDeviceLayout { - topStackView.spacing = UX.smallStackViewSpacing - buttonStackView.spacing = UX.smallStackViewSpacing - scrollViewVerticalPadding = UX.smallScrollViewVerticalPadding + topStackView.spacing = SharedUX.smallStackViewSpacing + buttonStackView.spacing = SharedUX.smallStackViewSpacing + scrollViewVerticalPadding = SharedUX.smallScrollViewVerticalPadding topPadding = UX.smallTopStackViewPadding } else { topStackView.spacing = stackViewSpacing() @@ -310,42 +233,6 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { return UX.stackViewSpacingWithLink } - func currentTheme() -> Theme { - return themeManager.currentTheme(for: windowUUID) - } - - private func updateLayout() { - titleLabel.text = viewModel.title - descriptionLabel.text = viewModel.body - imageView.image = viewModel.image - - let buttonViewModel = PrimaryRoundedButtonViewModel( - title: viewModel.buttons.primary.title, - a11yIdentifier: "\(self.viewModel.a11yIdRoot)PrimaryButton" - ) - primaryButton.configure(viewModel: buttonViewModel) - primaryButton.applyTheme(theme: themeManager.currentTheme(for: windowUUID)) - - setupSecondaryButton() - } - - private func setupSecondaryButton() { - // To keep Title, Description aligned between cards we don't hide the button - // we clear the background and make disabled - guard let buttonTitle = viewModel.buttons.secondary?.title else { - secondaryButton.isUserInteractionEnabled = false - secondaryButton.backgroundColor = .clear - return - } - - let buttonViewModel = SecondaryRoundedButtonViewModel( - title: buttonTitle, - a11yIdentifier: "\(self.viewModel.a11yIdRoot)SecondaryButton" - ) - secondaryButton.configure(viewModel: buttonViewModel) - secondaryButton.applyTheme(theme: currentTheme()) - } - private func setupLinkButton() { guard let buttonTitle = viewModel.link?.title else { linkButton.isUserInteractionEnabled = false @@ -364,7 +251,7 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { // MARK: - Button Actions @objc - func primaryAction() { + override func primaryAction() { delegate?.handleBottomButtonActions( for: viewModel.buttons.primary.action, from: viewModel.name, @@ -372,7 +259,7 @@ class OnboardingBasicCardViewController: OnboardingCardViewController { } @objc - func secondaryAction() { + override func secondaryAction() { guard let buttonAction = viewModel.buttons.secondary?.action else { return } delegate?.handleBottomButtonActions( diff --git a/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingMultipleChoiceCardViewController.swift b/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingMultipleChoiceCardViewController.swift index a40d39096209..de161d939138 100644 --- a/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingMultipleChoiceCardViewController.swift +++ b/firefox-ios/Client/Frontend/Onboarding/Views/OnboardingMultipleChoiceCardViewController.swift @@ -11,7 +11,6 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { struct UX { static let stackViewSpacingWithoutLink: CGFloat = 5 static let stackViewSpacingButtons: CGFloat = 16 - static let topStackViewSpacing: CGFloat = 24 static let topStackViewPaddingPad: CGFloat = 70 static let topStackViewSpacingBetweenImageAndTitle: CGFloat = 15 static let topStackViewSpacingBetweenDescriptionAndButtons: CGFloat = 20 @@ -22,13 +21,7 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { static let horizontalTopStackViewPaddingPad: CGFloat = 100 static let horizontalTopStackViewPaddingPhone: CGFloat = 24 static let scrollViewVerticalPadding: CGFloat = 62 - static let titleFontSize: CGFloat = UIDevice.current.userInterfaceIdiom == .pad ? 28 : 22 - static let descriptionFontSize: CGFloat = 17 - // small device - static let smallTitleFontSize: CGFloat = 20 - static let smallStackViewSpacing: CGFloat = 8 - static let smallScrollViewVerticalPadding: CGFloat = 20 static let smallTopStackViewPadding: CGFloat = 40 static let baseImageHeight: CGFloat = 200 @@ -38,69 +31,6 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { weak var delegate: OnboardingCardDelegate? private var multipleChoiceButtons: [OnboardingMultipleChoiceButtonView] - // Adjusting layout for devices with height lower than 667 - // including now iPhone SE 2nd generation and iPad - var shouldUseSmallDeviceLayout: Bool { - return view.frame.height <= 667 || UIDevice.current.userInterfaceIdiom == .pad - } - - // Adjusting layout for tiny devices (iPhone SE 1st generation) - var shouldUseTinyDeviceLayout: Bool { - return UIDevice().isTinyFormFactor - } - - private lazy var scrollView: UIScrollView = .build { view in - view.backgroundColor = .clear - } - - lazy var containerView: UIView = .build { view in - view.backgroundColor = .clear - } - - lazy var contentContainerView: UIView = .build { stack in - stack.backgroundColor = .clear - } - - lazy var topStackView: UIStackView = .build { stack in - stack.backgroundColor = .clear - stack.alignment = .center - stack.distribution = .fill - stack.spacing = UX.topStackViewSpacing - stack.axis = .vertical - } - - lazy var contentStackView: UIStackView = .build { stack in - stack.backgroundColor = .clear - stack.alignment = .center - stack.distribution = .equalSpacing - stack.axis = .vertical - } - - lazy var imageView: UIImageView = .build { imageView in - imageView.contentMode = .scaleAspectFit - imageView.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)ImageView" - } - - private lazy var titleLabel: UILabel = .build { label in - label.numberOfLines = 0 - label.textAlignment = .center - let fontSize = self.shouldUseSmallDeviceLayout ? UX.smallTitleFontSize : UX.titleFontSize - label.font = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .largeTitle, - size: fontSize) - label.adjustsFontForContentSizeCategory = true - label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)TitleLabel" - label.accessibilityTraits.insert(.header) - } - - private lazy var descriptionLabel: UILabel = .build { label in - label.numberOfLines = 0 - label.textAlignment = .center - label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body, - size: UX.descriptionFontSize) - label.adjustsFontForContentSizeCategory = true - label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)DescriptionLabel" - } - lazy var choiceButtonStackView: UIStackView = .build { stack in stack.backgroundColor = .clear stack.distribution = .equalCentering @@ -114,14 +44,6 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { stack.axis = .vertical } - private lazy var primaryButton: PrimaryRoundedButton = .build { button in - button.addTarget(self, action: #selector(self.primaryAction), for: .touchUpInside) - } - - private lazy var secondaryButton: SecondaryRoundedButton = .build { button in - button.addTarget(self, action: #selector(self.secondaryAction), for: .touchUpInside) - } - // TODO: https://mozilla-hub.atlassian.net/browse/FXIOS-6816 // This should not be calculated using scaling coefficients, but with some // version based on constrains of some kind. The ticket above ensures this work @@ -199,12 +121,12 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { choiceButtonStackView.spacing = UX.stackViewSpacingWithoutLink bottomButtonStackView.spacing = UX.stackViewSpacingButtons if traitCollection.horizontalSizeClass == .regular { - scrollViewVerticalPadding = UX.smallScrollViewVerticalPadding + scrollViewVerticalPadding = SharedUX.smallScrollViewVerticalPadding topPadding = UX.topStackViewPaddingPad horizontalTopStackViewPadding = UX.horizontalTopStackViewPaddingPad bottomStackViewPadding = -UX.bottomStackViewPaddingPad } else { - scrollViewVerticalPadding = UX.smallScrollViewVerticalPadding + scrollViewVerticalPadding = SharedUX.smallScrollViewVerticalPadding topPadding = UX.topStackViewPaddingPhone horizontalTopStackViewPadding = UX.horizontalTopStackViewPaddingPhone bottomStackViewPadding = -UX.bottomStackViewPaddingPhone @@ -215,12 +137,12 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { if shouldUseSmallDeviceLayout { topStackView.setCustomSpacing(UX.topStackViewSpacingBetweenImageAndTitle, after: imageView) - topStackView.spacing = UX.smallStackViewSpacing + topStackView.spacing = SharedUX.smallStackViewSpacing topStackView.setCustomSpacing(UX.topStackViewSpacingBetweenDescriptionAndButtons, after: descriptionLabel) choiceButtonStackView.spacing = UX.stackViewSpacingWithoutLink - bottomButtonStackView.spacing = UX.smallStackViewSpacing - scrollViewVerticalPadding = UX.smallScrollViewVerticalPadding + bottomButtonStackView.spacing = SharedUX.smallStackViewSpacing + scrollViewVerticalPadding = SharedUX.smallScrollViewVerticalPadding topPadding = UX.smallTopStackViewPadding } else { topStackView.setCustomSpacing(UX.topStackViewSpacingBetweenImageAndTitle, @@ -338,45 +260,9 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { }) } - private func currentTheme() -> Theme { - return themeManager.currentTheme(for: windowUUID) - } - - private func updateLayout() { - titleLabel.text = viewModel.title - descriptionLabel.text = viewModel.body - imageView.image = viewModel.image - - let buttonViewModel = PrimaryRoundedButtonViewModel( - title: viewModel.buttons.primary.title, - a11yIdentifier: "\(self.viewModel.a11yIdRoot)PrimaryButton" - ) - primaryButton.configure(viewModel: buttonViewModel) - primaryButton.applyTheme(theme: currentTheme()) - - setupSecondaryButton() - } - - private func setupSecondaryButton() { - // To keep Title, Description aligned between cards we don't hide the button - // we clear the background and make disabled - guard let buttonTitle = viewModel.buttons.secondary?.title else { - secondaryButton.isUserInteractionEnabled = false - secondaryButton.backgroundColor = .clear - return - } - - let buttonViewModel = SecondaryRoundedButtonViewModel( - title: buttonTitle, - a11yIdentifier: "\(self.viewModel.a11yIdRoot)SecondaryButton" - ) - secondaryButton.configure(viewModel: buttonViewModel) - secondaryButton.applyTheme(theme: currentTheme()) - } - // MARK: - Button Actions @objc - func primaryAction() { + override func primaryAction() { delegate?.handleBottomButtonActions( for: viewModel.buttons.primary.action, from: viewModel.name, @@ -384,7 +270,7 @@ class OnboardingMultipleChoiceCardViewController: OnboardingCardViewController { } @objc - func secondaryAction() { + override func secondaryAction() { guard let buttonAction = viewModel.buttons.secondary?.action else { return } delegate?.handleBottomButtonActions(