From e2e54f2bc8349ca15a8f3b12f9477e26485a6870 Mon Sep 17 00:00:00 2001
From: James Mingardi-Elliott <james-elliott@users.noreply.github.com>
Date: Wed, 6 Mar 2024 17:11:07 -0500
Subject: [PATCH] NIFI-12721 Button UX (#8464)

* NIFI-12721 Button UX

Updated all the dialog buttons to change them from stroked and raised to basic. This better aligns with Angular Material guidelines and should address the confusion between disabled and cancelled.

* NiFi-12721 incremental update

Changed the combo editor and editor components to use the flat button styles. Missed them before because I was looking for dialogs.

Also caught a style bleed with button:disabled that should be button.nifi-button:disabled and updated that.

* Consolidated the button.nifi-button:disabled rules

Also ran Prettier to improve markup in a few spots
---
 .../add-tenant-to-policy-dialog.component.html         |  4 ++--
 .../override-policy-dialog.component.html              |  4 ++--
 .../action-details/action-details.component.html       |  2 +-
 .../purge-history/purge-history.component.html         |  4 ++--
 .../create-connection/create-connection.component.html |  4 ++--
 .../edit-connection/edit-connection.component.html     |  4 ++--
 .../import-from-registry.component.html                |  4 ++--
 .../items/port/create-port/create-port.component.html  |  4 ++--
 .../items/port/edit-port/edit-port.component.html      |  4 ++--
 .../create-process-group.component.html                |  4 ++--
 .../edit-process-group.component.html                  |  4 ++--
 .../group-components/group-components.component.html   |  4 ++--
 .../edit-processor/edit-processor.component.html       |  4 ++--
 .../create-remote-process-group.component.html         |  4 ++--
 .../edit-remote-process-group.component.html           |  4 ++--
 .../no-registry-clients-dialog.component.html          |  6 +++---
 .../edit-remote-port/edit-remote-port.component.html   |  4 ++--
 .../edit-parameter-context.component.html              |  8 ++++----
 .../provenance-search-dialog.component.html            |  4 ++--
 .../flowfile-dialog/flowfile-dialog.component.html     |  2 +-
 .../edit-flow-analysis-rule.component.html             |  4 ++--
 .../edit-parameter-provider.component.html             |  4 ++--
 .../fetch-parameter-provider-parameters.component.html |  6 +++---
 .../create-registry-client.component.html              |  4 ++--
 .../edit-registry-client.component.html                |  4 ++--
 .../edit-reporting-task.component.html                 |  4 ++--
 .../cluster-summary-dialog.component.html              |  2 +-
 .../user-access-policies.component.html                |  2 +-
 .../common/cancel-dialog/cancel-dialog.component.html  |  2 +-
 .../component-state/component-state.component.html     |  2 +-
 .../disable-controller-service.component.html          | 10 ++++------
 .../edit-controller-service.component.html             |  4 ++--
 .../enable-controller-service.component.html           | 10 ++++------
 .../edit-parameter-dialog.component.html               |  4 ++--
 .../edit-tenant/edit-tenant-dialog.component.html      |  4 ++--
 .../extension-creation.component.html                  |  4 ++--
 .../new-property-dialog.component.html                 |  4 ++--
 .../app/ui/common/ok-dialog/ok-dialog.component.html   |  2 +-
 .../editors/combo-editor/combo-editor.component.html   |  9 ++-------
 .../editors/nf-editor/nf-editor.component.html         |  9 ++-------
 .../provenance-event-dialog.component.html             |  2 +-
 .../status-history/status-history.component.html       |  2 +-
 .../system-diagnostics-dialog.component.html           |  2 +-
 .../common/yes-no-dialog/yes-no-dialog.component.html  |  4 ++--
 .../src/main/nifi/src/assets/themes/nifi.scss          |  2 +-
 .../nifi-web-frontend/src/main/nifi/src/styles.scss    |  5 +----
 .../dialogs/about/nf-registry-explorer-about.html      |  2 +-
 47 files changed, 89 insertions(+), 106 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
index f2706f8e78..cef0493219 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
@@ -48,9 +48,9 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
-                mat-raised-button
+                mat-button
                 [disabled]="addTenantsForm.invalid || saving.value"
                 (click)="addClicked()"
                 color="primary">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
index fdd1cbf6d8..6fbdd6c2fa 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
@@ -25,8 +25,8 @@
         </mat-radio-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
-        <button mat-raised-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
             Override
         </button>
     </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
index 64d58fa5a6..7105e8b6ec 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
@@ -206,7 +206,7 @@
             </ng-template>
         </mat-dialog-content>
         <mat-dialog-actions align="end">
-            <button color="primary" mat-raised-button mat-dialog-close>Ok</button>
+            <button color="primary" mat-button mat-dialog-close>Ok</button>
         </mat-dialog-actions>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.html
index 956a053ae9..b6f3d310e6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.html
@@ -50,12 +50,12 @@
             </mat-dialog-content>
 
             <mat-dialog-actions align="end">
-                <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+                <button mat-button mat-dialog-close>Cancel</button>
                 <button
                     color="primary"
                     (click)="submit()"
                     [disabled]="!purgeHistoryForm.valid"
-                    mat-raised-button
+                    mat-button
                     mat-dialog-close>
                     Ok
                 </button>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
index 68b72393fb..696b9e12e4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
@@ -175,13 +175,13 @@
         </mat-dialog-content>
         @if ({ value: (saving$ | async)! }; as saving) {
             <mat-dialog-actions align="end">
-                <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+                <button mat-button mat-dialog-close>Cancel</button>
                 <button
                     [disabled]="createConnectionForm.invalid || saving.value"
                     type="button"
                     color="primary"
                     (click)="createConnection(breadcrumbs.id)"
-                    mat-raised-button>
+                    mat-button>
                     <span *nifiSpinner="saving.value">Add</span>
                 </button>
             </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
index 13aff2f8c2..b210df57b2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
@@ -176,13 +176,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close="CANCELLED">Cancel</button>
+            <button mat-button mat-dialog-close="CANCELLED">Cancel</button>
             <button
                 [disabled]="!editConnectionForm.dirty || editConnectionForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="editConnection()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
index 54b9222806..6774f8cc86 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
@@ -141,13 +141,13 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="importFromRegistryForm.invalid || saving.value"
             type="button"
             color="primary"
             (click)="importFromRegistry()"
-            mat-raised-button>
+            mat-button>
             <span *nifiSpinner="saving.value">Import</span>
         </button>
     </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html
index 6edeb7db5b..269a2a0176 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html
@@ -47,13 +47,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!createPortForm.dirty || createPortForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="createPort()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Add</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html
index 61d074a4f9..a12ecfe576 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html
@@ -48,13 +48,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="editPort()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
index aab67925b1..678dcd0807 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
@@ -72,13 +72,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="createProcessGroup()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Add</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
index b390be4c0a..d95b118c7c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
@@ -149,14 +149,14 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editProcessGroupForm.dirty || editProcessGroupForm.invalid || saving.value"
                 class="h-8"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html
index 074bf19815..b61cd5334b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html
@@ -44,13 +44,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="createProcessGroup()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Add</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
index c06fcc1c60..7211a8efc1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
@@ -192,13 +192,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editProcessorForm.dirty || editProcessorForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
index 5e01e7e2c2..5ee118cf6c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
@@ -103,13 +103,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!createRemoteProcessGroupForm.dirty || createRemoteProcessGroupForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="createRemoteProcessGroup()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Add</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
index 97257304a1..1a1873ca09 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
@@ -97,13 +97,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editRemoteProcessGroupForm.dirty || editRemoteProcessGroupForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Add</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html
index 03ddd3fa20..92e84119b9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html
@@ -27,11 +27,11 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     @if (request.controllerPermissions.canRead) {
-        <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
-        <button mat-raised-button mat-dialog-close color="primary" [routerLink]="['/settings', 'registry-clients']">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close color="primary" [routerLink]="['/settings', 'registry-clients']">
             Configure
         </button>
     } @else {
-        <button mat-raised-button mat-dialog-close color="primary">Ok</button>
+        <button mat-button mat-dialog-close color="primary">Ok</button>
     }
 </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
index d2cf80e4d6..d05944b7d1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
@@ -58,13 +58,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="editRemotePort()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
index 91296a9ea6..4942a4d721 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
@@ -134,21 +134,21 @@
     @if ((updateRequest | async)!; as requestEntity) {
         <mat-dialog-actions align="end">
             @if (requestEntity.request.complete) {
-                <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+                <button color="primary" mat-button mat-dialog-close>Close</button>
             } @else {
-                <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+                <button mat-button mat-dialog-close>Cancel</button>
             }
         </mat-dialog-actions>
     } @else {
         @if ({ value: (saving$ | async)! }; as saving) {
             <mat-dialog-actions align="end">
-                <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+                <button mat-button mat-dialog-close>Cancel</button>
                 <button
                     [disabled]="!editParameterContextForm.dirty || editParameterContextForm.invalid || saving.value"
                     type="button"
                     color="primary"
                     (click)="submitForm()"
-                    mat-raised-button>
+                    mat-button>
                     <span *nifiSpinner="saving.value">Apply</span>
                 </button>
             </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-search-dialog/provenance-search-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-search-dialog/provenance-search-dialog.component.html
index 9cdda8c4b4..7b1816c69f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-search-dialog/provenance-search-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-search-dialog/provenance-search-dialog.component.html
@@ -77,13 +77,13 @@
         }
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="provenanceOptionsForm.invalid"
             type="button"
             color="primary"
             (click)="searchClicked()"
-            mat-raised-button
+            mat-button
             mat-dialog-close>
             <span>Search</span>
         </button>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index 91c109ea3c..7be268c5b2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -224,6 +224,6 @@
         </ng-template>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button color="primary" mat-raised-button mat-dialog-close>Ok</button>
+        <button color="primary" mat-button mat-dialog-close>Ok</button>
     </mat-dialog-actions>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
index 2947baef42..7489ba4cb1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
@@ -83,13 +83,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editFlowAnalysisRuleForm.dirty || editFlowAnalysisRuleForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
index e366766ab1..d4c238ef11 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
@@ -80,13 +80,13 @@
 
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editParameterProviderForm.dirty || editParameterProviderForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index 44c8037728..48814d22b7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -322,18 +322,18 @@
         <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
             <ng-container *ngIf="updateRequest | async; else normalActions">
                 <!-- an update to the associated parameter context(s) has been triggered -->
-                <button color="primary" mat-stroked-button mat-dialog-close>
+                <button mat-button mat-dialog-close>
                     <span *nifiSpinner="saving.value">Close</span>
                 </button>
             </ng-container>
             <ng-template #normalActions>
-                <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+                <button mat-button mat-dialog-close>Cancel</button>
                 <button
                     [disabled]="!canSubmitForm() || saving.value"
                     type="button"
                     color="primary"
                     (click)="submitForm()"
-                    mat-raised-button>
+                    mat-button>
                     <span *nifiSpinner="saving.value">Apply</span>
                 </button>
             </ng-template>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html
index 3c3dc511db..1d9a344233 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html
@@ -56,13 +56,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!createRegistryClientForm.dirty || createRegistryClientForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="createRegistryClientClicked()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
index 2e133e51e0..fc9bb94db3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
@@ -61,13 +61,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editRegistryClientForm.dirty || editRegistryClientForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
index ef19c46f80..aaf32d571a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
@@ -101,13 +101,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editReportingTaskForm.dirty || editReportingTaskForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
index 45bd81acef..d1ca40d32a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
@@ -79,7 +79,7 @@
                 <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
             </div>
 
-            <button color="primary" mat-raised-button mat-dialog-close tabindex="0">Close</button>
+            <button mat-button mat-dialog-close tabindex="0">Close</button>
         </div>
     </mat-dialog-actions>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
index 82446ff484..fc28e7178c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
@@ -85,6 +85,6 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+        <button mat-button mat-dialog-close>Close</button>
     </mat-dialog-actions>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/cancel-dialog/cancel-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/cancel-dialog/cancel-dialog.component.html
index da55132180..0c0c5174d4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/cancel-dialog/cancel-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/cancel-dialog/cancel-dialog.component.html
@@ -20,5 +20,5 @@
     <div class="text-sm">{{ request.message }}</div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button type="button" (click)="cancelClicked()" mat-raised-button mat-dialog-close color="primary">Cancel</button>
+    <button type="button" (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
 </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
index 2bf6fe63f6..ff41e3be29 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
@@ -87,6 +87,6 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+        <button mat-button mat-dialog-close>Close</button>
     </mat-dialog-actions>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
index e7df41f112..af84fcf9fc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
@@ -45,8 +45,8 @@
                     </div>
                 </mat-dialog-content>
                 <mat-dialog-actions align="end">
-                    <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
-                    <button type="button" color="primary" (click)="submitForm()" mat-raised-button>Disable</button>
+                    <button mat-button mat-dialog-close>Cancel</button>
+                    <button type="button" color="primary" (click)="submitForm()" mat-button>Disable</button>
                 </mat-dialog-actions>
             } @else {
                 <mat-dialog-content>
@@ -127,11 +127,9 @@
                 </mat-dialog-content>
                 <mat-dialog-actions align="end">
                     @if (disableRequest.currentStep === SetEnableStep.Completed || disableRequest.error) {
-                        <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+                        <button mat-button mat-dialog-close>Close</button>
                     } @else {
-                        <button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>
-                            Cancel
-                        </button>
+                        <button (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
                     }
                 </mat-dialog-actions>
             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
index 8cd22f8618..898c1367b9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
@@ -109,13 +109,13 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editControllerServiceForm.dirty || editControllerServiceForm.invalid || saving.value"
                 type="button"
                 color="primary"
                 (click)="submitForm()"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving.value">Apply</span>
             </button>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
index c4f6eafe9e..1abf1dbc34 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
@@ -58,13 +58,13 @@
                     </div>
                 </mat-dialog-content>
                 <mat-dialog-actions align="end">
-                    <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+                    <button mat-button mat-dialog-close>Cancel</button>
                     <button
                         [disabled]="enableControllerServiceForm.invalid"
                         type="button"
                         color="primary"
                         (click)="submitForm()"
-                        mat-raised-button>
+                        mat-button>
                         Enable
                     </button>
                 </mat-dialog-actions>
@@ -148,11 +148,9 @@
                 </mat-dialog-content>
                 <mat-dialog-actions align="end">
                     @if (enableRequest.currentStep === SetEnableStep.Completed || enableRequest.error) {
-                        <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+                        <button mat-button mat-dialog-close>Close</button>
                     } @else {
-                        <button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>
-                            Cancel
-                        </button>
+                        <button (click)="cancelClicked()" mat-button mat-dialog-close>Cancel</button>
                     }
                 </mat-dialog-actions>
             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
index 526c61b9f3..b99f2db7f1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
@@ -54,9 +54,9 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
-                mat-raised-button
+                mat-button
                 [disabled]="editParameterForm.invalid || saving.value"
                 (click)="okClicked()"
                 color="primary">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html
index 86465f57fc..5ea13dfb82 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html
@@ -60,9 +60,9 @@
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
-            <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
-                mat-raised-button
+                mat-button
                 [disabled]="editTenantForm.invalid || saving.value"
                 (click)="okClicked()"
                 color="primary">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index 9fde970d07..5173a4d8a1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -101,12 +101,12 @@
             }
         </div>
         <div class="flex justify-end gap-x-2">
-            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
+            <button mat-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="selectedType == null || saving"
                 color="primary"
                 (click)="createExtension(selectedType)"
-                mat-raised-button>
+                mat-button>
                 <span *nifiSpinner="saving">Add</span>
             </button>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html
index 4f9ce7eb43..345c35c078 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html
@@ -36,9 +36,9 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
+        <button mat-button mat-dialog-close>Cancel</button>
         <button
-            mat-raised-button
+            mat-button
             [disabled]="!newPropertyForm.dirty || newPropertyForm.invalid"
             (click)="addProperty()"
             color="primary">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/ok-dialog/ok-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/ok-dialog/ok-dialog.component.html
index 945c2f7395..151f28e9f2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/ok-dialog/ok-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/ok-dialog/ok-dialog.component.html
@@ -20,5 +20,5 @@
     <div class="text-sm max-w-sm">{{ request.message }}</div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-raised-button mat-dialog-close cdkFocusInitial color="primary">Ok</button>
+    <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
 </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
index effecfb06d..2e9a55a001 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
@@ -94,12 +94,7 @@
                 </ng-template>
             </div>
             <div class="flex justify-end items-center gap-x-2">
-                <button
-                    color="primary"
-                    mat-stroked-button
-                    type="button"
-                    (mousedown)="preventDrag($event)"
-                    (click)="cancelClicked()">
+                <button mat-button type="button" (mousedown)="preventDrag($event)" (click)="cancelClicked()">
                     Cancel
                 </button>
                 <button
@@ -108,7 +103,7 @@
                     type="button"
                     color="primary"
                     (click)="okClicked()"
-                    mat-raised-button>
+                    mat-button>
                     Ok
                 </button>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
index b5ed8802f9..67fde7d3de 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
@@ -59,12 +59,7 @@
                 >
             </div>
             <div class="flex justify-end items-center gap-x-2">
-                <button
-                    color="primary"
-                    mat-stroked-button
-                    type="button"
-                    (mousedown)="preventDrag($event)"
-                    (click)="cancelClicked()">
+                <button mat-button type="button" (mousedown)="preventDrag($event)" (click)="cancelClicked()">
                     Cancel
                 </button>
                 <button
@@ -73,7 +68,7 @@
                     type="button"
                     color="primary"
                     (click)="okClicked()"
-                    mat-raised-button>
+                    mat-button>
                     Ok
                 </button>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index de9efe6b5e..ddb5fe2ea6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -442,6 +442,6 @@
         </ng-template>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button color="primary" mat-raised-button mat-dialog-close>Ok</button>
+        <button mat-button mat-dialog-close>Ok</button>
     </mat-dialog-actions>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
index a8595386a3..a5e980cb9b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
@@ -172,7 +172,7 @@
                         }
                     </div>
                     <div>
-                        <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+                        <button mat-button mat-dialog-close>Close</button>
                     </div>
                 </div>
             </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
index da276fa5a1..4f16aec166 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
@@ -236,7 +236,7 @@
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
                 <div>
-                    <button color="primary" mat-raised-button mat-dialog-close>Close</button>
+                    <button mat-button mat-dialog-close>Close</button>
                 </div>
             </div>
         </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/yes-no-dialog/yes-no-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/yes-no-dialog/yes-no-dialog.component.html
index e011fdae78..39f92518a7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/yes-no-dialog/yes-no-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/yes-no-dialog/yes-no-dialog.component.html
@@ -20,6 +20,6 @@
     <div class="text-sm max-w-sm" data-qa="yes-no-message">{{ request.message }}</div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-stroked-button mat-dialog-close color="primary" (click)="noClicked()">No</button>
-    <button mat-raised-button mat-dialog-close cdkFocusInitial color="primary" (click)="yesClicked()">Yes</button>
+    <button mat-button mat-dialog-close (click)="noClicked()">No</button>
+    <button mat-button mat-dialog-close cdkFocusInitial color="primary" (click)="yesClicked()">Yes</button>
 </mat-dialog-actions>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
index b8ff67946d..34bf7d8bcc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
@@ -393,7 +393,7 @@ $warn-dark-palette: (
 );
 
 // Define the palettes for your theme
-$material-primary-light: mat.define-palette($material-primary-light-palette);
+$material-primary-light: mat.define-palette($material-primary-light-palette, 600, 100, 900);
 $material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700);
 $nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette);
 $nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index 145863cc71..2032f471c3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -317,12 +317,9 @@ $appFontPath: '~roboto-fontface/fonts';
         border-color: $accent-palette-A400;
     }
 
-    button:disabled {
+    button.nifi-button:disabled {
         color: $primary-palette-200 !important;
         cursor: not-allowed;
-    }
-
-    button.nifi-button:disabled {
         border: 1px solid $primary-palette-200;
 
         i {
diff --git a/nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/dialogs/about/nf-registry-explorer-about.html b/nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/dialogs/about/nf-registry-explorer-about.html
index 9880368bf6..8294f4cd57 100644
--- a/nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/dialogs/about/nf-registry-explorer-about.html
+++ b/nifi-registry/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/dialogs/about/nf-registry-explorer-about.html
@@ -32,5 +32,5 @@ limitations under the License.
     </div>
 </div>
 <mat-dialog-actions align="end">
-    <button mat-raised-button color="fds-primary" mat-dialog-close>Close</button>
+    <button mat-button mat-dialog-close>Close</button>
 </mat-dialog-actions>