diff --git a/WooCommerce/Classes/Extensions/UIImage+Woo.swift b/WooCommerce/Classes/Extensions/UIImage+Woo.swift index 7545fd365f4..462e115474b 100644 --- a/WooCommerce/Classes/Extensions/UIImage+Woo.swift +++ b/WooCommerce/Classes/Extensions/UIImage+Woo.swift @@ -1351,6 +1351,10 @@ extension UIImage { UIImage(imageLiteralResourceName: "magnifying-glass-not-found") } + static var magnifyingGlassNotFoundGrey: UIImage { + UIImage(imageLiteralResourceName: "magnifying-glass-not-found-grey") + } + static var groupedProductsImage: UIImage { UIImage(named: "grouped-products")! } diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/ProductStock/ProductStockDashboardCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/ProductStock/ProductStockDashboardCard.swift index 8c23e71980c..29a7b82b37a 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/ProductStock/ProductStockDashboardCard.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/ProductStock/ProductStockDashboardCard.swift @@ -171,7 +171,7 @@ private extension ProductStockDashboardCard { var emptyView: some View { VStack(alignment: .center, spacing: Layout.padding) { - Image(uiImage: .noStoreImage) + Image(uiImage: .productBlouseImage) Text(String(format: Localization.emptyStateTitle, viewModel.selectedStockType.displayedName)) .subheadlineStyle() diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StorePerformanceView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StorePerformanceView.swift index 1a58b93ce70..ff5be2c38f6 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StorePerformanceView.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StorePerformanceView.swift @@ -160,50 +160,58 @@ private extension StorePerformanceView { } } + @ViewBuilder var statsView: some View { - VStack(spacing: Layout.padding) { - VStack(spacing: Layout.contentVerticalSpacing) { - if let selectedDateText = viewModel.selectedDateText { - Text(selectedDateText) - .font(Font(StyleManager.statsTitleFont)) - } + if viewModel.hasRevenue { + VStack(spacing: Layout.padding) { + VStack(spacing: Layout.contentVerticalSpacing) { + if let selectedDateText = viewModel.selectedDateText { + Text(selectedDateText) + .font(Font(StyleManager.statsTitleFont)) + } - Text(viewModel.revenueStatsText) - .fontWeight(.semibold) - .foregroundStyle(statsValueColor) - .largeTitleStyle() - .accessibilityIdentifier("revenue-value") + Text(viewModel.revenueStatsText) + .fontWeight(.semibold) + .foregroundStyle(statsValueColor) + .largeTitleStyle() + .accessibilityIdentifier("revenue-value") - Text(Localization.revenue) - .if(!viewModel.hasRevenue) { $0.foregroundStyle(Color(.textSubtle)) } - .font(Font(StyleManager.statsTitleFont)) - } + Text(Localization.revenue) + .if(!viewModel.hasRevenue) { $0.foregroundStyle(Color(.textSubtle)) } + .font(Font(StyleManager.statsTitleFont)) + } - HStack(alignment: .bottom) { - Group { - statsItemView(title: Localization.orders, - value: viewModel.orderStatsText, - redactMode: .none) + HStack(alignment: .bottom) { + Group { + statsItemView(title: Localization.orders, + value: viewModel.orderStatsText, + redactMode: .none) .frame(maxWidth: .infinity) - statsItemView(title: Localization.visitors, - value: viewModel.visitorStatsText, - redactMode: .withIcon) + statsItemView(title: Localization.visitors, + value: viewModel.visitorStatsText, + redactMode: .withIcon) .frame(maxWidth: .infinity) - statsItemView(title: Localization.conversion, - value: viewModel.conversionStatsText, - redactMode: .withoutIcon) + statsItemView(title: Localization.conversion, + value: viewModel.conversionStatsText, + redactMode: .withoutIcon) .frame(maxWidth: .infinity) - + } } - .renderedIf(viewModel.hasRevenue) - - Text(Localization.noRevenueText) - .subheadlineStyle() - .frame(maxWidth: .infinity) - .renderedIf(!viewModel.hasRevenue) } + } else { + emptyStatsView + } + } + + var emptyStatsView: some View { + VStack(spacing: Layout.emptyViewSpacing) { + Image(.magnifyingGlassNotFoundGrey) + + Text(Localization.noRevenueText) + .subheadlineStyle() + .frame(maxWidth: .infinity) } } @@ -262,7 +270,8 @@ private extension StorePerformanceView { @ViewBuilder var chartView: some View { - if let chartViewModel = viewModel.chartViewModel { + if let chartViewModel = viewModel.chartViewModel, + chartViewModel.hasRevenue { VStack { StoreStatsChart(viewModel: chartViewModel) { selectedIndex in viewModel.trackInteraction() @@ -325,6 +334,7 @@ private extension StorePerformanceView { static let redactedViewIconSize: CGFloat = 14 static let redactedViewIconOffset = CGSize(width: 16, height: 0) static let hideIconVerticalPadding: CGFloat = 8 + static let emptyViewSpacing: CGFloat = 24 } enum Localization { diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StoreStatsChart.swift b/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StoreStatsChart.swift index 03885d23656..8f27189da03 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StoreStatsChart.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StoreStatsChart.swift @@ -93,7 +93,6 @@ struct StoreStatsChart: View { } } .padding(Constants.chartPadding) - .if(!viewModel.hasRevenue) { $0.overlay { emptyChartOverlay } } } private func updateSelectedDate(at location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) { @@ -128,26 +127,6 @@ struct StoreStatsChart: View { } } -private extension StoreStatsChart { - var emptyChartOverlay: some View { - // Simulate an empty chart - VStack { - Divider() - Spacer() - Divider() - Spacer() - Divider() - Spacer() - } - .overlay { - Image(.magnifyingGlassNotFound) - .opacity(Constants.EmptyChartOverlay.opacity) - .padding(.bottom, Constants.EmptyChartOverlay.bottomPadding) - } - .renderedIf(!viewModel.hasRevenue) - } -} - private extension StoreStatsChart { enum Localization { static let xValue = NSLocalizedString( @@ -190,11 +169,6 @@ private extension StoreStatsChart { ) static let chartGradientBottomColor = Color.clear static let chartPadding: CGFloat = 8 - - enum EmptyChartOverlay { - static let opacity: CGFloat = 0.5 - static let bottomPadding: CGFloat = 32 - } } } diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/TopPerformers/TopPerformersEmptyView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/TopPerformers/TopPerformersEmptyView.swift index 5d95fec96e9..6b7604e6847 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/TopPerformers/TopPerformersEmptyView.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/TopPerformers/TopPerformersEmptyView.swift @@ -4,8 +4,8 @@ import SwiftUI /// Contains a placeholder image and text. struct TopPerformersEmptyView: View { var body: some View { - VStack(alignment: .center, spacing: Layout.defaultSpacing) { - Image(uiImage: .noStoreImage) + VStack(alignment: .center, spacing: Layout.spacing) { + Image(uiImage: .magnifyingGlassNotFoundGrey) Text(Localization.text) .subheadlineStyle() } @@ -22,8 +22,8 @@ private extension TopPerformersEmptyView { } enum Layout { - static let defaultSpacing: CGFloat = 10 - static let padding: EdgeInsets = .init(top: 0, leading: defaultSpacing, bottom: defaultSpacing, trailing: defaultSpacing) + static let spacing: CGFloat = 24 + static let padding: EdgeInsets = .init(top: 0, leading: 10, bottom: 10, trailing: 10) } } diff --git a/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/Contents.json b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/Contents.json new file mode 100644 index 00000000000..6f0d14543ec --- /dev/null +++ b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "magnifying-glass-not-found-light.pdf", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "magnifying-glass-not-found-dark.pdf", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-dark.pdf b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-dark.pdf new file mode 100644 index 00000000000..80382e5900e Binary files /dev/null and b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-dark.pdf differ diff --git a/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-light.pdf b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-light.pdf new file mode 100644 index 00000000000..29103159eef Binary files /dev/null and b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-light.pdf differ