Merge pull request #5884 from woocommerce/issue/5880-hub-menu-tint-colors

Hub Menu: Update tint colors of menu items when switching between light mode and dark mode

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenu.swift

@@ -30,7 +30,7 @@ struct HubMenu: View {
 
                 LazyVGrid(columns: gridItemLayout, spacing: Constants.itemSpacing) {
                     ForEach(viewModel.menuElements, id: \.self) { menu in
-                        HubMenuElement(image: menu.icon, text: menu.title, onTapGesture: {
+                        HubMenuElement(image: menu.icon, imageColor: menu.iconColor, text: menu.title, onTapGesture: {
                             switch menu {
                             case .woocommerceAdmin:
                                 ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "admin_menu"])

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuElement.swift

@@ -4,6 +4,7 @@ import SwiftUI
 ///
 struct HubMenuElement: View {
     let image: UIImage
+    let imageColor: UIColor
     let text: String
     let onTapGesture: (() -> Void)
 
@@ -19,8 +20,10 @@ struct HubMenuElement: View {
                     Color(UIColor(light: .listBackground,
                                   dark: .secondaryButtonBackground))
                     Image(uiImage: image)
+                        .renderingMode(.template)
                         .resizable()
                         .scaledToFit()
+                        .foregroundColor(Color(imageColor))
                         .frame(width: iconSize, height: iconSize)
                 }
                 .frame(width: imageSize, height: imageSize, alignment: .center)
@@ -42,7 +45,9 @@ struct HubMenuElement: View {
 struct HubMenuElement_Previews: PreviewProvider {
     static var previews: some View {
         HubMenuElement(image: .starOutlineImage(),
-                       text: "Menu", onTapGesture: { })
+                       imageColor: .blue,
+                       text: "Menu",
+                       onTapGesture: {})
             .previewLayout(.fixed(width: 160, height: 160))
             .previewDisplayName("Hub Menu Element")
     }

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift

@@ -112,13 +112,27 @@ extension HubMenuViewModel {
         var icon: UIImage {
             switch self {
             case .woocommerceAdmin:
-                return .wordPressLogoImage.imageWithTintColor(.blue) ?? .wordPressLogoImage
+                return .wordPressLogoImage
             case .viewStore:
-                return .storeImage.imageWithTintColor(.accent) ?? .storeImage
+                return .storeImage
             case .coupons:
                 return .couponImage
             case .reviews:
-                return .starImage(size: 24.0).imageWithTintColor(.primary) ?? .starImage(size: 24.0)
+                return .starImage(size: 24.0)
+            }
+        }
+
+        var iconColor: UIColor {
+            switch self {
+            case .woocommerceAdmin:
+                return .blue
+            case .viewStore:
+                return .accent
+            case .coupons:
+                return UIColor(light: .withColorStudio(.green, shade: .shade30),
+                               dark: .withColorStudio(.green, shade: .shade50))
+            case .reviews:
+                return .primary
             }
         }
     }