[Bookungs] Update booking details container color and frame (#16341)

Author: RafaelKayumov

WooCommerce/Classes/View Modifiers/View+HairlineBorders.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+
+private enum Layout {
+    static let color: Color = .gray.opacity(0.3)
+    static let width: CGFloat = 0.5
+}
+
+struct VerticalHairlineBorders: ViewModifier {
+
+    func body(content: Content) -> some View {
+        content
+            .overlay(
+                HStack {
+                    Rectangle()
+                        .fill(Layout.color)
+                        .frame(width: Layout.width)
+                    Spacer()
+                    Rectangle()
+                        .fill(Layout.color)
+                        .frame(width: Layout.width)
+                }
+            )
+    }
+}
+
+extension View {
+    func verticalHairlineBorders() -> some View {
+        self.modifier(VerticalHairlineBorders())
+    }
+}

WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift

@@ -20,6 +20,7 @@ struct BookingDetailsView: View {
         static let headerBadgesAdditionalTopPadding: CGFloat = 6
         static let sectionFooterTextVerticalPadding: CGFloat = 8
         static let rowTextVerticalPadding: CGFloat = 11
+        static let contentContainerMaxWidth: CGFloat = 525
     }
 
     enum TextFont {
@@ -45,6 +46,8 @@ struct BookingDetailsView: View {
                 }
             }
         }
+        .verticalHairlineBorders()
+        .frame(maxWidth: Layout.contentContainerMaxWidth)
         .refreshable {
             await viewModel.syncData()
         }
@@ -131,7 +134,7 @@ private extension BookingDetailsView {
 
             sectionContentView(section.content)
                 .padding(.horizontal, Layout.contentSidePadding)
-                .background(Color(.systemBackground))
+                .background(Color(.listForeground(modal: false)))
                 .addingTopAndBottomDividers()
 
             if let footerText = section.footerText {

WooCommerce/WooCommerce.xcodeproj/project.pbxproj

@@ -1005,6 +1005,7 @@
 		2DA7D58C2EA6722A007B0F48 /* BookingAttendanceStatus+Localization.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DA7D58B2EA6722A007B0F48 /* BookingAttendanceStatus+Localization.swift */; };
 		2DAC25202E82A02C008521AF /* BookingDetailsViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DAC251F2E82A02C008521AF /* BookingDetailsViewModel.swift */; };
 		2DAC2C992E82A185008521AF /* BookingDetailsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DAC2C972E82A185008521AF /* BookingDetailsView.swift */; };
+		2DB442942EC3696A00838D88 /* View+HairlineBorders.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DB442932EC3696300838D88 /* View+HairlineBorders.swift */; };
 		2DB877522E25466C0001B175 /* ShippingItemRowAccessibility.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DB877512E25466B0001B175 /* ShippingItemRowAccessibility.swift */; };
 		2DB88DA42E27DD8D0001B175 /* MarkOrderAsReadUseCase+Woo.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DB88DA32E27DD790001B175 /* MarkOrderAsReadUseCase+Woo.swift */; };
 		2DB891662E27F0830001B175 /* Address+Shared.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DB891652E27F07E0001B175 /* Address+Shared.swift */; };
@@ -3891,6 +3892,7 @@
 		2DA7D58B2EA6722A007B0F48 /* BookingAttendanceStatus+Localization.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "BookingAttendanceStatus+Localization.swift"; sourceTree = "<group>"; };
 		2DAC251F2E82A02C008521AF /* BookingDetailsViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BookingDetailsViewModel.swift; sourceTree = "<group>"; };
 		2DAC2C972E82A185008521AF /* BookingDetailsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BookingDetailsView.swift; sourceTree = "<group>"; };
+		2DB442932EC3696300838D88 /* View+HairlineBorders.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "View+HairlineBorders.swift"; sourceTree = "<group>"; };
 		2DB877512E25466B0001B175 /* ShippingItemRowAccessibility.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingItemRowAccessibility.swift; sourceTree = "<group>"; };
 		2DB88DA32E27DD790001B175 /* MarkOrderAsReadUseCase+Woo.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "MarkOrderAsReadUseCase+Woo.swift"; sourceTree = "<group>"; };
 		2DB891652E27F07E0001B175 /* Address+Shared.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Address+Shared.swift"; sourceTree = "<group>"; };
@@ -7440,6 +7442,7 @@
 		262A097F2628A8BF0033AD20 /* View Modifiers */ = {
 			isa = PBXGroup;
 			children = (
+				2DB442932EC3696300838D88 /* View+HairlineBorders.swift */,
 				2D05F70F2E8BE91E004111FD /* View+Tappable.swift */,
 				DE4B3B5526A68DD000EEF2D8 /* View+InsetPaddings.swift */,
 				26281775278F0B0100C836D3 /* View+NoticesModifier.swift */,
@@ -14353,6 +14356,7 @@
 				0286B27D23C7051F003D784B /* ProductImagesViewController.swift in Sources */,
 				68D1BEDB28FFEDC20074A29E /* OrderCustomerListView.swift in Sources */,
 				4569317F2653E82B009ED69D /* ShippingLabelCarriers.swift in Sources */,
+				2DB442942EC3696A00838D88 /* View+HairlineBorders.swift in Sources */,
 				EE2A57D729E399CC009F61E1 /* CaseIterable+Helpers.swift in Sources */,
 				024DF30B23742297006658FE /* AztecFormatBarCommand.swift in Sources */,
 				02CE43022768CBF60006EAEF /* ProducBarcodeScannerCoordinator.swift in Sources */,