Update hub menu elements with template image and foreground colors for icons

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: ["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")
     }