[PM-21617] Update navigation bar style (#1674)

Author: matt-livefront

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

@@ -212,4 +212,34 @@ extension View {
             saveToolbarButton(action: action)
         }
     }
+
+    /// A `ToolbarContent` that adjusts the navigation bar to display a large title on the leading
+    /// edge of the navigation bar and hides the centered title. This has the appearance of a large
+    /// title navigation bar without the extra padding above the title and overall hight similar to
+    /// an inline navigation bar title.
+    ///
+    /// - Parameters:
+    ///   - title: The navigation bar's title.
+    ///   - hidden: Whether the navigation bar updates should be hidden.
+    /// - Returns: A `ToolbarContent` that adjusts the navigation bar to display a large title on
+    ///     the leading edge.
+    ///
+    @ToolbarContentBuilder
+    func largeNavigationTitleToolbarItem(_ title: String, hidden: Bool = false) -> some ToolbarContent {
+        ToolbarItem(placement: .topBarLeading) {
+            if !hidden {
+                Text(title)
+                    .styleGuide(.largeTitle, weight: .semibold)
+                    .accessibilityAddTraits(.isHeader)
+            }
+        }
+
+        ToolbarItem(placement: .principal) {
+            if !hidden {
+                // Hide the centered navigation title view with an empty view.
+                Text("")
+                    .accessibilityHidden(true)
+            }
+        }
+    }
 }

BitwardenShared/UI/Platform/Settings/Settings/SettingsView.swift

@@ -15,14 +15,16 @@ struct SettingsView: View {
     var body: some View {
         settingsItems
             .scrollView()
-            .navigationBar(
-                title: Localizations.settings,
-                titleDisplayMode: store.state.presentationMode == .preLogin ? .inline : .large
-            )
+            .navigationBar(title: Localizations.settings, titleDisplayMode: .inline)
             .toolbar {
                 closeToolbarItem(hidden: store.state.presentationMode != .preLogin) {
                     store.send(.dismiss)
                 }
+
+                largeNavigationTitleToolbarItem(
+                    Localizations.settings,
+                    hidden: store.state.presentationMode != .tab
+                )
             }
     }
 

BitwardenShared/UI/Platform/Settings/Settings/__Snapshots__/SettingsViewTests/test_settingsView_badges.1.png

@@ -128,23 +128,23 @@ final class TabCoordinator: Coordinator, HasTabNavigator {
         rootNavigator.show(child: tabNavigator)
 
         let vaultNavigator = module.makeNavigationController()
-        vaultNavigator.navigationBar.prefersLargeTitles = true
+        vaultNavigator.navigationBar.prefersLargeTitles = false
         vaultNavigator.navigationBar.accessibilityIdentifier = "MainHeaderBar"
         vaultCoordinator = module.makeVaultCoordinator(
             delegate: vaultDelegate,
             stackNavigator: vaultNavigator
         )
 
         let sendNavigator = module.makeNavigationController()
-        sendNavigator.navigationBar.prefersLargeTitles = true
+        sendNavigator.navigationBar.prefersLargeTitles = false
         sendNavigator.navigationBar.accessibilityIdentifier = "MainHeaderBar"
         sendCoordinator = module.makeSendCoordinator(
             stackNavigator: sendNavigator
         )
         sendCoordinator?.start()
 
         let generatorNavigator = module.makeNavigationController()
-        generatorNavigator.navigationBar.prefersLargeTitles = true
+        generatorNavigator.navigationBar.prefersLargeTitles = false
         generatorNavigator.navigationBar.accessibilityIdentifier = "MainHeaderBar"
         // Remove the hairline divider under the navigation bar to make it appear that the segmented
         // control is part of the navigation bar.
@@ -156,7 +156,7 @@ final class TabCoordinator: Coordinator, HasTabNavigator {
         generatorCoordinator?.start()
 
         let settingsNavigator = module.makeNavigationController()
-        settingsNavigator.navigationBar.prefersLargeTitles = true
+        settingsNavigator.navigationBar.prefersLargeTitles = false
         settingsNavigator.navigationBar.accessibilityIdentifier = "MainHeaderBar"
         let settingsCoordinator = module.makeSettingsCoordinator(
             delegate: settingsDelegate,

BitwardenShared/UI/Platform/Settings/Settings/__Snapshots__/SettingsViewTests/test_settingsView_badges.2.png

@@ -77,8 +77,7 @@ struct GeneratorView: View {
             }
             .coordinateSpace(name: "generatorView")
             .background(Asset.Colors.backgroundPrimary.swiftUIColor)
-            .navigationBarTitleDisplayMode(store.state.presentationMode == .inPlace ? .inline : .large)
-            .navigationTitle(Localizations.generator)
+            .navigationBar(title: Localizations.generator, titleDisplayMode: .inline)
             .task { await store.perform(.appeared) }
             .onChange(of: focusedFieldKeyPath) { newValue in
                 store.send(.textFieldFocusChanged(keyPath: newValue))
@@ -96,6 +95,11 @@ struct GeneratorView: View {
                     }
                 }
 
+                largeNavigationTitleToolbarItem(
+                    Localizations.generator,
+                    hidden: store.state.presentationMode != .tab
+                )
+
                 ToolbarItemGroup(placement: .topBarTrailing) {
                     if store.state.presentationMode.isSelectButtonVisible {
                         toolbarButton(Localizations.select) {

BitwardenShared/UI/Platform/Settings/Settings/__Snapshots__/SettingsViewTests/test_settingsView_badges.3.png

@@ -226,12 +226,14 @@ struct SendListView: View {
             .refreshable { [weak store] in
                 await store?.perform(.refresh)
             }
-            .navigationBar(
-                title: store.state.navigationTitle,
-                titleDisplayMode: store.state.type == nil ? .large : .inline
-            )
+            .navigationBar(title: store.state.navigationTitle, titleDisplayMode: .inline)
             .toolbar {
-                ToolbarItem(placement: .navigationBarLeading) {
+                largeNavigationTitleToolbarItem(
+                    store.state.navigationTitle,
+                    hidden: store.state.type != nil
+                )
+
+                ToolbarItem(placement: .topBarTrailing) {
                     if !store.state.isInfoButtonHidden {
                         Button {
                             store.send(.infoButtonPressed)

BitwardenShared/UI/Platform/Settings/Settings/__Snapshots__/SettingsViewTests/test_viewRender.1.png

@@ -350,10 +350,11 @@ struct VaultListView: View {
             }
             profileSwitcher
         }
-        .navigationTitle(store.state.navigationTitle)
-        .navigationBarTitleDisplayMode(.large)
+        .navigationBar(title: store.state.navigationTitle, titleDisplayMode: .inline)
         .toolbar {
-            ToolbarItem(placement: .navigationBarLeading) {
+            largeNavigationTitleToolbarItem(store.state.navigationTitle)
+
+            ToolbarItem(placement: .topBarTrailing) {
                 ProfileSwitcherToolbarView(
                     store: store.child(
                         state: { state in