Improve holding table UI

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"

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 {
+    tr.holding-detail {
-    height: 0;
+      height: 0;
-  }
+      &:hover {
+        // Disable hover effect.
+        background-color: var(--mat-table-background-color-even) !important;
+      }
+    }
 
-  tr:not(.expanded) + tr.holding-detail td {
+    tr.expanded {
-    border-bottom: 0;
+      background-color: var(--mat-table-background-color-even);
-  }
+    }
 
-  .holdingParents {
+    tr:not(.expanded) + tr.holding-detail td {
-    padding: 1em 0;
+      border-bottom: 0;
-    --table-padding: 0.5em;
+    }
 
-    .holdingParentProportionChart {
+    .holdingParents {
-      height: 2em;
+      padding: 1em 0;
+      --table-padding: 0.5em;
 
-      div {
+      .holdingParentProportionChart {
-        box-sizing: border-box;
+        height: 2em;
-        line-height: 2em;
-        padding: 0 var(--table-padding);
-        overflow: hidden;
 
-        &:hover {
+        div {
-          filter: brightness(0.95);
+          box-sizing: border-box;
+          line-height: 2em;
+          padding: 0 var(--table-padding);
+          overflow: hidden;
+
+          &:hover {
+            filter: brightness(0.95);
+          }
         }
       }
-    }
 
-    .colorBadge {
+      .colorBadge {
-      width: 0.75em;
+        width: 0.75em;
-      height: 0.75em;
+        height: 0.75em;
-      border-radius: 100%;
+        border-radius: 100%;
-      display: inline-block;
+        display: inline-block;
-    }
+      }
 
-    table,
+      table,
-    tr,
+      tr,
-    th,
+      th,
-    td {
+      td {
-      background-color: transparent;
+        background-color: transparent;
-    }
+      }
 
-    tr {
+      tr {
-      height: auto;
+        height: auto;
-      &:hover {
+        &:hover {
-        filter: brightness(0.95);
+          background-color: var(--mat-table-background-color-hover);
+        }
+      }
+      th,
+      td {
+        padding: var(--table-padding);
       }
-    }
-    th,
-    td {
-      padding: var(--table-padding);
     }
   }
 }