From 748d6b8d81c3510fec5da3d4cf0790e2e8a6a151 Mon Sep 17 00:00:00 2001
From: shubhamsharma9199 <shubham.24bcs10320@sst.scaler.com>
Date: Fri, 23 Jan 2026 14:30:42 +0530
Subject: [PATCH] WEB-620:fix datatable tab layout dark theme

improve
---
 .../datatable-single-row.component.html       | 36 ++++++++++---------
 .../datatable-single-row.component.scss       | 29 ++++++++++++---
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
index ebc72bd69..3ef4f4d68 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
@@ -7,23 +7,25 @@
 -->
 
 <div class="tab-container mat-typography">
-  <h3>{{ formatTabLabel(datatableName) }}</h3>
-  <div class="layout-row align-end m-b-20">
-    @if (!dataObject.data[0]) {
-      <button mat-raised-button color="primary" (click)="add()">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
-      </button>
-    }
-    @if (dataObject.data[0]) {
-      <button mat-raised-button color="primary" (click)="edit()">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-      </button>
-    }
-    @if (dataObject.data[0]) {
-      <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-      </button>
-    }
+  <div class="layout-row align-between align-items-center m-b-20">
+    <h3>{{ formatTabLabel(datatableName) }}</h3>
+    <div class="layout-row gap-10px">
+      @if (!dataObject.data[0]) {
+        <button mat-raised-button color="primary" (click)="add()">
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+        </button>
+      }
+      @if (dataObject.data[0]) {
+        <button mat-raised-button color="primary" (click)="edit()">
+          <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+        </button>
+      }
+      @if (dataObject.data[0]) {
+        <button mat-raised-button color="warn" (click)="delete()">
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
+        </button>
+      }
+    </div>
   </div>
 
   <mat-divider></mat-divider>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
index 29410a7c6..1eccd6fc8 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
@@ -13,8 +13,12 @@
   padding: 1%;
   margin: 1%;
 
-  .delete-button {
-    margin-left: 1%;
+  h3 {
+    margin: 0;
+  }
+
+  :host-context(.dark-theme) & h3 {
+    color: rgb(255 255 255 / 87%) !important;
   }
 }
 
@@ -42,12 +46,21 @@
 
   &:hover {
     background-color: rgb(0 0 0 / 4%);
-    border-left-color: var(--primary-color, #3f51b5);
+    border-left-color: $accent;
     transform: translateY(-2px);
     box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
   }
 }
 
+:host-context(.dark-theme) .data-item {
+  background-color: rgb(255 255 255 / 3%);
+
+  &:hover {
+    background-color: rgb(255 255 255 / 6%);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  }
+}
+
 .data-label {
   font-size: 0.8125rem;
   color: rgb(0 0 0 / 54%);
@@ -57,6 +70,10 @@
   line-height: 1.2;
 }
 
+:host-context(.dark-theme) .data-label {
+  color: rgb(255 255 255 / 70%) !important;
+}
+
 .data-value {
   font-size: 1.0625rem;
   color: rgb(0 0 0 / 87%);
@@ -73,6 +90,10 @@
   }
 }
 
+:host-context(.dark-theme) .data-value {
+  color: rgb(255 255 255 / 87%) !important;
+}
+
 .default-value {
   display: flex;
   align-items: center;
@@ -90,7 +111,7 @@
 .system-defined {
   margin-top: 3px;
   background-color: rgb(63 81 181 / 8%);
-  border-left-color: #3f51b5;
+  border-left-color: $accent;
 }
 
 .long-text {