diff --git a/WooCommerce/Classes/Extensions/UILabel+SalesChannel.swift b/WooCommerce/Classes/Extensions/UILabel+SalesChannel.swift
index d89b2861c0b..d66b25e72cc 100644
--- a/WooCommerce/Classes/Extensions/UILabel+SalesChannel.swift
+++ b/WooCommerce/Classes/Extensions/UILabel+SalesChannel.swift
@@ -6,8 +6,8 @@ extension UILabel {
func applySalesChannelStyle() {
applyFootnoteStyle()
applyLayerSettings()
- backgroundColor = .lightGray
- textColor = .black
+ backgroundColor = Layout.salesChannelLabelBackgroundColor
+ textColor = Layout.salesChannelLabelTextColor
}
/// Setup: Layer
@@ -23,5 +23,7 @@ private extension UILabel {
enum Layout {
static let borderWidth = CGFloat(0.0)
static let cornerRadius = CGFloat(4.0)
+ static let salesChannelLabelTextColor = UIColor(color: .wooCommercePurple(.shade80))
+ static let salesChannelLabelBackgroundColor = UIColor(color: .wooCommercePurple(.shade10))
}
}
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.swift
index 2abeee9b88c..08ac33c5730 100644
--- a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.swift
+++ b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.swift
@@ -14,7 +14,7 @@ final class SummaryTableViewCell: UITableViewCell {
/// Shows the sales channel if appropiate, at the moment only Point of Sale
///
- @IBOutlet private weak var salesChannelLabel: UILabel!
+ @IBOutlet private weak var salesChannelLabel: PaddedLabel!
/// Label: Payment Status
///
@@ -104,8 +104,7 @@ private extension SummaryTableViewCell {
if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleOrdersi1) {
salesChannelLabel.isHidden = false
- salesChannelLabel.applyFootnoteStyle()
- salesChannelLabel.accessibilityIdentifier = "summary-table-view-cell-sales-channel-label"
+ configureSalesChannelLabel()
} else {
salesChannelLabel.isHidden = true
}
@@ -119,6 +118,13 @@ private extension SummaryTableViewCell {
configureIconForVoiceOver()
}
+ func configureSalesChannelLabel() {
+ salesChannelLabel.numberOfLines = 1
+ salesChannelLabel.textInsets = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8)
+ salesChannelLabel.applySalesChannelStyle()
+ salesChannelLabel.accessibilityIdentifier = "summary-table-view-cell-sales-channel-label"
+ }
+
@objc func editWasTapped() {
onEditTouchUp?()
}
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.xib b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.xib
index 50793f0a33e..a3f78690824 100644
--- a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.xib
+++ b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.xib
@@ -26,7 +26,7 @@
-