Final tweaks to the existing QR code screens to match the designs. (#4874)

* Simplify QR errors even more and use the correct error state for deviceAlreadySignedIn. * Remove the pre-defined padding on TitleAndIcon and use it in the QRCodeLoginScreen too. * Update FullscreenDialog to allow different horizontal padding in each section.
2026-11-05 11:58:32 +00:00 · 2025-12-17 17:23:55 +00:00
parent 117185de87
commit 1a62f2cca6
94 changed files with 325 additions and 362 deletions
@@ -176,7 +176,6 @@
 "common_advanced_settings" = "Advanced settings";
 "common_an_image" = "an image";
 "common_analytics" = "Analytics";
 "common_android_shortcuts_remove_reason_left_room" = "You left the room";
 "common_android_shortcuts_remove_reason_session_logged_out" = "You were logged out of the session";
 "common_appearance" = "Appearance";
 "common_audio" = "Audio";
@@ -589,32 +588,21 @@
 "screen_leave_space_subtitle_only_last_admin" = "You will not be removed from the following room(s) because you're the only administrator:";
 "screen_leave_space_title" = "Leave %1$@?";
 "screen_leave_space_title_last_admin" = "You are the only admin for %1$@";
 "screen_link_new_device_desktop_scanning_title" = "Scan the QR code";
 "screen_link_new_device_desktop_step1" = "Open %1$@ on a laptop or desktop computer";
 "screen_link_new_device_desktop_step3" = "Scan the QR code with this device";
 "screen_link_new_device_desktop_submit" = "Ready to scan";
 "screen_link_new_device_desktop_title" = "Open %1$@ on a desktop computer to get the QR code";
 "screen_link_new_device_enter_number_error_numbers_do_not_match" = "The numbers don’t match";
 "screen_link_new_device_enter_number_notice" = "Enter 2-digit code";
 "screen_link_new_device_enter_number_subtitle" = "This will verify that the connection to your other device is secure.";
 "screen_link_new_device_enter_number_title" = "Enter the number shown on your other device";
 "screen_link_new_device_error_app_not_supported_subtitle" = "Your account provider does not support %1$@.";
 "screen_link_new_device_error_app_not_supported_title" = "%1$@ not supported";
 "screen_link_new_device_error_not_supported_subtitle" = "Your account provider doesn’t support signing into a new device with a QR code.";
 "screen_link_new_device_error_not_supported_title" = "QR code not supported";
 "screen_link_new_device_error_request_cancelled_subtitle" = "The sign in was cancelled on the other device.";
 "screen_link_new_device_error_request_cancelled_title" = "Sign in request cancelled";
 "screen_link_new_device_error_request_timeout_subtitle" = "Sign in expired. Please try again.";
 "screen_link_new_device_error_request_timeout_title" = "The sign in was not completed in time";
 "screen_link_new_device_mobile_step1" = "Open %1$@ on the other device";
 "screen_link_new_device_mobile_step2" = "Select %1$@";
 "screen_link_new_device_mobile_step2_action" = "“Sign in with QR code”";
 "screen_link_new_device_mobile_step3" = "Scan the QR code shown here with the other device";
 "screen_link_new_device_mobile_title" = "Open %1$@ on the other device";
 "screen_link_new_device_root_desktop_computer" = "Desktop computer";
 "screen_link_new_device_root_loading_qr_code" = "Loading QR code…";
 "screen_link_new_device_root_mobile_device" = "Mobile device";
 "screen_link_new_device_root_title" = "What type of device do you want to link?";
 "screen_link_new_device_wrong_number_subtitle" = "Please try again and make sure that you’ve entered the 2-digit code correctly. If the numbers still don’t match then contact your account provider.";
 "screen_manage_authorized_spaces_header" = "Spaces where members can join the room without an invitation.";
 "screen_manage_authorized_spaces_title" = "Manage spaces";
 "screen_manage_authorized_spaces_unknown_space" = "(Unknown space)";
@@ -985,6 +973,8 @@
 "screen_qr_code_login_error_cancelled_title" = "Sign in request cancelled";
 "screen_qr_code_login_error_declined_subtitle" = "The sign in was declined on the other device.";
 "screen_qr_code_login_error_declined_title" = "Sign in declined";
 "screen_qr_code_login_error_device_already_signed_in_subtitle" = "You don’t need to do anything else.";
 "screen_qr_code_login_error_device_already_signed_in_title" = "Your other device is already signed in";
 "screen_qr_code_login_error_expired_subtitle" = "Sign in expired. Please try again.";
 "screen_qr_code_login_error_expired_title" = "The sign in was not completed in time";
 "screen_qr_code_login_error_linking_not_suported_subtitle" = "Your other device does not support signing in to %@ with a QR code.\n\nTry signing in manually, or scan the QR code with another device.";
@@ -1005,7 +995,6 @@
 "screen_qr_code_login_no_camera_permission_state_description" = "You need to give permission for %1$@ to use your device’s camera in order to continue.";
 "screen_qr_code_login_no_camera_permission_state_title" = "Allow camera access to scan the QR code";
 "screen_qr_code_login_scanning_state_title" = "Scan the QR code";
 "screen_qr_code_login_start_over_button" = "Start over";
 "screen_qr_code_login_unknown_error_description" = "An unexpected error occurred. Please try again.";
 "screen_qr_code_login_verify_code_loading" = "Waiting for your other device";
 "screen_qr_code_login_verify_code_subtitle" = "Your account provider may ask for the following code to verify the sign in.";
@@ -1332,7 +1321,6 @@
 "troubleshoot_notifications_test_blocked_users_description" = "Checking blocked users";
 "troubleshoot_notifications_test_blocked_users_quick_fix" = "View blocked users";
 "troubleshoot_notifications_test_blocked_users_result_none" = "No users are blocked.";
 "troubleshoot_notifications_test_blocked_users_title" = "Blocked users";
 "troubleshoot_notifications_entry_point_section" = "Troubleshoot";
 "troubleshoot_notifications_screen_action" = "Run tests";
 "troubleshoot_notifications_screen_action_again" = "Run tests again";
@@ -1381,6 +1369,7 @@
 "troubleshoot_notifications_test_unified_push_title" = "Check UnifiedPush";
 "a11y_poll" = "Poll";
 "banner_set_up_recovery_submit" = "Set up recovery";
 "common_android_shortcuts_remove_reason_left_room" = "You left the room";
 "dialog_file_too_large_to_upload_subtitle" = "The max file size allowed is: %1$@";
 "dialog_default_video_quality_selector_title" = "Video upload quality";
 "dialog_title_error" = "Error";
@@ -1400,6 +1389,19 @@
 "screen_home_tab_spaces" = "Spaces";
 "screen_join_room_decline_and_block_button_title" = "Decline and block";
 "screen_knock_requests_list_title" = "Requests to join";
 "screen_link_new_device_desktop_scanning_title" = "Scan the QR code";
 "screen_link_new_device_desktop_step3" = "Scan the QR code with this device";
 "screen_link_new_device_desktop_submit" = "Ready to scan";
 "screen_link_new_device_error_app_not_supported_subtitle" = "Your account provider does not support %1$@.";
 "screen_link_new_device_error_app_not_supported_title" = "%1$@ not supported";
 "screen_link_new_device_error_not_supported_title" = "QR code not supported";
 "screen_link_new_device_error_request_cancelled_subtitle" = "The sign in was cancelled on the other device.";
 "screen_link_new_device_error_request_cancelled_title" = "Sign in request cancelled";
 "screen_link_new_device_error_request_timeout_subtitle" = "Sign in expired. Please try again.";
 "screen_link_new_device_error_request_timeout_title" = "The sign in was not completed in time";
 "screen_link_new_device_mobile_step2" = "Select %1$@";
 "screen_link_new_device_mobile_title" = "Open %1$@ on the other device";
 "screen_link_new_device_wrong_number_title" = "The numbers don’t match";
 "screen_pinned_timeline_screen_title_empty" = "Pinned messages";
 "screen_report_room_title" = "Report room";
 "screen_room_mentions_at_room_title" = "Everyone";
@@ -1450,6 +1452,7 @@
 "screen_notification_settings_mentions_section_title" = "Mentions";
 "screen_onboarding_sign_in_to" = "Sign in to %1$@";
 "screen_qr_code_login_invalid_scan_state_retry_button" = "Try again";
 "screen_qr_code_login_start_over_button" = "Start over";
 "screen_recovery_key_change_generate_key_description" = "Do not share this with anyone!";
 "screen_recovery_key_confirm_title" = "Enter your recovery key";
 "screen_report_content_block_user" = "Block user";
@@ -1496,5 +1499,6 @@
 "screen_signout_preference_item" = "Sign out";
 "screen_signout_save_recovery_key_title" = "Have you saved your recovery key?";
 "timeline_decryption_failure_historical_event_user_not_joined" = "You don't have access to this message";
 "troubleshoot_notifications_test_blocked_users_title" = "Blocked users";
 "troubleshoot_notifications_entry_point_push_history_title" = "Push history";
 "troubleshoot_notifications_entry_point_title" = "Troubleshoot notifications";
@@ -176,7 +176,6 @@
 "common_advanced_settings" = "Advanced settings";
 "common_an_image" = "an image";
 "common_analytics" = "Analytics";
 "common_android_shortcuts_remove_reason_left_room" = "You left the room";
 "common_android_shortcuts_remove_reason_session_logged_out" = "You were logged out of the session";
 "common_appearance" = "Appearance";
 "common_audio" = "Audio";
@@ -589,32 +588,21 @@
 "screen_leave_space_subtitle_only_last_admin" = "You will not be removed from the following room(s) because you're the only administrator:";
 "screen_leave_space_title" = "Leave %1$@?";
 "screen_leave_space_title_last_admin" = "You are the only admin for %1$@";
 "screen_link_new_device_desktop_scanning_title" = "Scan the QR code";
 "screen_link_new_device_desktop_step1" = "Open %1$@ on a laptop or desktop computer";
 "screen_link_new_device_desktop_step3" = "Scan the QR code with this device";
 "screen_link_new_device_desktop_submit" = "Ready to scan";
 "screen_link_new_device_desktop_title" = "Open %1$@ on a desktop computer to get the QR code";
 "screen_link_new_device_enter_number_error_numbers_do_not_match" = "The numbers don’t match";
 "screen_link_new_device_enter_number_notice" = "Enter 2-digit code";
 "screen_link_new_device_enter_number_subtitle" = "This will verify that the connection to your other device is secure.";
 "screen_link_new_device_enter_number_title" = "Enter the number shown on your other device";
 "screen_link_new_device_error_app_not_supported_subtitle" = "Your account provider does not support %1$@.";
 "screen_link_new_device_error_app_not_supported_title" = "%1$@ not supported";
 "screen_link_new_device_error_not_supported_subtitle" = "Your account provider doesn’t support signing into a new device with a QR code.";
 "screen_link_new_device_error_not_supported_title" = "QR code not supported";
 "screen_link_new_device_error_request_cancelled_subtitle" = "The sign in was cancelled on the other device.";
 "screen_link_new_device_error_request_cancelled_title" = "Sign in request cancelled";
 "screen_link_new_device_error_request_timeout_subtitle" = "Sign in expired. Please try again.";
 "screen_link_new_device_error_request_timeout_title" = "The sign in was not completed in time";
 "screen_link_new_device_mobile_step1" = "Open %1$@ on the other device";
 "screen_link_new_device_mobile_step2" = "Select %1$@";
 "screen_link_new_device_mobile_step2_action" = "“Sign in with QR code”";
 "screen_link_new_device_mobile_step3" = "Scan the QR code shown here with the other device";
 "screen_link_new_device_mobile_title" = "Open %1$@ on the other device";
 "screen_link_new_device_root_desktop_computer" = "Desktop computer";
 "screen_link_new_device_root_loading_qr_code" = "Loading QR code…";
 "screen_link_new_device_root_mobile_device" = "Mobile device";
 "screen_link_new_device_root_title" = "What type of device do you want to link?";
 "screen_link_new_device_wrong_number_subtitle" = "Please try again and make sure that you’ve entered the 2-digit code correctly. If the numbers still don’t match then contact your account provider.";
 "screen_manage_authorized_spaces_header" = "Spaces where members can join the room without an invitation.";
 "screen_manage_authorized_spaces_title" = "Manage spaces";
 "screen_manage_authorized_spaces_unknown_space" = "(Unknown space)";
@@ -985,6 +973,8 @@
 "screen_qr_code_login_error_cancelled_title" = "Sign in request cancelled";
 "screen_qr_code_login_error_declined_subtitle" = "The sign in was declined on the other device.";
 "screen_qr_code_login_error_declined_title" = "Sign in declined";
 "screen_qr_code_login_error_device_already_signed_in_subtitle" = "You don’t need to do anything else.";
 "screen_qr_code_login_error_device_already_signed_in_title" = "Your other device is already signed in";
 "screen_qr_code_login_error_expired_subtitle" = "Sign in expired. Please try again.";
 "screen_qr_code_login_error_expired_title" = "The sign in was not completed in time";
 "screen_qr_code_login_error_linking_not_suported_subtitle" = "Your other device does not support signing in to %@ with a QR code.\n\nTry signing in manually, or scan the QR code with another device.";
@@ -1005,7 +995,6 @@
 "screen_qr_code_login_no_camera_permission_state_description" = "You need to give permission for %1$@ to use your device’s camera in order to continue.";
 "screen_qr_code_login_no_camera_permission_state_title" = "Allow camera access to scan the QR code";
 "screen_qr_code_login_scanning_state_title" = "Scan the QR code";
 "screen_qr_code_login_start_over_button" = "Start over";
 "screen_qr_code_login_unknown_error_description" = "An unexpected error occurred. Please try again.";
 "screen_qr_code_login_verify_code_loading" = "Waiting for your other device";
 "screen_qr_code_login_verify_code_subtitle" = "Your account provider may ask for the following code to verify the sign in.";
@@ -1332,7 +1321,6 @@
 "troubleshoot_notifications_test_blocked_users_description" = "Checking blocked users";
 "troubleshoot_notifications_test_blocked_users_quick_fix" = "View blocked users";
 "troubleshoot_notifications_test_blocked_users_result_none" = "No users are blocked.";
 "troubleshoot_notifications_test_blocked_users_title" = "Blocked users";
 "troubleshoot_notifications_entry_point_section" = "Troubleshoot";
 "troubleshoot_notifications_screen_action" = "Run tests";
 "troubleshoot_notifications_screen_action_again" = "Run tests again";
@@ -1381,6 +1369,7 @@
 "troubleshoot_notifications_test_unified_push_title" = "Check UnifiedPush";
 "a11y_poll" = "Poll";
 "banner_set_up_recovery_submit" = "Set up recovery";
 "common_android_shortcuts_remove_reason_left_room" = "You left the room";
 "dialog_file_too_large_to_upload_subtitle" = "The max file size allowed is: %1$@";
 "dialog_default_video_quality_selector_title" = "Video upload quality";
 "dialog_title_error" = "Error";
@@ -1400,6 +1389,19 @@
 "screen_home_tab_spaces" = "Spaces";
 "screen_join_room_decline_and_block_button_title" = "Decline and block";
 "screen_knock_requests_list_title" = "Requests to join";
 "screen_link_new_device_desktop_scanning_title" = "Scan the QR code";
 "screen_link_new_device_desktop_step3" = "Scan the QR code with this device";
 "screen_link_new_device_desktop_submit" = "Ready to scan";
 "screen_link_new_device_error_app_not_supported_subtitle" = "Your account provider does not support %1$@.";
 "screen_link_new_device_error_app_not_supported_title" = "%1$@ not supported";
 "screen_link_new_device_error_not_supported_title" = "QR code not supported";
 "screen_link_new_device_error_request_cancelled_subtitle" = "The sign in was cancelled on the other device.";
 "screen_link_new_device_error_request_cancelled_title" = "Sign in request cancelled";
 "screen_link_new_device_error_request_timeout_subtitle" = "Sign in expired. Please try again.";
 "screen_link_new_device_error_request_timeout_title" = "The sign in was not completed in time";
 "screen_link_new_device_mobile_step2" = "Select %1$@";
 "screen_link_new_device_mobile_title" = "Open %1$@ on the other device";
 "screen_link_new_device_wrong_number_title" = "The numbers don’t match";
 "screen_pinned_timeline_screen_title_empty" = "Pinned messages";
 "screen_report_room_title" = "Report room";
 "screen_room_mentions_at_room_title" = "Everyone";
@@ -1450,6 +1452,7 @@
 "screen_notification_settings_mentions_section_title" = "Mentions";
 "screen_onboarding_sign_in_to" = "Sign in to %1$@";
 "screen_qr_code_login_invalid_scan_state_retry_button" = "Try again";
 "screen_qr_code_login_start_over_button" = "Start over";
 "screen_recovery_key_change_generate_key_description" = "Do not share this with anyone!";
 "screen_recovery_key_confirm_title" = "Enter your recovery key";
 "screen_report_content_block_user" = "Block user";
@@ -1496,5 +1499,6 @@
 "screen_signout_preference_item" = "Sign out";
 "screen_signout_save_recovery_key_title" = "Have you saved your recovery key?";
 "timeline_decryption_failure_historical_event_user_not_joined" = "You don't have access to this message";
 "troubleshoot_notifications_test_blocked_users_title" = "Blocked users";
 "troubleshoot_notifications_entry_point_push_history_title" = "Push history";
 "troubleshoot_notifications_entry_point_title" = "Troubleshoot notifications";
@@ -1956,6 +1956,10 @@ internal enum L10n {
  internal static var screenLinkNewDeviceRootMobileDevice: String { return L10n.tr("Localizable", "screen_link_new_device_root_mobile_device") }
  /// What type of device do you want to link?
  internal static var screenLinkNewDeviceRootTitle: String { return L10n.tr("Localizable", "screen_link_new_device_root_title") }
  /// Please try again and make sure that you’ve entered the 2-digit code correctly. If the numbers still don’t match then contact your account provider.
  internal static var screenLinkNewDeviceWrongNumberSubtitle: String { return L10n.tr("Localizable", "screen_link_new_device_wrong_number_subtitle") }
  /// The numbers don’t match
  internal static var screenLinkNewDeviceWrongNumberTitle: String { return L10n.tr("Localizable", "screen_link_new_device_wrong_number_title") }
  /// This account has been deactivated.
  internal static var screenLoginErrorDeactivatedAccount: String { return L10n.tr("Localizable", "screen_login_error_deactivated_account") }
  /// Incorrect username and/or password
@@ -2188,6 +2192,10 @@ internal enum L10n {
  internal static var screenQrCodeLoginErrorDeclinedSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_error_declined_subtitle") }
  /// Sign in declined
  internal static var screenQrCodeLoginErrorDeclinedTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_error_declined_title") }
  /// You don’t need to do anything else.
  internal static var screenQrCodeLoginErrorDeviceAlreadySignedInSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_error_device_already_signed_in_subtitle") }
  /// Your other device is already signed in
  internal static var screenQrCodeLoginErrorDeviceAlreadySignedInTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_error_device_already_signed_in_title") }
  /// Sign in expired. Please try again.
  internal static var screenQrCodeLoginErrorExpiredSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_error_expired_subtitle") }
  /// The sign in was not completed in time
@@ -21,8 +21,10 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
    /// Padding applied to the top of the content automatically. Use `UIConstants` for preset values.
    var topPadding: CGFloat = UIConstants.titleTopPaddingToNavigationBar
-    /// Padding applied to the content and buttons automatically
+    /// Padding applied to the content automatically
    var horizontalPadding: CGFloat = 16
    /// Padding applied to the buttons automatically
    var bottomHorizontalPadding: CGFloat = 16
    /// The spacing between the content and the buttons.
    var spacing: CGFloat = 16
@@ -83,7 +85,7 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
                VStack(spacing: 0) {
                    bottomContent()
                        .readableFrame()
-                        .padding(.horizontal, horizontalPadding)
+                        .padding(.horizontal, bottomHorizontalPadding)
                        .padding(.top, spacing)
                        .padding(.bottom, UIConstants.actionButtonBottomPadding)
@@ -113,7 +115,7 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
                    bottomContent()
                        .readableFrame()
-                        .padding(.horizontal, horizontalPadding)
+                        .padding(.horizontal, bottomHorizontalPadding)
                        .padding(.bottom, UIConstants.actionButtonBottomPadding)
                    Spacer()
@@ -12,7 +12,7 @@ struct LinkNewDeviceScreen: View {
    @Bindable var context: LinkNewDeviceScreenViewModel.Context
    var body: some View {
-        FullscreenDialog(topPadding: 0) {
+        FullscreenDialog(topPadding: 24, horizontalPadding: 24) {
            mainContent
        } bottomContent: {
            buttons
@@ -31,7 +31,6 @@ struct LinkNewDeviceScreen: View {
            TitleAndIcon(title: L10n.screenLinkNewDeviceRootTitle,
                         icon: \.computer,
                         iconStyle: .default)
                .padding(.horizontal, -16) // Remove the FullscreenDialog's default padding in this state.
        case .notSupported:
            TitleAndIcon(title: L10n.screenLinkNewDeviceErrorNotSupportedTitle,
                         subtitle: L10n.screenLinkNewDeviceErrorNotSupportedSubtitle,
@@ -65,7 +65,7 @@ enum QRCodeLoginState: Equatable {
    /// Any full screen error state
    case error(ErrorState)
-    enum ErrorState: Equatable {
+    enum ErrorState: Equatable, CaseIterable {
        case noCameraPermission
        case connectionNotSecure
        case cancelled
@@ -73,6 +73,8 @@ enum QRCodeLoginState: Equatable {
        case expired
        case linkingNotSupported
        case deviceNotSupported
        /// Expected a QR code for a new device, however the processed code belongs to a device that is already signed in.
        case deviceAlreadySignedIn
        case unknown
    }
@@ -91,8 +93,6 @@ enum QRCodeLoginState: Equatable {
            case notAllowed(scannedProvider: String, allowedProviders: [String])
            /// The QR code has been processed but it belongs to a device not signed in.
            case deviceNotSignedIn
            /// Expected a QR code for a new device, however the processed code belongs to a device that is already signed in.
            case deviceAlreadySignedIn
            var title: String {
                switch self {
@@ -102,8 +102,6 @@ enum QRCodeLoginState: Equatable {
                    L10n.screenChangeServerErrorUnauthorizedHomeserverTitle(scannedProvider)
                case .deviceNotSignedIn:
                    L10n.screenQrCodeLoginDeviceNotSignedInScanStateSubtitle
                case .deviceAlreadySignedIn:
                    L10n.screenQrCodeLoginDeviceNotSignedInScanStateSubtitle // FIXME: Update string
                }
            }
@@ -115,8 +113,6 @@ enum QRCodeLoginState: Equatable {
                    L10n.screenChangeServerErrorUnauthorizedHomeserverContent(allowedProviders.formatted(.list(type: .and)))
                case .deviceNotSignedIn:
                    L10n.screenQrCodeLoginDeviceNotSignedInScanStateDescription
                case .deviceAlreadySignedIn:
                    L10n.screenQrCodeLoginDeviceNotSignedInScanStateDescription // FIXME: Update string
                }
            }
        }
@@ -129,7 +129,7 @@ class QRCodeLoginScreenViewModel: QRCodeLoginScreenViewModelType, QRCodeLoginScr
        case .deviceNotSignedIn:
            state.state = .scan(.scanFailed(.deviceNotSignedIn))
        case .deviceAlreadySignedIn:
-            state.state = .scan(.scanFailed(.deviceAlreadySignedIn))
+            state.state = .error(.deviceAlreadySignedIn)
        case .cancelled:
            state.state = .error(.cancelled)
        case .connectionInsecure:
@@ -31,6 +31,8 @@ struct QRCodeErrorView: View {
            L10n.screenQrCodeLoginErrorLinkingNotSuportedTitle
        case .deviceNotSupported:
            L10n.screenQrCodeLoginErrorSlidingSyncNotSupportedTitle(InfoPlistReader.main.bundleDisplayName)
        case .deviceAlreadySignedIn:
            L10n.screenQrCodeLoginErrorDeviceAlreadySignedInTitle
        case .unknown:
            L10n.commonSomethingWentWrong
        }
@@ -52,56 +54,43 @@ struct QRCodeErrorView: View {
            L10n.screenQrCodeLoginErrorLinkingNotSuportedSubtitle(InfoPlistReader.main.bundleDisplayName)
        case .deviceNotSupported:
            L10n.screenQrCodeLoginErrorSlidingSyncNotSupportedSubtitle(InfoPlistReader.main.bundleDisplayName)
        case .deviceAlreadySignedIn:
            L10n.screenQrCodeLoginErrorDeviceAlreadySignedInSubtitle
        case .unknown:
            L10n.screenQrCodeLoginUnknownErrorDescription
        }
    }
-    var body: some View {
+    var icon: KeyPath<CompoundIcons, Image> {
-        FullscreenDialog {
+        switch errorState {
-            header
+        case .noCameraPermission: \.takePhotoSolid
-        } bottomContent: {
+        case .deviceAlreadySignedIn: \.checkCircleSolid
-            footer
+        default: \.errorSolid
        }
    }
    var iconStyle: BigIcon.Style {
        switch errorState {
        case .noCameraPermission: .defaultSolid
        case .deviceAlreadySignedIn: .successSolid
        default: .alertSolid
        }
    }
    var body: some View {
        FullscreenDialog(topPadding: 24, horizontalPadding: 24) {
            mainContent
        } bottomContent: {
            buttons
        }
        .padding(.horizontal, 24)
    }
    @ViewBuilder
-    private var header: some View {
+    private var mainContent: some View {
        switch errorState {
        case .noCameraPermission:
            VStack(spacing: 16) {
                BigIcon(icon: \.takePhotoSolid, style: .defaultSolid)
                VStack(spacing: 8) {
                    Text(title)
                        .foregroundColor(.compound.textPrimary)
                        .font(.compound.headingMDBold)
                        .multilineTextAlignment(.center)
                    Text(subtitle)
                        .foregroundColor(.compound.textSecondary)
                        .font(.compound.bodyMD)
                        .multilineTextAlignment(.center)
                }
            }
        case .connectionNotSecure:
            VStack(spacing: 40) {
-                VStack(spacing: 16) {
+                header
                    BigIcon(icon: \.errorSolid, style: .alertSolid)
                    VStack(spacing: 8) {
                        Text(title)
                            .foregroundColor(.compound.textPrimary)
                            .font(.compound.headingMDBold)
                            .multilineTextAlignment(.center)
                        Text(subtitle)
                            .foregroundColor(.compound.textSecondary)
                            .font(.compound.bodyMD)
                            .multilineTextAlignment(.center)
                    }
                }
                VStack(spacing: 24) {
                    Text(L10n.screenQrCodeLoginConnectionNoteSecureStateListHeader)
@@ -117,31 +106,19 @@ struct QRCodeErrorView: View {
                }
            }
        default:
-            simpleErrorStack
+            header
        }
    }
-    @ViewBuilder
+    var header: some View {
-    private var simpleErrorStack: some View {
+        TitleAndIcon(title: title,
-        VStack(spacing: 16) {
+                     subtitle: subtitle,
-            BigIcon(icon: \.errorSolid, style: .alertSolid)
+                     icon: icon,
-            
+                     iconStyle: iconStyle)
            VStack(spacing: 8) {
                Text(title)
                    .foregroundColor(.compound.textPrimary)
                    .font(.compound.headingMDBold)
                    .multilineTextAlignment(.center)
                Text(subtitle)
                    .foregroundColor(.compound.textSecondary)
                    .font(.compound.bodyMD)
                    .multilineTextAlignment(.center)
            }
        }
    }
    @ViewBuilder
-    private var footer: some View {
+    private var buttons: some View {
        switch errorState {
        case .noCameraPermission:
            Button(L10n.screenQrCodeLoginNoCameraPermissionButton) {
@@ -172,6 +149,11 @@ struct QRCodeErrorView: View {
                }
                .buttonStyle(.compound(.tertiary))
            }
        case .deviceAlreadySignedIn:
            Button(L10n.actionContinue) {
                action(.cancel)
            }
            .buttonStyle(.compound(.primary))
        }
    }
 }
@@ -180,42 +162,34 @@ struct QRCodeErrorView: View {
 struct QRCodeErrorView_Previews: PreviewProvider, TestablePreview {
    static var previews: some View {
-        QRCodeErrorViewSnapshot(errorState: .noCameraPermission, canSignInManually: false)
+        ForEach(QRCodeLoginState.ErrorState.allCases, id: \.self) { errorState in
-            .previewDisplayName("No Camera Permission")
+            NavigationStack {
                QRCodeErrorView(errorState: errorState, canSignInManually: true) { _ in }
                    .toolbar(.visible, for: .navigationBar)
            }
            .previewDisplayName(errorState.previewDisplayName)
        }
-        QRCodeErrorViewSnapshot(errorState: .connectionNotSecure, canSignInManually: false)
+        NavigationStack {
-            .previewDisplayName("Connection not secure")
+            QRCodeErrorView(errorState: .linkingNotSupported, canSignInManually: false) { _ in }
-        
+                .toolbar(.visible, for: .navigationBar)
-        QRCodeErrorViewSnapshot(errorState: .linkingNotSupported, canSignInManually: true)
+        }
-            .previewDisplayName("Linking unsupported")
+        .previewDisplayName("Linking unsupported restricted flow")
        QRCodeErrorViewSnapshot(errorState: .linkingNotSupported, canSignInManually: false)
            .previewDisplayName("Linking unsupported restricted flow")
        QRCodeErrorViewSnapshot(errorState: .cancelled, canSignInManually: false)
            .previewDisplayName("Cancelled")
        QRCodeErrorViewSnapshot(errorState: .declined, canSignInManually: false)
            .previewDisplayName("Declined")
        QRCodeErrorViewSnapshot(errorState: .expired, canSignInManually: false)
            .previewDisplayName("Expired")
        QRCodeErrorViewSnapshot(errorState: .deviceNotSupported, canSignInManually: false)
            .previewDisplayName("Device not supported")
        QRCodeErrorViewSnapshot(errorState: .unknown, canSignInManually: false)
            .previewDisplayName("Unknown error")
    }
 }
-private struct QRCodeErrorViewSnapshot: View {
+private extension QRCodeLoginState.ErrorState {
-    let errorState: QRCodeLoginState.ErrorState
+    var previewDisplayName: String {
-    let canSignInManually: Bool
+        switch self {
-    
+        case .noCameraPermission: "No Camera Permission"
-    var body: some View {
+        case .connectionNotSecure: "Connection not secure"
-        NavigationStack {
+        case .linkingNotSupported: "Linking unsupported"
-            QRCodeErrorView(errorState: errorState, canSignInManually: canSignInManually) { _ in }
+        case .cancelled: "Cancelled"
-                .toolbar(.visible, for: .navigationBar)
+        case .declined: "Declined"
        case .expired: "Expired"
        case .deviceNotSupported: "Device not supported"
        case .deviceAlreadySignedIn: "Device already signed in"
        case .unknown: "Unknown error"
        }
    }
 }
@@ -49,24 +49,12 @@ struct QRCodeLoginScreen: View {
    }
    private var initialContent: some View {
-        FullscreenDialog {
+        FullscreenDialog(topPadding: 24, horizontalPadding: 24) {
            VStack(alignment: .leading, spacing: 40) {
-                VStack(spacing: 16) {
+                TitleAndIcon(title: L10n.screenQrCodeLoginInitialStateTitle(InfoPlistReader.main.productionAppName),
-                    BigIcon(icon: \.computer, style: .default)
+                             subtitle: L10n.screenQrCodeLoginInitialStateSubtitle,
-                    
+                             icon: \.computer,
-                    VStack(spacing: 8) {
+                             iconStyle: .default)
                        Text(L10n.screenQrCodeLoginInitialStateTitle(InfoPlistReader.main.productionAppName))
                            .foregroundColor(.compound.textPrimary)
                            .font(.compound.headingMDBold)
                            .multilineTextAlignment(.center)
                        Text(L10n.screenQrCodeLoginInitialStateSubtitle)
                            .font(.compound.bodyMD)
                            .multilineTextAlignment(.center)
                            .foregroundColor(.compound.textSecondary)
                    }
                }
                .padding(.horizontal, 24)
                SFNumberedListView(items: context.viewState.initialStateListItems)
            }
@@ -81,17 +69,21 @@ struct QRCodeLoginScreen: View {
    @ViewBuilder
    private var displayCodeContent: some View {
        if case let .displayCode(displayCodeState) = context.viewState.state {
-            FullscreenDialog {
+            FullscreenDialog(topPadding: 24) {
                VStack(spacing: 32) {
-                    VStack(spacing: 40) {
+                    VStack(spacing: 24) {
                        displayCodeHeader(state: displayCodeState)
                            .padding(.horizontal, 8)
                        PINTextField(pinCode: .constant(displayCodeState.code),
                                     maxLength: displayCodeState.code.count,
                                     size: .small)
                            .disabled(true)
                    }
                    VStack(spacing: 4) {
                        ProgressView()
                        Text(L10n.screenQrCodeLoginVerifyCodeLoading)
                            .foregroundColor(.compound.textSecondary)
                            .font(.compound.bodySM)
@@ -104,63 +96,36 @@ struct QRCodeLoginScreen: View {
                }
                .buttonStyle(.compound(.secondary))
            }
            .padding(.horizontal, 24)
        }
    }
    private func displayCodeHeader(state: QRCodeLoginState.QRCodeLoginDisplayCodeState) -> some View {
-        VStack(spacing: 16) {
+        switch state {
-            switch state {
+        case .deviceCode:
-            case .deviceCode:
+            TitleAndIcon(title: L10n.screenQrCodeLoginDeviceCodeTitle,
-                BigIcon(icon: \.computer, style: .default)
+                         subtitle: L10n.screenQrCodeLoginDeviceCodeSubtitle,
-                
+                         icon: \.computer,
-                VStack(spacing: 8) {
+                         iconStyle: .default)
-                    Text(L10n.screenQrCodeLoginDeviceCodeTitle)
+        case .verificationCode:
-                        .foregroundColor(.compound.textPrimary)
+            TitleAndIcon(title: L10n.screenQrCodeLoginVerifyCodeTitle,
-                        .font(.compound.headingMDBold)
+                         subtitle: L10n.screenQrCodeLoginVerifyCodeSubtitle,
-                        .multilineTextAlignment(.center)
+                         icon: \.lock,
-                    
+                         iconStyle: .default)
                    Text(L10n.screenQrCodeLoginDeviceCodeSubtitle)
                        .foregroundColor(.compound.textSecondary)
                        .font(.compound.bodyMD)
                        .multilineTextAlignment(.center)
                }
            case .verificationCode:
                BigIcon(icon: \.lock, style: .default)
                VStack(spacing: 8) {
                    Text(L10n.screenQrCodeLoginVerifyCodeTitle)
                        .foregroundColor(.compound.textPrimary)
                        .font(.compound.headingMDBold)
                        .multilineTextAlignment(.center)
                    Text(L10n.screenQrCodeLoginVerifyCodeSubtitle)
                        .foregroundColor(.compound.textSecondary)
                        .font(.compound.bodyMD)
                        .multilineTextAlignment(.center)
                }
            }
        }
    }
    private var qrScanContent: some View {
-        FullscreenDialog {
+        FullscreenDialog(topPadding: 24) {
            VStack(spacing: 40) {
-                VStack(spacing: 16) {
+                TitleAndIcon(title: L10n.screenQrCodeLoginScanningStateTitle,
-                    BigIcon(icon: \.takePhotoSolid, style: .default)
+                             icon: \.takePhotoSolid,
-                    
+                             iconStyle: .default)
                    Text(L10n.screenQrCodeLoginScanningStateTitle)
                        .foregroundColor(.compound.textPrimary)
                        .font(.compound.headingMDBold)
                        .multilineTextAlignment(.center)
                }
                qrScanner
            }
        } bottomContent: {
            qrScanFooter
        }
        .padding(.horizontal, 24)
    }
    @ViewBuilder
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:73aca2269ac89b2c23340ec8eef0b0fa0bd3d95399523b182f35d7a572dbd7d0
+oid sha256:8e5f2cafc52726da840b03245f0cb66d48d8af7be99f55e4e09bfa192887d4ce
-size 126119
+size 125605
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:202c67d89c325b788262acce35aa807e97337db5a71f23c23ef0ab9023fa509f
+oid sha256:7ecc2829a7b715265cbe825c0fddb7cfb707c29380eb92b3cae23d3f977e4e3d
-size 112500
+size 111986
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:49091e97260d6eb72d75b34c9903ad9b8971c152409dd1ef73e713f907dfd1fc
+oid sha256:1f1a820798a46a32b2747ea2efd5af67daf883e5cfd566409eb7e4911437afee
-size 126135
+size 125621
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67621aa88efeeb7c589bc91087970211de6fa1ff35794c26245af3e483712f31
+oid sha256:2bda2afc3ec1c2a1668a24b60021cf0045a8d6a8da870241e1f6c005f1b1a460
-size 123533
+size 123442
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a958c859edf66c6e11503fd590c04dc6937e8c322ade159bdaa4c1158f237cb2
+oid sha256:df24040677476878fd5ac4a22873177105c26094f74732fedb6af07642b6d44d
-size 63031
+size 62919
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddb567a2b6e080169771b6dece8ad4b47d80f83b207d6c0147531a8882fac7cb
+oid sha256:84932548b4b69ad3e0a1ab732cd895863e2a036903429f1febd973dda7cf54b1
-size 82338
+size 80320
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4bdf47c5e3c003195a5171e00ff0a7c19fdade400cc49ea1f27af3af5598445
+oid sha256:1f8cf845823645d2e588ba8a428ea3593202278610a2c80f6d7e1c748fa268c7
-size 89983
+size 90008
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7d7fa171a38f3f4c113390bc41b9dbafec9fa429af7603894f539d3b57fe64e5
+oid sha256:4695ac841ffb2d4e18503526d93ad8830324e39bb7d0066001a3986d339e8ee1
-size 96438
+size 96486
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:914698e75e1c93cf578cb243a8178d773ee3676979db95753a820396ad2006b4
+oid sha256:79bdf4106793f8f3d8fb80feac0e0964d709190b9bfeede34cb3bc23493ef001
-size 49503
+size 47530
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b612f9908d71a2ab4aaa54a558fe5c6465ce38b29b5e83bbdd93870bc0eee9b
+oid sha256:3794b5a8528c3f5548788488df8248d60448aba81d9c3a9e89882ccac6b1e000
-size 62995
+size 59265
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:60071d118b633bf533a6587373c06feb8384d4754f5e2ab0a99e35a028d2e61f
+oid sha256:0ab5f1cee96b039b902b3907bc714c842eaf5627f61ba8c86bac0b15ae9b1124
-size 141760
+size 142040
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3949cf87ef273e45eb8f048d49fe149a9ae6ef20c7262ab5c8ec080218480a3d
+oid sha256:f6bf4551fca5b548bdbd46dc435d24599fb120545f3c38dc301f85d3591a60b8
-size 187441
+size 187585
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9859124c19a8d1b91a20e87b6ffc3efd2a84cfa95b5de9047140d508cabbe339
+oid sha256:becdb1165a086f0330eec535042723adbb7fc6f54c5dbd5ceec89e3c47026996
-size 102663
+size 100875
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:243cbd45d08feaae2d126d0a70c17835020ff0ec3836a109ccab3b560fc3b38e
+oid sha256:5de8ec9e0a53a9c96576d4870063b4d7758b23d79bde721e858833ceea741454
-size 160568
+size 156932
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e85694a3b538b272d1324a72fd9a6278afceaacd28cea84fcc79bf96ca6d240c
+oid sha256:bfaacefcc921a093540aac44cce94220e00eeb5b8177182add57ec84f3a0686a
-size 87644
+size 87657
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca17a59ca6681d8cf4d5eb48ca7c301ccfee2c41f1b1942d49f282536e594b9c
+oid sha256:eb5fb9dc291ba1f184e9267a8e0abf9abd2b4730b93e3fb62868df0b1658e643
-size 93400
+size 93414
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:371ea2f5e6db42f0611b63cbe0241733c3e13072b1a2f338ff52852a5319093e
+oid sha256:d6c978a5fcbde7333ac77c8c3dc63b275206f8427e24f4bca54dac26eb44c970
-size 45605
+size 45537
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a59dd129d741059ea37497a748fd26f5fc7f76ad4258ce4327e683458c54ef05
+oid sha256:1f8cc9c945184f57b3b9ffb14862738dc82854de36bdcbe77fbcbbee7014df51
-size 55253
+size 52829
@@ -0,0 +1,3 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:dc7bebb69de830f774ead40f4098b25abb7862df45909c1fe5b0377d0e60017f
 size 90884
@@ -0,0 +1,3 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:166f6c92b9b875a46c70931f675eb506660c01e80fd47e34e35c02c74535ef72
 size 100038
@@ -0,0 +1,3 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:856720a4590c14cfa97b0a504861200f2342bf1aa0ab28937df70688c75b9c48
 size 49981
@@ -0,0 +1,3 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:a2c2c12d5aa74ea2717d062e7170b5cca09b837116418d2b8e9c36713bae0b72
 size 63859
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:10cde6d53a261f5f076dfc985e846985aedf560b3832dcbd38fb87323e0c6af8
+oid sha256:fc51ca496c5f50060a8750613f9454cf9280ad22276cc42cb92603100937383a
-size 90581
+size 90595
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cfa533e3cf122c3549f0310a01d11f6fba2be7517a2461289c9dda02edba9f46
+oid sha256:7f2c18ea2b2b409ce38ea3c52d93daf1ffdf2f9ace3e8fbe24b1a7e6766a5a9f
-size 98629
+size 98690
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f6c297aef97f3e186fedc1c0d6e62ed55348131f3f2074706e0007b656c7177
+oid sha256:a3fa9554b1ad1e3e848a983cfac396114f9ef6d9408aaab83e41538242273ecd
-size 48938
+size 48875
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:45a9a405dffed9ae9e91d81248b7e19b365cec3509912eb258cfae85878cf455
+oid sha256:052b428d2fd84511082b5801122a5b5d5ddc985b48fb073c21f175fc7ded0545
-size 62571
+size 62110
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7fb48e43db6f2787eec4148c8e0e90ed3b40516485b3ecac7356994aec22dc67
+oid sha256:46530158add2765258605e3ae20c8a69aa7338f7190eab13df38993d5de59aca
-size 90924
+size 90983
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:89d5920bf38135a595438c7c2f17463173bdef037b5f769037d2e4f88b433ad8
+oid sha256:1b9ad00a9444f377f069870058a9cce484200ecf80ddf0993374ba6603f916c1
-size 99821
+size 99958
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4b63f9d10e70129ba6dcad2722f6b9386c892d0e0f8e0d52f9e626ab71f84ff9
+oid sha256:ef52548b808b59f966b999650d45fce4b98fbbc6bc4becd11759b84a24bf3e5c
-size 50237
+size 49878
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7067c4325fda81e7ce82dd53a82cfa3531a92f907ca7215e1006c98cf98ecda7
+oid sha256:abd85913c2264d6276dfa36081826f501edfaef8a669bc9cae0b73e4d7c45052
-size 64697
+size 63407
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c6b9799b352e2221b57a03dbd6194a657cd2651e27d07d466fc528256a61dd08
+oid sha256:1bb7ee19252c156dbe87f074885f68ca6fc2d58b9a628abc9ae34267fb4bd6a4
-size 107762
+size 107644
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67d79e351da63ee2289bc75a06cb7adf769c3871e21647eaa60cf42cff774e1e
+oid sha256:6fe13470f847b819eebef43f10fc5d670c3d0820f217f48c72f08141da008073
-size 132987
+size 133115
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:01b6e8fe8d6221aeff100635f30b4ee4d38c2dd7a0fe96bbfc863309fc10dc12
+oid sha256:939a9c7d6a38eacd8b5636f258e2de8d65ea6a75abb563d2065988557c937d79
-size 68507
+size 67578
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fbf90db455fc188bae28f52f13a0fefb3602d1349a7ea0b9f337f68376c2dd6d
+oid sha256:34ae92445cb12df66949b874ecdb718ef2099261cfa0c3e435051643a395198f
-size 98104
+size 94076
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:40b981da4f55d7ff8b1433888f6b0303025ef3b7ad6a8c69f451b9f4d4ea7826
+oid sha256:c59427ee9b1963e79e162fa3e2e666293ed7c557b95f160997d1e9c2437d75f3
-size 100024
+size 99906
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bc31d7c0b096568c66b954ec864e3553ec48f4945cf0afdbe01c7a76583bbcfd
+oid sha256:d7adf94a154d8969516a4044a6adb7a77b8d936b2dff32572ee4476d9113f222
-size 123384
+size 123512
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b241ac12d4954e085c3e215f25112b61e9a49e6d4a3d343b5452b4ad8734b27d
+oid sha256:fda12a17466c9a0ac0b6853f6ec7920b113fc4256bef2661db2c18ea2a304a65
-size 61772
+size 60872
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:581294e449432a5261b366cc76644492af42af0d0f595cd152da50c233f4d6d1
+oid sha256:648db4e91f5b828f25c3a6b121374bc957d2dbae8ad87914e5766a54dfc16e76
-size 89902
+size 85578
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9b01ff5e2e4204a78cfced50bea9a3a1a0484ce48797ca145e8526a2dce8fdf8
+oid sha256:a3c4204abe4bf3f79d53baa128e23ab0e64dc92044aa573dd5875e932d5c4c77
-size 99946
+size 100003
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:17a1cb57d63cf6ef6b44ba9a3dad61c994b3459631136838a0e2f7d717399af8
+oid sha256:25958be6f832b80dc4d941187bc9b73a04ea65a7f08cbe85b389120a02bb5937
-size 119958
+size 120131
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b2290a5479e967421aa5b78b9c183a0e42082e2bdbd8a2c92c68602509ff6f21
+oid sha256:0dde38bb16a2bf867a1246e183531b8e0e19ed22a26cfb33ef833746f0b58a06
-size 62237
+size 60173
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6ee25998f88e79d2ee3223db11e2497770a369ccb998e6b05b9641b3bc1b50e2
+oid sha256:61469ce1934f2f8adc28dcb232e703b653ae69480e03a46dfa1ae21e76a37136
-size 88846
+size 87525
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4db2461cc7a8dc902fe6b288f75b0b4fd7fe6469c82e380f5ea153f3aae2a989
+oid sha256:01e8cd4bdedb6a3ade9e4ce142418ea13c6aa7419bc8f756244cb1da9b38d7b3
-size 90207
+size 90233
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:242d2050553c8e2b773cb78bcce282238208f9e525ecd8b520cbdb35e20d4b40
+oid sha256:cbfd78285154e0a1ffbe6d427a0c90448051c89ed62c28afd1abd09e5d96964f
-size 96304
+size 96352
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d99a5f1997b7ed633828d27ad66c2167502feace1062f7d54d7f5e143dfe37df
+oid sha256:68b5025c6c900caa7af12f0bc6d77c63799efc496452414bba1948a6441e7daf
-size 48900
+size 47933
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fda4806cbf848c50cee4f52aa7d6b2be60c589ba1c18010ce4973f9312fa9922
+oid sha256:25fca7ccc104f7df8e44df9341a25025dc1cb9900ea698660267eb8ab512690e
-size 62108
+size 60663
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea4eb2116625d978b526cfe1e26615b70cdc82d2e8d78222a8620dbd1e48e843
+oid sha256:3f2967fe12faab759a15dedd5285ecf29c072fea9de3558834a40481d2afd659
-size 105406
+size 105436
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6e9ca4e4ef296cab18546d225c2bf3944da7aab5af625b1e4d5762d71de46118
+oid sha256:b741a5591c5b0ea9371f00f177383aa04e3d23fa44341fdd30a8fb013fa9dac2
-size 109388
+size 109419
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f2437e6a19ecb263f10f09c8476713569a0e7df607cd6e79dd596dc0d6be498c
+oid sha256:131d0c3f463b81f0413c0c517c8b8f5a9cba4c786c77f9dae15cd62c39cc070f
-size 46399
+size 46233
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9cff93e2253f8dcae8f7397200bedc96cedc7f238b5df2fb4b52b0641a3d757a
+oid sha256:47ebd411e4cc3a5100e72a0799c0b5f331025073eceaf35ace4063b06dda6e5c
-size 54402
+size 53670
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e39a173c0e87ff212853d6975e643bbf276671bcf681604d081a44aed855e82a
+oid sha256:897433a46e78e649936892b3b4080353731fcdd80781e8eeb2c6c0caaa854c80
-size 116128
+size 116166
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:42efd96aa7ceeb6eadfda0648adcd402042734ec28e71072c26a20544dd7bd80
+oid sha256:666038dcb22f2e14b3727e7d6539453684cbac94c5eac5d8ffdf4a9c0834c580
-size 138100
+size 137501
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7701a0ce3a2d1f9720a76eb090340d102f2a05da2bdbe6d22f75c8c061366fde
+oid sha256:241a7bef6b8d18d26636ed6a591c06c383462c0d48ef701a7725de675c347dab
-size 69711
+size 67128
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:480e2c224647420b3af4cf393009cec5b698e8b01be35e9a68f9d70fabbac436
+oid sha256:4be4bfaf3f024c0fd3746da456b99e736e5e20afea8627a26c08d6a1ab7a2773
-size 91125
+size 89724
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2ec0056be14a845e4958c802b25ea35ba8ab3dbe9f6b0b44615369610ff93845
+oid sha256:6a747e378979ffc936d8d3481ab31a5f5839a1544e736ccfe300aa56f42ffbf2
-size 122693
+size 122713
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddf963e5b26ba59376f752d96a4ba53f7586507602e8e39363687262e5036c80
+oid sha256:3afd52dd8852df06eaa75d39d5a6c3542caacb852e174cc092d22af7665f554f
-size 138245
+size 138264
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:972a2df4e85f8c04aec09be98fe54714d98ccf3a0dfa89054021a5642f622a72
+oid sha256:d3da51241718c13a77b60150526f719ea95f3e93bf216cc48ebce119b71aea4b
-size 64077
+size 64014
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7f0819305f3f645b986cfb0d5efc8ea4db42c0451f522cf27c2b20c7f9315c7c
+oid sha256:3262cbaa505948ad223c1c91e2cbed5c495fa3598a8a5aa1b199988edf17d8f5
-size 84671
+size 81960
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:879ba9bde4429a1ebbee71bf94fb6b3e7fa97841fc09aa1560d51d1486bdd2c5
+oid sha256:2e66a10d0251fd8d46b38e75a12729d2f37dea6c251ecd1d65c05005d2cdeab5
-size 88830
+size 88854
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ce4cc7acad160cd2436b630d204da4c473a55baba7bb2378a403bf38c96d45c1
+oid sha256:36e4f3b626c67f30d7c5146c8ef62c1377fac2ae79afcb975064d484ac3bd170
-size 94953
+size 94985
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:371ea2f5e6db42f0611b63cbe0241733c3e13072b1a2f338ff52852a5319093e
+oid sha256:d6c978a5fcbde7333ac77c8c3dc63b275206f8427e24f4bca54dac26eb44c970
-size 45605
+size 45537
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a59dd129d741059ea37497a748fd26f5fc7f76ad4258ce4327e683458c54ef05
+oid sha256:1f8cc9c945184f57b3b9ffb14862738dc82854de36bdcbe77fbcbbee7014df51
-size 55253
+size 52829
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f5c84abc6d12a54f3dd7051523c102417fa36e9db8e421864b52cdb20ffc21a5
+oid sha256:9d3f9ac2da64c6074721514cc8b93d4e1cf05240aea28fe690a1a6484f7a9443
-size 145593
+size 145926
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5620538b88038986494879e0fb49db89d8a82fca1de50c93acab7f298fda818c
+oid sha256:7817cbafd5804842146c99ee173439148de27f12383d31453e6bcb42efe0710a
-size 179479
+size 179448
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4b6063b23e3f3a1ac16c14db0b6d0ca45189e880e7c7de34b138f918c5fefcaf
+oid sha256:6a19c30026c415e7e9863fa0981aa2c099af74d3f5989080b5f30dfba1fc2a16
-size 90285
+size 88935
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9104741d13e518561bb9cd6f07af313b7792738dce2fb126a585c59a5a32d8dc
+oid sha256:78d88f95b904dde538144d3f4ea90367f7e43e19b67e523344d54f7f7fe5df4c
-size 131083
+size 128075
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:81ca7b9442295623fc21eea5afd83f0cac204d9fd8ca86647328826360fdefc9
+oid sha256:16254261843f052920c95d965b3016819e0d865412d5ba6de5f591a71d2c8fc3
-size 117316
+size 117347
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c7052a49f48fdddfcf22b3f5aeb988b54230ac320ef94e11aa14fe96c8615f34
+oid sha256:312f8605592eef5075c3da92d2f075b939da391ac1a41fdb0f025d1bc45478de
-size 122542
+size 122574
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a7095175971cf224ee4045652800321e36e94718f193789af69043d7ba589d17
+oid sha256:af249b371b990aa1d04a05ae9d9b008e7c5557281eaf22a9275902f909e9af7d
-size 57203
+size 56989
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9b79c11ae1dd903aae5830fed247d335d8c7409ae82d26000d0672e544bc0174
+oid sha256:f6fbce453be9a4de2ad06c5b09b549e9cc2f8295082f69245f555838ee290f50
-size 69993
+size 69272
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:88c6b4ddbcda80a92f0f42ff241bb92bc32ed642beaa9bd667655fbc71380e33
+oid sha256:4ed9a41aee39af26d15a6029ca234752bc6ce05c657bc823cf872f6f6f96c6fa
-size 122666
+size 122692
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:29cc935180f3967ff9a11ba3e967b81d7248b5442547f02d9fac844f53bd6292
+oid sha256:18ce471267234a27ac322548545205dbfa765b167280d4315062235f0805c21d
-size 132801
+size 132827
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b70f54a76e97351420b330b2b23b1567c827973612d4881f109377d1868d4018
+oid sha256:fb8d177b329c8dfa85e33d01790f5086aebe98e12f6743aca82ff20ce8d231a9
-size 64561
+size 62075
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:617d384052549a794f9530a32f1e5c0a2239443510c3f46eb26a154f2e48e6d3
+oid sha256:4b9912afa328dbd1cbc5867e2ce286799c230671d5403371381dc2ed55bdc2e0
-size 81968
+size 78024
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:603b6f8c086533095331795c24232d060195ed02bc88ab017f1bda3d470b4dff
+oid sha256:05f9fcaecd47a40388838e9fb89b4ae5d0c334ccc09a1578c724eed0993787fb
-size 98051
+size 98081
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:26a29170c097aa0aec2cf0703b3224ca8c6ca2ee16eae7510526d934f06a26ad
+oid sha256:44835ad6a27b78ade624a218a12df47e89e6737f7ebaae08d2c3ea50aea2afd1
-size 98921
+size 98950
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c37e1f5b12cb310a1424089cca81c5518cca62438f7a5343bc87904c3b4c478
+oid sha256:9341836edad19787c281a50d70ca70744424cc879d383eece89a36562dda01df
-size 40694
+size 40463
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:76229a011d00922969f395926094f5960cbcafb52cd5915777c677d497602a3d
+oid sha256:42fc1d64b9a59f7566e06a57352f5ad32af23a5a514d7a2e70682175ea516165
-size 45548
+size 44753
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f753efc6cd064a6dbf1103c0ea1eb66421f0e1ff8aa599a5958b0733abe08734
+oid sha256:07fae09a3a20ce971545fd95792e3592c17e2af485e331f204f5350ed1243345
-size 121097
+size 120885
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:259191c7197853363623fcce91daab86605fbebf6df977b7bd407b1b77680192
+oid sha256:8f44b8554f98120eafdd892bc41afe007e465a79048209fcd017d481ba05de9f
-size 137895
+size 134974
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83d9aede7b7aaa783b6bf4704d37657b11202b3615b75df7af51d6be349c83e3
+oid sha256:3f7ae09d71a161495e0119719e01ac1285ccc7b02674e1d95c6e5e401742eafc
-size 70833
+size 69245
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:65cf4f087295b729a33b4456f0b24d467258c99504848e816bd954e46a3fbc75
+oid sha256:34a723dfe74b456ba0dde2542ac582873de3e19ede6f34fac696b21faf3eddfa
-size 92026
+size 89499
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8a432248c65d9cada0b94910a773e51ee7404cab9f4c981bcf4fd4e51251e30b
+oid sha256:bfb9ecbf2f7813954edaa2c3598eaff6b7930c696589ca31d05bdaaf34cfef5a
-size 97952
+size 98024
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f4838f7ad294f71db8129e798423d907d466ae31e41bd30926ccc91b60e95e8
+oid sha256:f2d41a64de3d2cd3b92799c18fb4ee0e116c8d84c1da2447d7d818b03946c645
-size 145817
+size 145867
@@ -10,29 +10,27 @@ import SwiftUI
 /// Our standard screen header that includes a title and icon along with
 /// optional subtitle and button components.
 ///
-/// **Note:** By default this component includes the standard padding
+/// **Note:** In Figma this component includes some pre-defined padding
-/// specified in the Figma, however you may need to customise it using
+/// which this implementation doesn't include as it sometimes needs to be
-/// the `insets` parameter.
+/// changed and is generally easier to use global padding within the screen
 /// than it is to add/subtract additional padding to some arbitrary defaults.
 public struct TitleAndIcon: View {
    private let title: String
    private let subtitle: String?
    private let icon: KeyPath<CompoundIcons, Image>
    private let iconStyle: BigIcon.Style
    private let button: ButtonDetails?
    private let insets: EdgeInsets
    public init(title: String,
                subtitle: String? = nil,
                icon: KeyPath<CompoundIcons, Image>,
                iconStyle: BigIcon.Style,
-                button: ButtonDetails? = nil,
+                button: ButtonDetails? = nil) {
                insets: EdgeInsets = .init(top: 24, leading: 24, bottom: 40, trailing: 24)) {
        self.title = title
        self.subtitle = subtitle
        self.icon = icon
        self.iconStyle = iconStyle
        self.button = button
        self.insets = insets
    }
    public var body: some View {
@@ -58,7 +56,6 @@ public struct TitleAndIcon: View {
                    .buttonStyle(.compound(.tertiary, size: .small))
            }
        }
        .padding(insets)
    }
 }
@@ -83,7 +80,7 @@ public struct TitleAndIcon_Previews: PreviewProvider, TestablePreview {
    }
    public static var states: some View {
-        VStack(spacing: 20) {
+        VStack(spacing: 84) {
            TitleAndIcon(title: "Headline",
                         icon: \.circle,
                         iconStyle: .defaultSolid)
@@ -99,5 +96,7 @@ public struct TitleAndIcon_Previews: PreviewProvider, TestablePreview {
                         iconStyle: .defaultSolid,
                         button: .init(title: "Learn more") { })
        }
        .padding(24)
        .padding(.bottom, 16)
    }
 }