diff --git a/WooCommerce/Classes/View Modifiers/View+HairlineBorders.swift b/WooCommerce/Classes/View Modifiers/View+HairlineBorders.swift new file mode 100644 index 00000000000..8bae7909bcc --- /dev/null +++ b/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()) + } +} diff --git a/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift b/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift index 9200e72c085..0bb161fa2b6 100644 --- a/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift +++ b/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift @@ -19,6 +19,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 { @@ -44,6 +45,8 @@ struct BookingDetailsView: View { } } } + .verticalHairlineBorders() + .frame(maxWidth: Layout.contentContainerMaxWidth) .refreshable { await viewModel.syncData() } @@ -126,7 +129,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 { diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj index 7da3197cf18..63f74931a81 100644 --- a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj +++ b/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 = ""; }; 2DAC251F2E82A02C008521AF /* BookingDetailsViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BookingDetailsViewModel.swift; sourceTree = ""; }; 2DAC2C972E82A185008521AF /* BookingDetailsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BookingDetailsView.swift; sourceTree = ""; }; + 2DB442932EC3696300838D88 /* View+HairlineBorders.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "View+HairlineBorders.swift"; sourceTree = ""; }; 2DB877512E25466B0001B175 /* ShippingItemRowAccessibility.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingItemRowAccessibility.swift; sourceTree = ""; }; 2DB88DA32E27DD790001B175 /* MarkOrderAsReadUseCase+Woo.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "MarkOrderAsReadUseCase+Woo.swift"; sourceTree = ""; }; 2DB891652E27F07E0001B175 /* Address+Shared.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Address+Shared.swift"; sourceTree = ""; }; @@ -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 */,