Refine SA channel UI spacing and layout

Sources/PaystackUI/Charge/CapitecPay/Views/CapitecPayAwaitingApprovalView.swift

@@ -53,23 +53,23 @@ struct CapitecPayAwaitingApprovalView: View {
             step("Tap on ", bold: "Capitec Pay")
             step("Tap on ", bold: "Pay", trailing: " to approve the payment")
         }
-        .padding(.doublePadding)
+        .padding(.horizontal,.doublePadding)
+        .padding(.vertical,.singlePadding)
         .frame(maxWidth: .infinity, alignment: .leading)
-        .background(Color.surfaceInsetTranslucent)
+        .background(Color.surfaceTertiary)
         .cornerRadius(.cornerRadius)
     }
 
     @ViewBuilder
     private func step(_ prefix: String, bold: String, trailing: String = "") -> some View {
-        HStack(alignment: .top, spacing: .singlePadding) {
+        HStack(alignment: .center, spacing: .singlePadding) {
             Circle()
                 .fill(Color.accentPrimary)
                 .frame(width: 6, height: 6)
-                .padding(.top, 8)
-            (Text(prefix).foregroundColor(.contentPrimary)
-             + Text(bold).foregroundColor(.contentPrimary).bold()
-             + Text(trailing).foregroundColor(.contentPrimary))
-                .font(.body14R)
+            (Text(prefix).font(.body14R)
+             + Text(bold).font(.body14M)
+             + Text(trailing).font(.body14R))
+                .foregroundColor(.contentPrimary)
                 .fixedSize(horizontal: false, vertical: true)
             Spacer(minLength: 0)
         }
@@ -85,7 +85,7 @@ struct CapitecPayAwaitingApprovalView: View {
                     .font(.body14M)
                     .foregroundColor(.contentSecondary)
             }
-            .padding(.vertical, .doublePadding)
+            .padding(.vertical, .singlePadding)
         } else {
             VStack(spacing: .singlePadding) {
                 HStack(spacing: 4) {
@@ -97,7 +97,7 @@ struct CapitecPayAwaitingApprovalView: View {
                 }
                 .font(.body14M)
             }
-            .padding(.vertical, .doublePadding)
+            .padding(.vertical, .singlePadding)
         }
     }
 }

Sources/PaystackUI/Charge/CapitecPay/Views/CapitecPayIdentifierEntryView.swift

@@ -30,7 +30,8 @@ struct CapitecPayIdentifierEntryView: View {
                           enabled: viewModel.isValid,
                           action: viewModel.submitIdentifier,
                           secondaryButtonText: "Change payment method",
-                          secondaryAction: onChangePaymentMethod) {
+                          secondaryAction: onChangePaymentMethod,
+                          layout: .fullWidth) {
                     identifierPicker
                     identifierField
                 }

Sources/PaystackUI/Charge/QR/Models/QRVariant.swift

