Merge pull request #1202 from rocket-admin/records-view

table view: update foreign key styling

Author: lyubov-voloshko

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 {

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])">