From 04f642255541b7162fdfdfe63581be23c581a291 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 1 Jul 2026 12:13:39 +0300
Subject: [PATCH] =?UTF-8?q?UI:=20continue=20new-menu=20polish=20=E2=80=94?=
 =?UTF-8?q?=20home=20shell=20reorg,=20rule-chain=20page=20toolbar,=20navig?=
 =?UTF-8?q?ation-card=20gaps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-ngx/src/app/core/services/menu.models.ts   | 34 ++++++++--------
 .../lib/navigation-card-widget.component.scss |  1 +
 .../navigation-cards-widget.component.scss    |  1 +
 .../src/app/modules/home/home.component.html  | 40 +++++++++----------
 .../home-links/home-links.component.scss      |  1 +
 .../rulechain/rulechain-page.component.html   |  6 +--
 .../rulechain/rulechain-page.component.scss   |  6 +--
 7 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts
index 1e3ae4d8a0..7bb2d2e87c 100644
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/ui-ngx/src/app/core/services/menu.models.ts
@@ -157,7 +157,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'tenant-profile.tenant-profiles',
       type: 'link',
       path: '/tenantProfiles',
-      icon: 'mdi:alpha-t-box'
+      icon: 'mdi:alpha-t-box-outline'
     }
   ],
   [
@@ -177,7 +177,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widget.widgets',
       type: 'link',
       path: '/resources/widgets-library',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -187,7 +187,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widget.widgets',
       type: 'link',
       path: '/resources/widgets-library/widget-types',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -197,7 +197,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widgets-bundle.widgets-bundles',
       type: 'link',
       path: '/resources/widgets-library/widgets-bundles',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -227,7 +227,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'resource.files',
       type: 'link',
       path: '/resources/resources-library',
-      icon: 'mdi:rhombus-split'
+      icon: 'mdi:rhombus-split-outline'
     }
   ],
   [
@@ -383,7 +383,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.settings',
       type: 'link',
       path: '/settings',
-      icon: 'settings'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -394,7 +394,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.general-settings',
       type: 'link',
       path: '/settings/general',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -404,7 +404,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.outgoing-mail',
       type: 'link',
       path: '/settings/outgoing-mail',
-      icon: 'mail'
+      icon: 'mail_outline'
     }
   ],
   [
@@ -415,7 +415,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.home-settings',
       type: 'link',
       path: '/settings/home',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -426,7 +426,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.notifications-settings',
       type: 'link',
       path: '/settings/notifications',
-      icon: 'mdi:message-badge'
+      icon: 'mdi:message-badge-outline'
     }
   ],
   [
@@ -479,7 +479,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'security.general-settings',
       type: 'link',
       path: '/security-settings/general',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -499,7 +499,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.oauth2.oauth2',
       type: 'link',
       path: '/security-settings/oauth2',
-      icon: 'mdi:shield-account'
+      icon: 'mdi:shield-account-outline'
     }
   ],
   [
@@ -579,7 +579,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'dashboard.dashboards',
       type: 'link',
       path: '/dashboards',
-      icon: 'dashboards'
+      icon: 'mdi:view-dashboard-outline'
     }
   ],
   [
@@ -619,7 +619,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'entity-view.entity-views',
       type: 'link',
       path: '/entities/entityViews',
-      icon: 'view_quilt'
+      icon: 'mdi:view-quilt-outline'
     }
   ],
   [
@@ -649,7 +649,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'device-profile.device-profiles',
       type: 'link',
       path: '/profiles/deviceProfiles',
-      icon: 'mdi:alpha-d-box'
+      icon: 'mdi:alpha-d-box-outline'
     }
   ],
   [
@@ -659,7 +659,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'asset-profile.asset-profiles',
       type: 'link',
       path: '/profiles/assetProfiles',
-      icon: 'mdi:alpha-a-box'
+      icon: 'mdi:alpha-a-box-outline'
     }
   ],
   [
@@ -679,7 +679,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'customer.customers',
       type: 'link',
       path: '/customers',
-      icon: 'supervisor_account'
+      icon: 'mdi:account-supervisor-outline'
     }
   ],
   [
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
index 6296614c92..08a527182f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
@@ -26,6 +26,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    color: rgba(0,0,0,0.76);
     .mat-icon {
       margin: auto !important;
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss
index 6470ed3f71..18ace8935b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss
@@ -49,6 +49,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      color: rgba(0,0,0,0.76);
       .mat-icon {
         margin: auto;
       }
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 184b07a1ba..f1a0fc0136 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -55,40 +55,40 @@
           <button mat-icon-button id="main"
                   [class.!hidden]="forceFullscreen || displaySearchMode()"
                   class="gt-sm:!hidden" (click)="sidenav.toggle()">
-            <mat-icon class="material-icons">menu</mat-icon>
+            <mat-icon>menu</mat-icon>
           </button>
           <button mat-icon-button
                   [class.!hidden]="!forceFullscreen || displaySearchMode"
                   (click)="goBack()">
-            <mat-icon class="material-icons">arrow_back</mat-icon>
-          </button>
-          <button mat-icon-button
-                  [class.!hidden]="!displaySearchMode()"
-                  (click)="closeSearch()">
-            <mat-icon class="material-icons">arrow_back</mat-icon>
+            <mat-icon>arrow_back</mat-icon>
           </button>
           <tb-breadcrumb
             [class.!hidden]="displaySearchMode()"
             class="mat-toolbar-tools flex-1">
           </tb-breadcrumb>
-          <div [class.!hidden]="!displaySearchMode()" class="flex flex-1 flex-row">
-            <mat-form-field class="tb-appearance-transparent flex-1">
-              <input #searchInput matInput
-                     [formControl]="textSearch"
-                     placeholder="{{ 'common.enter-search' | translate }}"/>
-            </mat-form-field>
-          </div>
-          <button [class.!hidden]="!searchEnabled"
-                  mat-icon-button (click)="openSearch()">
-            <mat-icon class="material-icons">search</mat-icon>
-          </button>
+          @if (searchEnabled) {
+            <div [class.!hidden]="!showSearch" [class.mr-4]="!textSearch.value" class="flex flex-1 flex-row">
+              <mat-form-field class="tb-appearance-transparent flex-1">
+                <input #searchInput matInput
+                       [formControl]="textSearch"
+                       placeholder="{{ 'common.enter-search' | translate }}"/>
+              </mat-form-field>
+            </div>
+            <button [class.!hidden]="showSearch"
+                    mat-icon-button (click)="openSearch()">
+              <mat-icon>search</mat-icon>
+            </button>
+            <button [class.!hidden]="!showSearch"
+                    mat-icon-button (click)="closeSearch()">
+              <mat-icon>close</mat-icon>
+            </button>
+          }
           <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
           @if (fullscreenEnabled) {
             <button
-              [class.!hidden]="displaySearchMode()"
               class="lt-md:!hidden"
               mat-icon-button (click)="toggleFullscreen()">
-              <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+              <mat-icon>{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
             </button>
           }
           <tb-notification-bell></tb-notification-bell>
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
index 1d0dc71f00..4938e8dc54 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
@@ -49,6 +49,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      color: rgba(0,0,0,0.76);
       .mat-icon {
         margin: auto;
       }
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 7a2966d3c4..d36a36a11a 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -185,7 +185,7 @@
           }
         </mat-drawer>
         <mat-drawer-content class="tb-rulechain-graph-content">
-          <button color="primary"
+          <button color="#fff"
                   mat-mini-fab
                   class="tb-library-node-btn"
                   (click)="drawer.toggle();"
@@ -194,7 +194,7 @@
             <mat-icon class="tb-library-node-btn-icon" [class.tb-library-node-btn-icon-toggled]="drawer.opened">chevron_right</mat-icon>
           </button>
           @if (!isImport) {
-            <button color="primary"
+            <button color="#fff"
                     type="button"
                     mat-mini-fab class="add-note-button"
                     (click)="addNote()"
@@ -203,7 +203,7 @@
               <mat-icon>sticky_note_2</mat-icon>
             </button>
             <button #versionControlButton
-                    color="primary"
+                    color="#fff"
                     type="button"
                     mat-mini-fab class="version-control-button"
                     (click)="toggleVersionControl($event, versionControlButton)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
index b38fe007e8..effb1ad7e1 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
@@ -69,7 +69,7 @@
     position: absolute;
     top: 50%;
     z-index: 1000;
-    opacity: 0.5;
+    opacity: 0.8;
     border-radius: 0 15px 15px 0 !important;
     transform: translateY(-50%);
     &-icon {
@@ -86,7 +86,7 @@
       content: "";
       pointer-events: none;
       border-radius: 0 0 0 15px;
-      box-shadow: -10px 0px 0 0px #305680;
+      box-shadow: -10px 0px 0 0px #fff;
       border: none;
     }
     &:after {
@@ -98,7 +98,7 @@
       content: "";
       pointer-events: none;
       border-top-left-radius: 15px;
-      box-shadow: -10px 0px 0px 0px #305680;
+      box-shadow: -10px 0px 0px 0px #fff;
       border: none;
     }
   }