@@ -34,7 +34,7 @@ enum QRVariant: String, Equatable {
     var showsQRReferenceRow: Bool {
         switch self {
         case .scanToPay:
-            return true
+            return false
         case .snapScan:
             return false
         }

Sources/PaystackUI/Charge/QR/Views/QRDisplayView.swift

@@ -56,7 +56,7 @@ struct QRDisplayView: View {
 
     private var qrCodeBlock: some View {
         QRCodeImage(url: details.qrImageURL)
-            .frame(width: 220, height: 220)
+            .frame(width: 180, height: 180)
             .padding(.singlePadding)
             .background(Color.qrPlate)
             .overlay(

Sources/PaystackUI/Components/Form/FormInput.swift

@@ -13,12 +13,14 @@ struct FormInput<Content: View,
     var buttonEnabled: Bool
     var secondaryButtonText: String
     var secondaryAction: (() -> Void)?
+    var layout: FormInputLayout
 
     init(title: String = "Submit",
          enabled: Bool = true,
          action: @escaping () async -> Void,
          secondaryButtonText: String = "Cancel",
          secondaryAction: (() -> Void)? = nil,
+         layout: FormInputLayout = .standard,
          supplementaryContent: SupplementaryContent,
          @FormInputDataBuilder content: () -> FormInputData<Content>) {
         let content = content()
@@ -27,6 +29,7 @@ struct FormInput<Content: View,
         self.buttonEnabled = enabled
         self.secondaryButtonText = secondaryButtonText
         self.secondaryAction = secondaryAction
+        self.layout = layout
         self.supplementaryContent = supplementaryContent
         self._viewModel = StateObject(wrappedValue: FormInputViewModel(action: action))
     }
@@ -36,6 +39,7 @@ struct FormInput<Content: View,
          action: @escaping () async -> Void,
          secondaryButtonText: String = "Cancel",
          secondaryAction: (() -> Void)? = nil,
+         layout: FormInputLayout = .standard,
          @FormInputDataBuilder content: () -> FormInputData<Content>)
     where SupplementaryContent == EmptyView {
         let content = content()
@@ -44,19 +48,20 @@ struct FormInput<Content: View,
         self.buttonEnabled = enabled
         self.secondaryButtonText = secondaryButtonText
         self.secondaryAction = secondaryAction
+        self.layout = layout
         self.supplementaryContent = nil
         self._viewModel = StateObject(wrappedValue: FormInputViewModel(action: action))
     }
 
     var body: some View {
-        VStack(spacing: .doublePadding) {
+        VStack(spacing: layout.spacing) {
             formData.content
 
             Button(buttonTitle, action: submit)
                 .buttonStyle(PrimaryButtonStyle(showLoading: viewModel.showLoading))
                 .disabled(!buttonEnabled)
-                .padding(.horizontal, .doublePadding)
-                .padding(.top, .singlePadding)
+                .padding(.horizontal, layout.buttonHorizontalInset)
+                .padding(.top, layout.buttonTopSpacing)
 
             if let supplementaryContent = supplementaryContent,
                !viewModel.showLoading {
@@ -68,7 +73,7 @@ struct FormInput<Content: View,
                 Button(secondaryButtonText, action: secondaryAction)
                     .foregroundColor(.contentSecondary)
                     .font(.body14M)
-                    .padding(.top, .singlePadding)
+                    .padding(.top, layout.secondaryButtonTopSpacing)
             }
         }
         .disabled(viewModel.showLoading)

Sources/PaystackUI/Components/Form/FormInputLayout.swift

@@ -0,0 +1,22 @@
+import SwiftUI
+
+
+struct FormInputLayout {
+
+    let spacing: CGFloat
+    let buttonHorizontalInset: CGFloat
+    let buttonTopSpacing: CGFloat
+    let secondaryButtonTopSpacing: CGFloat
+
+    static let standard = FormInputLayout(
+        spacing: .doublePadding,
+        buttonHorizontalInset: .doublePadding,
+        buttonTopSpacing: .singlePadding,
+        secondaryButtonTopSpacing: .singlePadding)
+
+    static let fullWidth = FormInputLayout(
+        spacing: .doublePadding,
+        buttonHorizontalInset: 0,
+        buttonTopSpacing: 0,
+        secondaryButtonTopSpacing: 0)
+}

Sources/PaystackUI/Design/DarkModePreviews.swift

@@ -101,8 +101,8 @@ enum DarkModePalette {
     static let semanticSurfaces: [SwatchEntry] = [
         .init("surfacePrimary", .surfacePrimary, notes: "Sheet root"),
         .init("surfaceSecondary", .surfaceSecondary, notes: "Filled inset chip"),
-        .init("surfaceTertiary", .surfaceTertiary, notes: "Deepest surface (reserved)"),
-        .init("surfaceInsetTranslucent", .surfaceInsetTranslucent, notes: "Capitec stepsCard"),
+        .init("surfaceTertiary", .surfaceTertiary, notes: "Capitec stepsCard"),
+        .init("surfaceInsetTranslucent", .surfaceInsetTranslucent, notes: "Reserved — no current site"),
         .init("overlayScrim", .overlayScrim, notes: "Reserved — no current site")
     ]
 

Tests/PaystackSDKTests/UI/Charge/QRRepository/QRRepositoryImplementationTests.swift

@@ -39,7 +39,7 @@ final class QRRepositoryImplementationTests: PSTestCase {
             channelOption: "MPASS_OLTI",
             variant: .scanToPay)
 
-        XCTAssertEqual(result.qrReference, "1490884538")
+        XCTAssertEqual(result.qrReference, nil)
         XCTAssertEqual(result.pusherChannel, "api_mpass_olti_qr_51826223921246")
     }