From 648397b90a457b44bb4447379bba3d00a0e81e00 Mon Sep 17 00:00:00 2001
From: JoryHogeveen <jory.johan.hogeveen@gmail.com>
Date: Mon, 18 Nov 2024 18:40:01 +0100
Subject: [PATCH] Improve holding table UI

---
 .../top-holdings/top-holdings.component.html  |  2 +-
 .../top-holdings/top-holdings.component.scss  | 90 ++++++++++---------
 2 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index efec40d58..481ed1584 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -1,6 +1,6 @@
 <div class="overflow-x-auto">
   <table
-    class="gf-table w-100"
+    class="gf-table holdings-table w-100"
     mat-table
     matSort
     matSortActive="allocationInPercentage"
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.scss b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
index 24677e702..aa5b177eb 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.scss
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .gf-table {
+  .holdings-table {
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -9,58 +9,66 @@
         }
       }
     }
-  }
 
-  tr.holding-detail {
-    height: 0;
-  }
+    tr.holding-detail {
+      height: 0;
+      &:hover {
+        // Disable hover effect.
+        background-color: var(--mat-table-background-color-even) !important;
+      }
+    }
 
-  tr:not(.expanded) + tr.holding-detail td {
-    border-bottom: 0;
-  }
+    tr.expanded {
+      background-color: var(--mat-table-background-color-even);
+    }
 
-  .holdingParents {
-    padding: 1em 0;
-    --table-padding: 0.5em;
+    tr:not(.expanded) + tr.holding-detail td {
+      border-bottom: 0;
+    }
 
-    .holdingParentProportionChart {
-      height: 2em;
+    .holdingParents {
+      padding: 1em 0;
+      --table-padding: 0.5em;
 
-      div {
-        box-sizing: border-box;
-        line-height: 2em;
-        padding: 0 var(--table-padding);
-        overflow: hidden;
+      .holdingParentProportionChart {
+        height: 2em;
 
-        &:hover {
-          filter: brightness(0.95);
+        div {
+          box-sizing: border-box;
+          line-height: 2em;
+          padding: 0 var(--table-padding);
+          overflow: hidden;
+
+          &:hover {
+            filter: brightness(0.95);
+          }
         }
       }
-    }
 
-    .colorBadge {
-      width: 0.75em;
-      height: 0.75em;
-      border-radius: 100%;
-      display: inline-block;
-    }
+      .colorBadge {
+        width: 0.75em;
+        height: 0.75em;
+        border-radius: 100%;
+        display: inline-block;
+      }
 
-    table,
-    tr,
-    th,
-    td {
-      background-color: transparent;
-    }
+      table,
+      tr,
+      th,
+      td {
+        background-color: transparent;
+      }
 
-    tr {
-      height: auto;
-      &:hover {
-        filter: brightness(0.95);
+      tr {
+        height: auto;
+        &:hover {
+          background-color: var(--mat-table-background-color-hover);
+        }
+      }
+      th,
+      td {
+        padding: var(--table-padding);
       }
-    }
-    th,
-    td {
-      padding: var(--table-padding);
     }
   }
 }