update help view to use POSSettingsCard

Author: iamgabrielma

Modules/Sources/PointOfSale/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift

@@ -2,100 +2,53 @@ import SwiftUI
 import struct WooFoundation.SafariView
 
 struct PointOfSaleSettingsHelpDetailView: View {
-    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @Environment(\.posExternalViews) private var externalViews
 
     @State private var showProductRestrictions = false
     @State private var showDocumentation = false
     @State private var showSupport = false
 
     private var backgroundColor: Color {
-        Color.posOnSecondaryContainer
+        Color.posSurface
     }
 
     var body: some View {
         NavigationStack {
-            POSPageHeaderView(title: Localization.helpTitle)
-            .foregroundColor(.posSurface)
-            .accessibilityAddTraits(.isHeader)
-            List {
-                Button {
-                    showProductRestrictions = true
-                } label: {
-                    HStack(spacing: POSSpacing.medium) {
-                        Image(systemName: "magnifyingglass")
-                            .font(.posBodyLargeRegular())
-                            .accessibilityHidden(true)
-                            .renderedIf(!dynamicTypeSize.isAccessibilitySize)
-                        VStack(alignment: .leading, spacing: POSPadding.xSmall) {
-                            Text(Localization.productRestrictionsInfo)
-                                .font(.posBodyLargeRegular())
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                            Text(Localization.productRestrictionsInfoSubtitle)
-                                .font(.posBodyMediumRegular())
-                                .foregroundStyle(.secondary)
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                        }
-                        Spacer()
+            VStack(spacing: POSSpacing.none) {
+                POSPageHeaderView(title: Localization.helpTitle)
+                    .foregroundColor(.posSurface)
+                    .accessibilityAddTraits(.isHeader)
+
+                ScrollView {
+                    VStack(spacing: POSSpacing.small) {
+                        POSSettingsCard(
+                            title: Localization.productRestrictionsInfo,
+                            subtitle: Localization.productRestrictionsInfoSubtitle,
+                            action: {
+                                showProductRestrictions = true
+                            }
+                        )
+
+                        POSSettingsCard(
+                            title: Localization.documentationTitle,
+                            subtitle: Localization.documentationSubtitle,
+                            action: {
+                                showDocumentation = true
+                            }
+                        )
+
+                        POSSettingsCard(
+                            title: Localization.getSupportTitle,
+                            subtitle: Localization.getSupportSubtitle,
+                            action: {
+                                showSupport = true
+                            }
+                        )
                     }
+                    .padding(.horizontal, POSPadding.medium)
                 }
-                .accessibilityAddTraits(.isButton)
-                .listRowSeparator(.hidden)
-                .buttonStyle(.plain)
-
-                Button {
-                    showDocumentation = true
-                } label: {
-                    HStack(spacing: POSSpacing.medium) {
-                        Image(systemName: "doc.text")
-                            .font(.posBodyLargeRegular())
-                            .accessibilityHidden(true)
-                            .renderedIf(!dynamicTypeSize.isAccessibilitySize)
-                        VStack(alignment: .leading, spacing: POSPadding.xSmall) {
-                            Text(Localization.documentationTitle)
-                                .font(.posBodyLargeRegular())
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                            Text(Localization.documentationSubtitle)
-                                .font(.posBodyMediumRegular())
-                                .foregroundStyle(.secondary)
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                        }
-                        Spacer()
-                    }
-                }
-                .accessibilityAddTraits(.isButton)
-                .listRowSeparator(.hidden)
-                .buttonStyle(.plain)
-
-                Button {
-                    showSupport = true
-                } label: {
-                    HStack(spacing: POSSpacing.medium) {
-                        Image(systemName: "questionmark")
-                            .font(.posBodyLargeRegular())
-                            .accessibilityHidden(true)
-                            .renderedIf(!dynamicTypeSize.isAccessibilitySize)
-                        VStack(alignment: .leading, spacing: POSPadding.xSmall) {
-                            Text(Localization.getSupportTitle)
-                                .font(.posBodyLargeRegular())
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                            Text(Localization.getSupportSubtitle)
-                                .font(.posBodyMediumRegular())
-                                .foregroundStyle(.secondary)
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                        }
-                        Spacer()
-                    }
-                }
-                .accessibilityAddTraits(.isButton)
-                .listRowSeparator(.hidden)
-                .buttonStyle(.plain)
             }
-            .listStyle(.plain)
-            .scrollContentBackground(.hidden)
             .background(backgroundColor)
-            .listRowBackground(Color.clear)
-            .listRowSeparator(.hidden)
         }
         .posModal(isPresented: $showProductRestrictions) {
             // TODO: Remove copy on POSFloatingControlView.documentationView