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,10 +9,17 @@
         }
       }
     }
-  }
 
     tr.holding-detail {
       height: 0;
+      &:hover {
+        // Disable hover effect.
+        background-color: var(--mat-table-background-color-even) !important;
+      }
+    }
+
+    tr.expanded {
+      background-color: var(--mat-table-background-color-even);
     }
 
     tr:not(.expanded) + tr.holding-detail td {
@@ -55,7 +62,7 @@
       tr {
         height: auto;
         &:hover {
-        filter: brightness(0.95);
+          background-color: var(--mat-table-background-color-hover);
         }
       }
       th,
@@ -63,4 +70,5 @@
         padding: var(--table-padding);
       }
     }
+  }
 }