background consistency dark mode

Author: iamgabrielma

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift

@@ -25,6 +25,10 @@ struct PointOfSaleSettingsHardwareDetailView: View {
         }
     }
 
+    private var backgroundColor: Color {
+        Color.posOnSecondaryContainer
+    }
+
     var body: some View {
         NavigationStack(path: $navigationPath) {
             POSPageHeaderView(title: Localization.hardwareTitle)
@@ -48,7 +52,7 @@ struct PointOfSaleSettingsHardwareDetailView: View {
             }
             .listStyle(.plain)
             .scrollContentBackground(.hidden)
-            .background(Color.posOnPrimaryContainer)
+            .background(backgroundColor)
             .listRowBackground(Color.clear)
             .listRowSeparator(.hidden)
             .navigationDestination(for: NavigationDestination.self) { destination in
@@ -123,7 +127,7 @@ struct PointOfSaleSettingsHardwareDetailView: View {
             .listStyle(.plain)
             .scrollContentBackground(.hidden)
             .listRowBackground(Color.clear)
-            .background(Color.posSurfaceBright)
+            .background(backgroundColor)
             .foregroundColor(.posOnSurface)
         }
         .navigationBarBackButtonHidden(true)
@@ -142,6 +146,7 @@ struct PointOfSaleSettingsHardwareDetailView: View {
                 }
             }
         }
+        .toolbarBackground(backgroundColor, for: .navigationBar)
         .posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
             SafariView(url: WooConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
         }
@@ -170,7 +175,7 @@ struct PointOfSaleSettingsHardwareDetailView: View {
         .listStyle(.plain)
         .scrollContentBackground(.hidden)
         .listRowBackground(Color.clear)
-        .background(Color.posSurfaceBright)
+        .background(backgroundColor)
         .foregroundColor(.posOnSurface)
         .navigationBarBackButtonHidden(true)
         .toolbar {
@@ -188,6 +193,7 @@ struct PointOfSaleSettingsHardwareDetailView: View {
                 }
             }
         }
+        .toolbarBackground(backgroundColor, for: .navigationBar)
     }
 
 }

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift

@@ -9,6 +9,10 @@ struct PointOfSaleSettingsStoreDetailView: View {
         self.viewModel = viewModel
     }
 
+    private var backgroundColor: Color {
+        Color.posOnSecondaryContainer
+    }
+
     var body: some View {
         NavigationStack {
             List {
@@ -31,10 +35,17 @@ struct PointOfSaleSettingsStoreDetailView: View {
                     }
                     .listRowSeparator(.hidden)
                 } header: {
-                    Text(Localization.storeInformation)
-                        .font(.posHeadingBold)
-                        .foregroundStyle(.primary)
-                        .textCase(nil)
+                    ZStack {
+                        backgroundColor
+                        Text(Localization.storeInformation)
+                            .font(.posHeadingBold)
+                            .foregroundColor(.posOnSurface)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                            .padding(.horizontal, POSPadding.medium)
+                            .padding(.vertical, POSPadding.small)
+                            .textCase(nil)
+                    }
+                    .listRowInsets(EdgeInsets())
                 }
 
                 Section {
@@ -73,16 +84,23 @@ struct PointOfSaleSettingsStoreDetailView: View {
                     }
                     .listRowSeparator(.hidden)
                 } header: {
-                    Text(Localization.receiptInformation)
-                        .font(.posHeadingBold)
-                        .foregroundStyle(.primary)
-                        .textCase(nil)
+                    ZStack {
+                        backgroundColor
+                        Text(Localization.receiptInformation)
+                            .font(.posHeadingBold)
+                            .foregroundColor(.posOnSurface)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                            .padding(.horizontal, POSPadding.medium)
+                            .padding(.vertical, POSPadding.small)
+                            .textCase(nil)
+                    }
+                    .listRowInsets(EdgeInsets())
                 }
                 .renderedIf(viewModel.shouldShowReceiptInformation)
             }
             .listStyle(.plain)
             .scrollContentBackground(.hidden)
-            .background(Color.posOnPrimaryContainer)
+            .background(backgroundColor)
             .listRowSeparator(.hidden)
             .listSectionSeparator(.hidden)
             .task {