From e2af016a7bde47d55e9269688918d61b9702de12 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 19 Aug 2021 01:11:31 +0200
Subject: [PATCH] Inherit text color from parent element (#10894)

* Inherit text color from parent element

* Update block card icon and avoid use of !important

* Wrap card in div

* interpolate background image path value, to remove string escaping which can be confusing

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 .../components/blockcard/umb-block-card.html    | 12 ++++++------
 .../blockcard/umbBlockCard.component.js         | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html
index bb7a52a74f..d4c979d511 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html
@@ -1,10 +1,10 @@
-
+<div>
     <div class="__showcase"
-        ng-class="{'--error':vm.elementTypeModel === null}"
-        ng-style="{'background-color': vm.blockConfigModel ? vm.blockConfigModel.backgroundColor : '', 'background-image': vm.styleBackgroundImage}">
+         ng-class="{'--error':vm.elementTypeModel === null}"
+         ng-style="{'background-color': vm.blockConfigModel ? vm.blockConfigModel.backgroundColor : '', 'background-image': vm.styleBackgroundImage}">
         <div class="__icon">
-            <umb-icon icon="{{vm.elementTypeModel ? vm.elementTypeModel.icon : 'icon-block'}}"
-                      ng-attr-style="{{'color:' + vm.blockConfigModel.iconColor + ' !important'}}"
+            <umb-icon icon="{{vm.icon}}"
+                      ng-attr-style="{{'color:' + vm.blockConfigModel.iconColor}}"
                       ng-if="vm.blockConfigModel == null || vm.blockConfigModel.thumbnail == null">
             </umb-icon>
         </div>
@@ -19,4 +19,4 @@
     </div>
 
     <ng-transclude></ng-transclude>
-
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js
index 0c75bfbee3..6585caebb1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js
@@ -16,23 +16,26 @@
 
     function BlockCardController($scope, umbRequestHelper) {
 
-        var vm = this;
+        const vm = this;
         vm.styleBackgroundImage = "none";
 
         var unwatch = $scope.$watch("vm.blockConfigModel.thumbnail", (newValue, oldValue) => {
-            if(newValue !== oldValue) {
+            if (newValue !== oldValue) {
                 vm.updateThumbnail();
             }
         });
 
         vm.$onInit = function () {
-
             vm.updateThumbnail();
+        };
+
+        vm.$onChanges = function () {
+            vm.icon = vm.elementTypeModel ? vm.elementTypeModel.icon.split(" ")[0] : 'icon-block';
+        };
 
-        }
         vm.$onDestroy = function () {
             unwatch();
-        }
+        };
 
         vm.updateThumbnail = function () {
             if (vm.blockConfigModel == null || vm.blockConfigModel.thumbnail == null || vm.blockConfigModel.thumbnail === "") {
@@ -44,8 +47,8 @@
             if (path.toLowerCase().endsWith(".svg") === false) {
                 path += "?upscale=false&width=400";
             }
-            vm.styleBackgroundImage = 'url(\''+path+'\')';
-        }
+            vm.styleBackgroundImage = `url('${path}')`;
+        };
 
     }