[POS Orders] Update order details POS label (#15860)

Author: iamgabrielma

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))
     }
 }

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?()
     }

WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.xib

@@ -26,7 +26,7 @@
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Sales Channel" textAlignment="right" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="kU8-dT-4zl" userLabel="Sales Channel Label">
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="255" verticalHuggingPriority="255" text="Sales Channel" textAlignment="right" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="kU8-dT-4zl" userLabel="Sales Channel Label" customClass="PaddedLabel" customModule="WooCommerce" customModuleProvider="target">
                                 <rect key="frame" x="146" y="0.0" width="142" height="40"/>
                                 <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
                                 <nil key="textColor"/>