Update design to add a border with 8px inset for disconnected reader state.

Author: jaclync

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

@@ -46,16 +46,14 @@ struct CardReaderConnectionStatusView: View {
                         Text(Localization.readerDisconnected)
                             .foregroundColor(disconnectedFontColor)
                     }
-
-                    Button {
-                        posModel.connectCardReader()
-                    } label: {
-                        Text(Localization.connectReader)
-                    }
-                    .buttonStyle(POSFilledButtonStyle(size: .extraSmall))
                 }
                 .padding(.horizontal, Constants.horizontalPadding)
                 .frame(maxHeight: .infinity)
+                .overlay(
+                    RoundedRectangle(cornerRadius: Constants.disconnectedBorderCornerRadius)
+                        .stroke(disconnectedBorderColor, lineWidth: Constants.disconnectedBorderWidth)
+                )
+                .padding(Constants.disconnectedBorderInset)
             }
         }
         .font(Constants.font, maximumContentSizeCategory: .accessibilityLarge)
@@ -100,6 +98,15 @@ private extension CardReaderConnectionStatusView {
             POSFloatingControlView.secondaryFontColor
         }
     }
+
+    var disconnectedBorderColor: Color {
+        switch backgroundAppearance {
+        case .primary:
+            .posPrimary
+        case .secondary:
+            POSFloatingControlView.secondaryFontColor
+        }
+    }
 }
 
 @available(iOS 17.0, *)
@@ -111,6 +118,9 @@ private extension CardReaderConnectionStatusView {
         static let progressIndicatorLineWidth: CGFloat = 2
         static let font = POSFontStyle.posBodyMediumRegular()
         static let horizontalPadding: CGFloat = 24
+        static let disconnectedBorderCornerRadius: CGFloat = 4
+        static let disconnectedBorderWidth: CGFloat = 2
+        static let disconnectedBorderInset: CGFloat = 8
     }
 }
 
@@ -168,6 +178,8 @@ private extension CardReaderConnectionStatusView {
     )
     VStack {
         CardReaderConnectionStatusView()
+            .background(Color.posSurfaceContainerLow)
+            .frame(height: 80)
             .environment(posModel)
     }
 }