[Woo POS][Design System] Consolidate corner radius style (#15132)

Author: jaclync

WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift

@@ -121,7 +121,7 @@ private extension CardReaderConnectionStatusView {
         static let font = POSFontStyle.posBodyMediumRegular()
         static let horizontalPadding: CGFloat = 24
         static let disconnectedBorderAndContentSpacing: CGFloat = 16
-        static let disconnectedBorderCornerRadius: CGFloat = 4
+        static let disconnectedBorderCornerRadius: CGFloat = POSCornerRadiusStyle.small.value
         static let disconnectedBorderWidth: CGFloat = 2
         static let disconnectedBorderInset: CGFloat = 8
     }

WooCommerce/Classes/POS/Presentation/Item Selector/GhostItemCardView.swift

@@ -31,7 +31,7 @@ private extension GhostItemCardView {
 
     enum Layout {
         static let placeholderHeight: CGFloat = 36
-        static let cornerRadius: CGFloat = 8
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
     }
 }
 

WooCommerce/Classes/POS/Presentation/ItemListView.swift

@@ -180,7 +180,7 @@ private extension ItemListView {
     enum Constants {
         static let bannerTitleFont: POSFontStyle = .posBodyLargeBold
         static let bannerSubtitleFont: POSFontStyle = .posBodySmallRegular()
-        static let bannerCornerRadius: CGFloat = 8
+        static let bannerCornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
         static let bannerVerticalPadding: CGFloat = 26
         static let bannerTextSpacing: CGFloat = 4
         static let bannerTitleSpacing: CGFloat = 8

WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift

@@ -104,7 +104,7 @@ extension POSFloatingControlView {
 private extension POSFloatingControlView {
     enum Constants {
         static let size: CGFloat = 80
-        static let cornerRadius: CGFloat = 8
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
     }
 
     enum Localization {

WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift

@@ -29,7 +29,7 @@ struct POSReceiptEligibilityBanner: View {
 private extension POSReceiptEligibilityBanner {
     enum Constants {
         static let elementSpacing: CGFloat = 8
-        static let cornerRadius: CGFloat = 20
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value
         static let imagesize: CGFloat = 40
         static let imagePadding: CGFloat = 4
         static let bannerPadding: CGFloat = 16
@@ -42,3 +42,8 @@ private extension POSReceiptEligibilityBanner {
             comment: "Text for the banner requiring specific WooCommerce version.")
     }
 }
+
+#Preview {
+    POSReceiptEligibilityBanner(isVisible: .constant(true))
+        .padding()
+}

WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift

@@ -137,7 +137,7 @@ private struct POSButton: View {
 
 private extension POSButton {
     enum Constants {
-        static let cornerRadius: CGFloat = 8.0
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
         static let borderStrokeWidth: CGFloat = 2.0
     }
 }

WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift

@@ -28,19 +28,19 @@ struct POSConnectivityView: View {
     @ViewBuilder private var noConnectionBanner: some View {
         HStack(spacing: Constants.spacing) {
             Image(systemName: "wifi.exclamationmark")
-                .foregroundColor(Color(.text.inverted))
+                .foregroundColor(Color.posOnSecondaryContainer)
                 .font(.posBodySmallBold)
 
             Text(Localization.title)
-                .foregroundColor(Color(.text.inverted))
+                .foregroundColor(Color.posOnSecondaryContainer)
                 .font(.posBodySmallBold)
         }
         .padding(.vertical, Constants.verticalPadding)
         .padding(.horizontal, Constants.horizontalPadding)
         .frame(minHeight: Constants.height)
-        .background(Color(.systemGray6.inverted))
+        .background(Color.posSecondaryContainer)
         .cornerRadius(Constants.cornerRadius)
-        .shadow(color: Color.black.opacity(0.2), radius: 8, x: 0, y: 2)
+        .shadow(color: Color.posShadow.opacity(0.2), radius: 8, x: 0, y: 2)
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
     }
 
@@ -51,7 +51,7 @@ struct POSConnectivityView: View {
 
 private extension POSConnectivityView {
     enum Constants {
-        static let cornerRadius: CGFloat = 16
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value
         static let height: CGFloat = 64
         static let spacing: CGFloat = 16
         static let horizontalPadding: CGFloat = 24
@@ -67,3 +67,8 @@ private extension POSConnectivityView {
         )
     }
 }
+
+#Preview {
+    // To enable preview, set `isVisible` to `true` and comment out `onAppear` block.
+    POSConnectivityView()
+}

WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemCardBorderStylesModifier.swift

@@ -15,7 +15,7 @@ struct POSItemCardBorderStylesModifier: ViewModifier {
 
 private extension POSItemCardBorderStylesModifier {
     enum Constants {
-        static let cardCornerRadius: CGFloat = 8.0
+        static let cardCornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
         // The use of stroke means the shape is rendered as an outline (border) rather than a filled shape,
         // since we still have to give it a value, we use 0 so it renders no border but it's shaped as one.
         static let nilOutline: CGFloat = 0

WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift

@@ -26,7 +26,7 @@ struct POSRootModalViewModifier: ViewModifier {
                 ZStack {
                     modalManager.getContent()
                         .background(Color.posSurfaceBright)
-                        .cornerRadius(24)
+                        .cornerRadius(POSCornerRadiusStyle.extraLarge.value)
                         .shadow(color: Color.posShadow.opacity(0.02), radius: 43, x: 0, y: 50) // 0px 50px 43px 0px #00000005
                         .shadow(color: Color.posShadow.opacity(0.04), radius: 36, x: 0, y: 30) // 0px 30px 36px 0px #0000000A
                         .shadow(color: Color.posShadow.opacity(0.07), radius: 27, x: 0, y: 15) // 0px 15px 27px 0px #00000012

WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift

@@ -73,7 +73,7 @@ private extension SimpleProductsOnlyInformation {
         static let modalContentPadding: CGFloat = 40
         static let hintVerticalPadding: CGFloat = 24
         static let hintHorizontalPadding: CGFloat = 40
-        static let hintBackgroundCornerRadius: CGFloat = 8
+        static let hintBackgroundCornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
         static let contentBlockSpacing: CGFloat = 40
         static let textSpacing: CGFloat = 16
         static let textToModalBottomPadding: CGFloat = 8