adjust sync banner (#2355)

Task/Issue URL: https://app.asana.com/0/38424471409662/1206221852119331/f Description: Adjust banner according to comment in task (centre box and non capitalised)
duckduckgo · Jan 18, 2024 · 9230ce8 · 9230ce8
1 parent 2093b69
commit 9230ce8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncSettingsView.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncSettingsView.swift
@@ -43,10 +43,8 @@ public struct SyncSettingsView: View {
                     }
                 }
         } else {
+            rolloutBanner()
             List {
-
-                rolloutBanner()
-
                 if model.isSyncEnabled {
 
                     syncUnavailableViewWhileLoggedIn()
@@ -76,7 +74,6 @@ public struct SyncSettingsView: View {
                     syncWithAnotherDeviceView()
 
                     otherOptions()
-
                 }
             }
             .navigationTitle(UserText.syncTitle)

diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncSettingsViewExtension.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncSettingsViewExtension.swift
@@ -306,19 +306,18 @@ extension SyncSettingsView {
 
     @ViewBuilder
     func rolloutBanner() -> some View {
-        Section {
-            EmptyView()
-        } header: {
-            HStack(alignment: .top, spacing: 16) {
-                Image("Info-Color-16")
-                Text(UserText.syncRollOutBannerDescription)
-                    .font(.system(size: 12))
-                    .foregroundColor(.primary)
-            }
-            .padding()
-            .background(RoundedRectangle(cornerRadius: 8).foregroundColor(Color("RolloutBannerBackground")))
-            .padding(.bottom, 10)
+        HStack(alignment: .top, spacing: 16) {
+            Image("Info-Color-16")
+            Text(UserText.syncRollOutBannerDescription)
+                .font(.system(size: 12))
+                .foregroundColor(.primary)
+                .multilineTextAlignment(.leading)
+                .fixedSize(horizontal: false, vertical: true)
         }
+        .padding()
+        .background(RoundedRectangle(cornerRadius: 8).foregroundColor(Color("RolloutBannerBackground")))
+        .padding(.bottom, 10)
+        .padding(.horizontal, 14)
     }
 
     enum LimitedItemType {