Merge pull request #5885 from woocommerce/feat/5745-dashboard-design-polishes

My store tab design/technical updates (before design review)

Author: jaclync

WooCommerce/Classes/ViewRelated/Dashboard/DashboardViewController.swift

@@ -136,7 +136,8 @@ final class DashboardViewController: UIViewController {
 private extension DashboardViewController {
 
     func configureView() {
-        view.backgroundColor = .listBackground
+        view.backgroundColor = ServiceLocator.featureFlagService.isFeatureFlagEnabled(.myStoreTabUpdates) ?
+        Constants.backgroundColor: Constants.legacyBackgroundColor
     }
 
     func configureNavigation() {
@@ -478,6 +479,8 @@ private extension DashboardViewController {
     enum Constants {
         static let bannerBottomMargin = CGFloat(8)
         static let horizontalMargin = CGFloat(20)
+        static let backgroundColor: UIColor = .systemBackground
+        static let legacyBackgroundColor: UIColor = .listBackground
         static let collapsedNavigationBarHeight = CGFloat(44)
     }
 }

WooCommerce/Classes/ViewRelated/Dashboard/MyStore/Cells/NoPeriodDataTableViewCell.swift

@@ -4,7 +4,7 @@ import UIKit
 
 /// Displayed whenever there is no top performer data for a given period (granularity)
 ///
-class NoPeriodDataTableViewCell: UITableViewCell {
+final class NoPeriodDataTableViewCell: UITableViewCell {
     @IBOutlet private weak var mainImageView: UIImageView!
 
     /// LegendLabel: To be displayed below the ImageView.
@@ -21,7 +21,15 @@ class NoPeriodDataTableViewCell: UITableViewCell {
 
     override func awakeFromNib() {
         super.awakeFromNib()
-        contentView.backgroundColor = .listForeground
+        contentView.backgroundColor = ServiceLocator.featureFlagService.isFeatureFlagEnabled(.myStoreTabUpdates) ?
+        Constants.backgroundColor: Constants.legacyBackgroundColor
         backgroundColor = .listForeground
     }
 }
+
+private extension NoPeriodDataTableViewCell {
+    enum Constants {
+        static let backgroundColor: UIColor = .systemBackground
+        static let legacyBackgroundColor: UIColor = .listForeground
+    }
+}

WooCommerce/Classes/ViewRelated/Dashboard/MyStore/Cells/ProductTableViewCell.swift

@@ -58,7 +58,8 @@ final class ProductTableViewCell: UITableViewCell {
         accessoryLabel.applyBodyStyle()
         detailLabel.applyFootnoteStyle()
         applyProductImageStyle()
-        backgroundColor = .listForeground
+        backgroundColor = ServiceLocator.featureFlagService.isFeatureFlagEnabled(.myStoreTabUpdates) ?
+        Constants.backgroundColor: Constants.legacyBackgroundColor
         bottomBorderView.backgroundColor = .systemColor(.separator)
         selectionStyle = .default
     }
@@ -80,12 +81,14 @@ extension ProductTableViewCell {
         let detailText: String?
         let accessoryText: String?
         let imageURL: String?
+        let backgroundColor: UIColor
     }
 
     func configure(viewModel: ViewModel, imageService: ImageService) {
         nameText = viewModel.nameText
         detailText = viewModel.detailText
         accessoryText = viewModel.accessoryText
+        backgroundColor = viewModel.backgroundColor
 
         /// Set `center` contentMode to not distort the placeholder aspect ratio.
         /// After a successful image download set the contentMode to `scaleAspectFill`
@@ -116,13 +119,15 @@ extension ProductTableViewCell.ViewModel {
                 statsItem?.totalString(currencyFormatter: currencyFormatter) ?? ""
             )
             accessoryText = "\(statsItem?.quantity ?? 0)"
+            backgroundColor = ProductTableViewCell.Constants.backgroundColor
         } else {
             detailText = String.localizedStringWithFormat(
                 NSLocalizedString("Total orders: %ld",
                                   comment: "Top performers — label for the total number of products ordered"),
                 statsItem?.quantity ?? 0
             )
             accessoryText = statsItem?.formattedTotalString
+            backgroundColor = ProductTableViewCell.Constants.legacyBackgroundColor
         }
     }
 }
@@ -136,6 +141,11 @@ private extension ProductTableViewCell {
         static let borderColor = UIColor.border
         static let backgroundColor = UIColor.listForeground
     }
+
+    enum Constants {
+        static let backgroundColor: UIColor = .systemBackground
+        static let legacyBackgroundColor: UIColor = .listForeground
+    }
 }
 
 private extension TopEarnerStatsItem {

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsAndTopPerformersPeriodViewController.swift

@@ -273,6 +273,7 @@ private extension StoreStatsAndTopPerformersPeriodViewController {
 
     func configureSubviews() {
         view.addSubview(scrollView)
+        view.backgroundColor = Constants.backgroundColor
         view.pinSubviewToSafeArea(scrollView)
 
         scrollView.refreshControl = refreshControl
@@ -356,5 +357,6 @@ private extension StoreStatsAndTopPerformersPeriodViewController {
     enum Constants {
         static let storeStatsPeriodViewHeight: CGFloat = 444
         static let ghostStyle: GhostStyle = .wooDefaultGhostStyle
+        static let backgroundColor: UIColor = .systemBackground
     }
 }

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsAndTopPerformersViewController.swift

@@ -276,7 +276,7 @@ private extension StoreStatsAndTopPerformersViewController {
     }
 
     func configureView() {
-        view.backgroundColor = .listBackground
+        view.backgroundColor = Constants.backgroundColor
         configureButtonBarBottomBorder()
 
         // Disables any content inset adjustment since `XLPagerTabStrip` doesn't seem to support safe area insets.
@@ -477,5 +477,6 @@ private extension StoreStatsAndTopPerformersViewController {
 
     enum Constants {
         static let topEarnerStatsLimit: Int = 5
+        static let backgroundColor: UIColor = .systemBackground
     }
 }

WooCommerce/Classes/ViewRelated/Dashboard/Stats v4/StoreStatsV4PeriodViewController.swift

@@ -348,7 +348,8 @@ private extension StoreStatsV4PeriodViewController {
     func configureBarChart() {
         lineChartView.marker = StoreStatsChartCircleMarker()
         lineChartView.chartDescription?.enabled = false
-        lineChartView.dragEnabled = true
+        lineChartView.dragXEnabled = true
+        lineChartView.dragYEnabled = false
         lineChartView.setScaleEnabled(false)
         lineChartView.pinchZoomEnabled = false
         lineChartView.rightAxis.enabled = false
@@ -698,7 +699,7 @@ private extension StoreStatsV4PeriodViewController {
         if hasRevenueData && !hasNegativeRevenueOnly {
             let gradientColors = [Constants.chartGradientBottomColor.cgColor, Constants.chartGradientTopColor.cgColor] as CFArray
             let gradientColorSpace = CGColorSpaceCreateDeviceRGB()
-            let locations: [CGFloat] = hasNegativeRevenueOnly ? [1.0, 0.0]: [0.0, 1.0]
+            let locations: [CGFloat] = [0.0, 1.0]
             if let gradient = CGGradient(colorsSpace: gradientColorSpace, colors: gradientColors, locations: locations) {
                 dataSet.fill = .init(linearGradient: gradient, angle: 90.0)
                 dataSet.fillAlpha = 1.0