From 88db93cd94fd9da5d1b1c0b7311d93d347bac584 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 22 Jun 2026 16:02:48 +0300
Subject: [PATCH] UI: details-panel and side-panel polish for the new menu
 layout

Tighten widget-select header, details-panel sticky header padding, rule-chain page split, and rule-chain-select sidebar paddings to fit the slimmer top toolbar introduced with the new menu.
---
 .../dashboard-widget-select.component.html    |  4 +--
 .../dashboard-widget-select.component.scss    | 31 +++++--------------
 .../components/details-panel.component.html   |  2 +-
 .../components/details-panel.component.scss   |  1 +
 .../src/app/modules/home/home.component.html  |  4 +--
 .../rulechain/rulechain-page.component.html   |  2 +-
 .../rule-chain-select.component.scss          |  2 +-
 7 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 7d2ea9cdb5..07a205095a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -16,11 +16,11 @@
 
 -->
 <div class="tb-dashboard-widget-select">
-  <mat-toolbar color="primary" class="tb-widget-select-header flex flex-col">
+  <mat-toolbar class="tb-widget-select-header flex flex-col">
     <div class="tb-widget-select-title-row flex flex-row items-center">
       @if (showTopLevelWidgetModeToggle()) {
         <tb-toggle-select class="tb-top-level-widget-mode-toggle"
-                          appearance="fill-invert"
+                          appearance="fill"
                           [disablePagination]="true"
                           [(ngModel)]="selectWidgetMode">
           <tb-toggle-option value="installed" [template]="installedWidgetsOption"></tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index d77a929fd8..c8a12c55ad 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@@ -35,28 +35,24 @@ tb-dashboard-widget-select {
     width: 100%;
     height: auto;
     gap: 16px;
-    color: #fff;
     padding: 12px 12px 12px 24px;
 
     button.mat-mdc-icon-button.mat-mdc-button-base {
       --mdc-icon-button-state-layer-size: 40px;
       --mat-icon-button-state-layer-size: 40px;
-      --mdc-icon-button-icon-color: #fff;
       padding: 8px;
-      color: #fff;
     }
   }
 
   .tb-widget-select-title-row {
     gap: 8px;
     width: 100%;
-    min-height: 40px;
+    min-height: 42px;
 
     .tb-widget-select-title {
       font-size: 24px;
       line-height: 32px;
       font-weight: 400;
-      color: #fff;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -90,11 +86,6 @@ tb-dashboard-widget-select {
             }
           }
         }
-        &.tb-fill.tb-invert {
-          .mat-button-toggle.mat-button-toggle-appearance-standard {
-            color: #FFF;
-          }
-        }
       }
     }
   }
@@ -106,14 +97,14 @@ tb-dashboard-widget-select {
     .tb-widget-select-search {
       height: 40px;
       padding: 8px 12px;
-      background: rgba(255, 255, 255, 0.16);
-      border: 1px solid rgba(255, 255, 255, 0.15);
+      background: rgba(0, 0, 0, 0.03);
+      border: 1px solid rgba(0, 0, 0, 0.15);
       border-radius: 8px;
       caret-color: $tb-primary-color;
-      color: rgba(255, 255, 255, 0.84);
+      color: rgba(0, 0, 0, 0.54);
 
       mat-icon {
-        color: rgba(255, 255, 255, 0.8);
+        color: rgba(0, 0, 0, 0.54);
       }
 
       input {
@@ -124,23 +115,22 @@ tb-dashboard-widget-select {
         font-size: 16px;
         line-height: 24px;
         background: transparent;
-        color: #fff;
         border: none;
         outline: none;
 
         &::placeholder {
-          color: rgba(255, 255, 255, 0.8);
+          color: rgba(0, 0, 0, 0.54);
           opacity: 1;
         }
       }
 
       button.mat-mdc-icon-button mat-icon {
-        color: rgba(255, 255, 255, 0.8);
+        color: rgba(0, 0, 0, 0.54);
       }
 
       &.focus {
         background: #fff;
-        border-color: rgba(255, 255, 255, 0.15);
+        border-color: rgba(0, 0, 0, 0.15);
         caret-color: $tb-primary-color;
 
         mat-icon {
@@ -165,14 +155,9 @@ tb-dashboard-widget-select {
     }
 
     .tb-widget-select-sort {
-      color: #fff;
       font-weight: 500;
       font-size: 14px;
       letter-spacing: 0.25px;
-
-      mat-icon {
-        color: #fff;
-      }
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index eebb9a6db7..61f85dfa10 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <header>
-  <mat-toolbar class="details-toolbar" color="primary" [style.height]="headerHeightPx+'px'">
+  <mat-toolbar class="details-toolbar" [style.height]="headerHeightPx+'px'">
     <div class="mat-toolbar-tools flex flex-row items-center justify-start" style="height: 100%;">
       <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col items-start justify-start" [class.!hidden]="showSearchPane">
         <div class="tb-details-title flex flex-row items-center justify-start">
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.scss b/ui-ngx/src/app/modules/home/components/details-panel.component.scss
index 2344a36635..61ca19b4a7 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.scss
@@ -22,6 +22,7 @@
   flex-direction: column;
   .mat-toolbar.details-toolbar {
     padding: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
 
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 2af17d1bcb..23679c018c 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -70,18 +70,18 @@
           [class.!hidden]="displaySearchMode()"
           class="mat-toolbar-tools flex-1">
         </tb-breadcrumb>
-        <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex flex-1 flex-row">
+        <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>
-        <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
         <button [class.!hidden]="!searchEnabled"
                 mat-icon-button (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>
         </button>
+        <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
         @if (fullscreenEnabled) {
           <button
             [class.!hidden]="displaySearchMode()"
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 e506e8d87c..7a2966d3c4 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
@@ -27,7 +27,7 @@
                     #drawer
                     opened
                     position="start">
-          <mat-toolbar color="primary" class="tb-dark">
+          <mat-toolbar>
             @if (!isImport) {
               <tb-rule-chain-select
                 class="flex-1"
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
index c0cf6368d8..6f3d567691 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
@@ -21,7 +21,7 @@
     width: 100%;
 
     input {
-      color: #fff;
+      color: rgba(0,0,0,0.87);
       cursor: pointer;
       text-overflow: ellipsis;
       pointer-events: none;