UI: swap dialog header mat-toolbar color=primary for .tb-dialog-header class

Sweep every dialog-context <mat-toolbar color="primary"> (105 toolbars across
104 files) to <mat-toolbar class="tb-dialog-header">, preserving any existing
class list. Add a matching .tb-dialog-header rule to styles.scss with a
1px rgba(0,0,0,0.12) bottom border. Table row-selection toolbars
(mat-mdc-table-toolbar) and the app shell / dashboard-page primary toolbars
are intentionally left as-is. The two dialogs that placed a
tb-toggle-select in the header switch from appearance="fill-invert" to "fill"
now that the header is on a light background.

ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="aiModels"></div>

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 800px">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ 'alarm-rule.edit-alarm-rule-additional-info' | translate }}</h2>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex h-full flex-col">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'alarm-rule.alarm-rule' | translate}}</h2>
     <span class="flex-1"></span>
     <div tb-help="alarmRules"></div>

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'alarm-rule.alarm-rule-condition' : 'alarm-rule.edit-alarm-rule-condition') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'alarm-rule.schedule-title' : 'alarm-rule.edit-schedule') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2 translate>filter.complex-filter</h2>
     <button mat-icon-button
             (click)="cancel()"

ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{(data.isAdd ? 'alarm-rule.add-filter' : 'alarm-rule.edit-filter') | translate}}</h2>
     <button mat-icon-button
             (click)="cancel()"

ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="alarmFormGroup" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="min-w-0" color="primary">
+<mat-toolbar class="tb-dialog-header min-w-0">
   <h2>{{ 'api-key.generate-title' | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="apiKeys"></div>

ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="min-w-0" color="primary">
+<mat-toolbar class="tb-dialog-header min-w-0">
   <h2>{{ 'api-key.generated-api-key-title' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="api-keys-dialog-container flex flex-col xs:h-full">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'api-key.manage-api-keys' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="apiKeys"></div>

ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="attributeFormGroup" (ngSubmit)="add()" style="min-width: 420px; max-width: 420px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isTelemetry ? 'attribute.add-telemetry' : 'attribute.add') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>attribute.add-widget-to-dashboard</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>audit-log.audit-log-details</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex flex-col">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
     <div tb-help="calculatedField"></div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form #testScriptContainer class="cf-test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
-  <mat-toolbar class="flex justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header flex justify-between">
     <h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
     <button mat-icon-button
             (click)="cancel()"

ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html

@@ -16,13 +16,13 @@
 
 -->
 <form class="tb-add-widget-dialog" [formGroup]="widgetFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
       <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
       <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
         @if (widgetConfig.hasBasicMode) {
-          <tb-toggle-select appearance="fill-invert" selectMediaBreakpoint="xs"
+          <tb-toggle-select appearance="fill" selectMediaBreakpoint="xs"
                             [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
             <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
             <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.update-image</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 750px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>layout.add-new-breakpoint</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>layout.manage</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="move()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.move-all-widgets</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>dashboard.manage-states</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>layout.select</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.select-state</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ translations.add }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>

ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>{{ title }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>filter.complex-filter</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary" class="justify-between">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ (isAdd ? 'filter.add' : 'filter.edit') | translate }}</h2>
     <button mat-icon-button
             (click)="cancel()"

ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterUserInfoFormGroup" (ngSubmit)="save()" style="width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{(data.readonly ? 'filter.filter-user-params' : 'filter.edit-filter-user-params') | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filtersFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 400px;" class="user-filter-dialog">
-  <mat-toolbar color="primary" class="justify-between">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ filter.filter | customTranslate }}</h2>
     <button mat-icon-button
             (click)="cancel()"

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ getTitle() }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>device-profile.add</h2>
   <span class="flex-1"></span>
   <div [tb-help]="'deviceProfiles'"></div>

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 1000px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="attributeFormGroup" (ngSubmit)="save()" style="min-width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>
       {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
     </h2>

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>device-profile.lwm2m.add-new-server-title</h2>
     <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="editDetailsFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'resource.add' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="actionsSettings" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ data.widgetTitle }}: {{ 'widget-config.actions' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="dashboard-state-dialog flex flex-col" [style]="dialogStyle">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{title}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">

ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form #addEntityForm="ngForm" [formGroup]="selectEntityFormGroup" (ngSubmit)="save()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>widgets.maps.select-entity</h2>
     <span class="flex-1"></span>
     <button mat-icon-button [matDialogClose]="null" type="button">

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="persistentFormGroup" style="min-width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ persistentFormGroup.get('rpcId').value }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html

@@ -16,12 +16,12 @@
 
 -->
 <form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span class="flex-1"></span>
     @if (hasAdvanced) {
       <tb-toggle-select
-        appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
+        appearance="fill" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
         [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
       </tb-toggle-select>
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" class="tb-map-data-layer-dialog" style="width: 750px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{dialogTitle}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>device.add-device-text</h2>
   <span class="flex-1"></span>
   <div [tb-help]="'devices'"></div>

ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ assignToEdgeTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="debug-dialog-container flex flex-col xs:h-full">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ data.title | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>

ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>admin.send-test-sms</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="uploadFileFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'dashboard.update-new-version' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div style="min-width: 400px; position: relative;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ titleText | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
   <!--  <div [tb-help]="'check-connectivity'"></div>-->

ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ 'device.device-credentials' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh;display: grid;grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'mobile.add-application' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="mobileApplication"></div>

ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="justify-between" color="primary">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.delete-application</h2>
   <button mat-icon-button
           (click)="cancel()"

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary" class="justify-between">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.add-specific-page</h2>
   <button mat-icon-button
           (click)="cancel()"

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary" class="justify-between">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.configuration-dialog</h2>
   <button mat-icon-button
           (click)="close()"

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="mobileBundle"></div>

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="targetNotificationForm" class="tb-dialog-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'notification.add-notification-recipients-group' : 'notification.edit-notification-recipients-group') | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="recipientNotifications"></div>

ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>

ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>notification.failed-send</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="sentNotification"></div>

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="templateNotifications"></div>

ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>rulechain.add-note</h2>
   <span class="flex-1"></span>
   <button mat-icon-button type="button" (click)="cancel()">

ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" class="dialog-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.add</h2>
     <span class="flex-1">: {{ruleNode.component.name}}</span>
     <div [tb-help]="helpLinkIdForRuleNodeType()"></div>

ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.add-link</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'ruleEngine'"></div>

ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.create-nested-rulechain</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.get-backup-code-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-email-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-sms-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-totp-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form style="min-width: 400px; position: relative;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>user.activation-link</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 450px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>user.add</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'users'"></div>

ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="min-width: 360px">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ dialogTitle }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>widget.select-widget-type</h2>
     <span class="flex-1"></span>
     <div tb-help="widgetTypes"></div>

ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>widgets-bundle.add</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 class="main-label">
     {{ data.message }}
   </h2>

ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;" class="h-full">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ title }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <form class="tb-node-script-test-dialog"
       [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ 'rulenode.test-script-function' | translate }} ({{ (scriptLang === scriptLanguage.JS ? 'rulenode.script-lang-java-script' : 'rulenode.script-lang-tbel') | translate }})</h2>
     <span class="flex-1"></span>
     <button mat-icon-button

ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ 'image.embed-image' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button

ui-ngx/src/app/shared/components/image/image-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form class="tb-image-dialog" [formGroup]="imageFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'image.image-details' : 'image.edit-image') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button