[NIFI-13028] theme the processor icon color (#8633)

* [NIFI-13028] theme the processor icon color

* prettier and lint updates

* add missing color to table action icon

* review feedback
This closes #8633

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts

@@ -604,7 +604,9 @@ export class ProcessorManager {
                 .classed('unauthorized', !processorData.permissions.canRead);
 
             //update the processor icon
-            processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
+            processor
+                .select('text.processor-icon')
+                .classed('unauthorized accent-color', !processorData.permissions.canRead);
 
             //update the processor border
             processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
@@ -623,33 +625,39 @@ export class ProcessorManager {
                     processor.select('rect.border').style('stroke', function () {
                         return color;
                     });
+
+                    if (color) {
+                        processor.select('text.processor-icon').attr('class', function () {
+                            return 'processor-icon';
+                        });
+
+                        // update the processor color
+                        processor.style('fill', function (d: any) {
+                            let color = 'unset';
+
+                            if (!d.permissions.canRead) {
+                                return color;
+                            }
+
+                            // use the specified color if appropriate
+                            if (d.component.style['background-color']) {
+                                color = d.component.style['background-color'];
+
+                                color = self.canvasUtils.determineContrastColor(
+                                    self.nifiCommon.substringAfterLast(color, '#')
+                                );
+                            }
+
+                            return color;
+                        });
+                    }
+                } else {
+                    processor.select('text.processor-icon').attr('class', function () {
+                        return 'processor-icon accent-color';
+                    });
                 }
             }
 
-            // update the processor color
-            processor.select('text.processor-icon').style('fill', function (d: any) {
-                // get the default color
-                let color: string = self.defaultIconColor();
-
-                if (!d.permissions.canRead) {
-                    return color;
-                }
-
-                // use the specified color if appropriate
-                if (d.component.style['background-color']) {
-                    color = d.component.style['background-color'];
-
-                    //special case #ffffff implies default fill
-                    if (color.toLowerCase() === '#ffffff') {
-                        color = self.defaultIconColor();
-                    } else {
-                        color = self.canvasUtils.determineContrastColor(self.nifiCommon.substringAfterLast(color, '#'));
-                    }
-                }
-
-                return color;
-            });
-
             // restricted component indicator
             processor.select('circle.restricted-background').style('visibility', self.showRestricted);
             processor.select('text.restricted').style('visibility', self.showRestricted);
@@ -772,10 +780,6 @@ export class ProcessorManager {
         removed.remove();
     }
 
-    private defaultIconColor(): string {
-        return '#ad9897';
-    }
-
     /**
      * Determines whether the specific component needs a tooltip.
      *

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html

@@ -124,13 +124,13 @@
                         <div class="flex items-center gap-x-3">
                             @if (canConfigure(item)) {
                                 <div
-                                    class="pointer fa fa-cog"
+                                    class="pointer fa fa-cog primary-color"
                                     (click)="configureClicked(item, $event)"
                                     title="Edit"></div>
                             }
                             @if (hasAdvancedUi(item)) {
                                 <div
-                                    class="pointer fa fa-cogs"
+                                    class="pointer fa fa-cogs primary-color"
                                     (click)="advancedClicked(item, $event)"
                                     title="Advanced"></div>
                             }
@@ -142,7 +142,10 @@
                                     title="Disable"></div>
                             }
                             @if (canEnable(item)) {
-                                <div class="pointer fa fa-flash" (click)="enabledClicked(item)" title="Enable"></div>
+                                <div
+                                    class="pointer fa fa-flash primary-color"
+                                    (click)="enabledClicked(item)"
+                                    title="Enable"></div>
                             }
                             @if (canChangeVersion(item)) {
                                 <div class="pointer fa fa-exchange primary-color" title="Change Version"></div>