From 85ea517f15aa1c96c2c0df85ad1cc9406ea025e5 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 9 Jun 2025 16:03:33 +0300
Subject: [PATCH] table view: update foreign key styling

---
 .../dashboard/db-table/db-table.component.css         | 11 ++++++++---
 .../dashboard/db-table/db-table.component.html        |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.css b/frontend/src/app/components/dashboard/db-table/db-table.component.css
index bca082cda..5bcc5b3b8 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.css
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.css
@@ -537,13 +537,18 @@ tr.mat-row:hover {
     background: transparent;
     border: none;
     color: var(--color-accentedPalette-500);
-    text-decoration: underline;
     font-size: inherit;
+    padding: 2px 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    width: 100%;
 }
 
 .foreign-key-button_selected {
-    color: var(--color-accentedPalette-700);
-    font-weight: 600;
+    background-color: var(--color-accentedPalette-100);
+    border-radius: 12px;
+    border: 1px solid var(--color-accentedPalette-300);
 }
 
 .empty-table {
diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.html b/frontend/src/app/components/dashboard/db-table/db-table.component.html
index 58db7b6e1..ab93ad4c2 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.html
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.html
@@ -216,7 +216,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                 <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!isSortable(column)"> {{ tableData.dataNormalizedColumns[column] }} </mat-header-cell>
                 <mat-cell *matCellDef="let element; let i = index" [attr.data-label]="tableData.dataNormalizedColumns[column]" class="db-table-cell" data-hj-suppress>
                     <div class="table-cell-content">
-                        <span *ngIf="isForeignKey(column); else contentCell" class="field-value">
+                        <span *ngIf="isForeignKey(column); else contentCell" class="field-value field-value_foreign-key">
                             <!--<a routerLink="/dashboard/{{connectionID}}/{{tableData.foreignKeys[column].referenced_table_name}}/entry"
                                 class="foreign-key-link"
                                 [queryParams]="getForeignKeyQueryParams(tableData.foreignKeys[column], element[column])">