PM-14175 - Replace vault illustration on create account screen

BitwardenShared/UI/Auth/StartRegistration/StartRegistrationView.swift

@@ -16,54 +16,42 @@ struct StartRegistrationView: View {
     // MARK: View
 
     var body: some View {
-        VStack(spacing: 16) {
-            if store.state.isCreateAccountFeatureFlagEnabled {
-                Image(decorative: Asset.Images.Illustrations.vault)
-                    .resizable()
-                    .frame(width: 132, height: 132)
-                    .padding(.top, 24)
-                    .padding(.bottom, 32)
+        mainContent
+            .navigationBar(
+                title: Localizations.createAccount,
+                titleDisplayMode: .inline
+            )
+            .task {
+                await store.perform(.appeared)
             }
-
-            name
-
-            VStack(alignment: .leading, spacing: 0) {
-                email
-                    .padding(.bottom, 8)
-
-                RegionSelector(
-                    selectorLabel: Localizations.creatingOn,
-                    regionName: store.state.region.baseUrlDescription
-                ) {
-                    await store.perform(.regionTapped)
+            .toolbar {
+                cancelToolbarItem {
+                    store.send(.dismiss)
                 }
             }
+            .toast(
+                store.binding(
+                    get: \.toast,
+                    send: StartRegistrationAction.toastShown
+                )
+            )
+    }
 
-            receiveMarketingToggle
-
-            continueButton
+    // MARK: Private views
 
-            termsAndPrivacyText
-                .frame(maxWidth: .infinity)
-        }
-        .navigationBar(title: Localizations.createAccount, titleDisplayMode: .inline)
-        .scrollView()
-        .task {
-            await store.perform(.appeared)
-        }
-        .toolbar {
-            cancelToolbarItem {
-                store.send(.dismiss)
+    /// The button pressed when the user attempts to create the account.
+    private var continueButton: some View {
+        Button {
+            Task {
+                await store.perform(.startRegistration)
             }
+        } label: {
+            Text(Localizations.continue)
         }
-        .toast(store.binding(
-            get: \.toast,
-            send: StartRegistrationAction.toastShown
-        ))
+        .accessibilityIdentifier("ContinueButton")
+        .buttonStyle(.primary())
     }
 
-    // MARK: Private views
-
     /// The text fields for the user's email and password.
     private var email: some View {
         BitwardenTextField(
@@ -77,6 +65,30 @@ struct StartRegistrationView: View {
         .textFieldConfiguration(.email)
     }
 
+    /// The main content view that displays a scrollable layout of registration details.
+    private var mainContent: some View {
+        GeometryReader { proxy in
+            VStack(spacing: 0) {
+                if store.state.isCreateAccountFeatureFlagEnabled {
+                    Spacer(minLength: 24)
+
+                    Image(decorative: Asset.Images.logo)
+                        .resizable()
+                        .scaledToFit()
+                        .foregroundColor(Asset.Colors.iconSecondary.swiftUIColor)
+                        .frame(maxWidth: .infinity, maxHeight: 34)
+                        .padding(.horizontal, 12)
+
+                    Spacer(minLength: 24)
+                }
+
+                registrationDetails
+            }
+            .frame(minHeight: store.state.isCreateAccountFeatureFlagEnabled ? proxy.size.height : 0)
+            .scrollView(showsIndicators: false)
+        }
+    }
+
     /// The text fields for the user's email and password.
     private var name: some View {
         BitwardenTextField(
@@ -90,29 +102,6 @@ struct StartRegistrationView: View {
         .textFieldConfiguration(.username)
     }
 
-    /// The button pressed when the user attempts to create the account.
-    private var continueButton: some View {
-        Button {
-            Task {
-                await store.perform(.startRegistration)
-            }
-        } label: {
-            Text(Localizations.continue)
-        }
-        .accessibilityIdentifier("ContinueButton")
-        .buttonStyle(.primary())
-    }
-
-    /// The button pressed when the user attempts to create the account.
-    private var termsAndPrivacyText: some View {
-        Text(LocalizedStringKey(store.state.termsAndPrivacyDisclaimerText))
-            .styleGuide(.footnote)
-            .tint(Asset.Colors.textInteraction.swiftUIColor)
-            .foregroundColor(Asset.Colors.textPrimary.swiftUIColor)
-            .padding([.bottom], 32)
-            .multilineTextAlignment(.center)
-    }
-
     /// A toggle for the terms and privacy agreement.
     @ViewBuilder private var receiveMarketingToggle: some View {
         if store.state.showReceiveMarketingToggle {
@@ -131,6 +120,40 @@ struct StartRegistrationView: View {
             .id(ViewIdentifier.StartRegistration.receiveMarketing)
         }
     }
+
+    /// The section of the view containing input fields, and action buttons.
+    private var registrationDetails: some View {
+        VStack(spacing: 16) {
+            name
+
+            VStack(alignment: .leading, spacing: 0) {
+                email
+                    .padding(.bottom, 8)
+
+                RegionSelector(
+                    selectorLabel: Localizations.creatingOn,
+                    regionName: store.state.region.baseUrlDescription
+                ) {
+                    await store.perform(.regionTapped)
+                }
+            }
+
+            receiveMarketingToggle
+            continueButton
+            termsAndPrivacyText
+                .frame(maxWidth: .infinity)
+        }
+    }
+
+    /// The button pressed when the user attempts to create the account.
+    private var termsAndPrivacyText: some View {
+        Text(LocalizedStringKey(store.state.termsAndPrivacyDisclaimerText))
+            .styleGuide(.footnote)
+            .tint(Asset.Colors.textInteraction.swiftUIColor)
+            .foregroundColor(Asset.Colors.textPrimary.swiftUIColor)
+            .padding([.bottom], 32)
+            .multilineTextAlignment(.center)
+    }
 }
 
 // MARK: Previews

BitwardenShared/UI/Auth/StartRegistration/StartRegistrationViewTests.swift

@@ -99,7 +99,7 @@ class StartRegistrationViewTests: BitwardenTestCase {
     @MainActor
     func test_snapshot_nativeCreateAccountFeatureFlag() {
         processor.state.isCreateAccountFeatureFlagEnabled = true
-        assertSnapshot(of: subject, as: .defaultPortrait)
+        assertSnapshots(of: subject, as: [.defaultPortrait, .defaultPortraitDark])
     }
 
     /// Tests the view renders correctly when the text fields are all populated.

BitwardenShared/UI/Platform/Application/Appearance/Modifiers/ScrollViewModifier.swift

@@ -13,10 +13,13 @@
     /// The background color to apply to the scroll view.
     var backgroundColor: Color
 
+    /// Whether or not to show the scrolling indicators .
+    var showsIndicators = true
+
     // MARK: View
 
     func body(content: Content) -> some View {
-        ScrollView {
+        ScrollView(showsIndicators: showsIndicators) {
             content
                 .padding(.horizontal, 16)
                 .padding([.top, .bottom], addVerticalPadding ? 16 : 0)

BitwardenShared/UI/Platform/Application/Extensions/View.swift

@@ -118,11 +118,13 @@ extension View {
     ///
     func scrollView(
         addVerticalPadding: Bool = true,
-        backgroundColor: Color = Asset.Colors.backgroundPrimary.swiftUIColor
+        backgroundColor: Color = Asset.Colors.backgroundPrimary.swiftUIColor,
+        showsIndicators: Bool = true
     ) -> some View {
         modifier(ScrollViewModifier(
             addVerticalPadding: addVerticalPadding,
-            backgroundColor: backgroundColor
+            backgroundColor: backgroundColor,
+            showsIndicators: showsIndicators
         ))
     }