Update styles of species search results table (#1063)

- Fixed styles for the header of sortable table columns,
   such that the text of the header is has more weight when the column sorting is active
- Added centered text alignment for the dots in the species results table
- Fixed the occasionally disappearing background of the header of DataTable

src/content/app/species-selector/components/species-search-results-table/SpeciesSearchResultsTable.scss

@@ -35,3 +35,7 @@
   color: $medium-dark-grey;
   --dot-solid-color: #{$medium-light-grey};
 }
+
+.centered {
+  text-align: center;
+}

src/content/app/species-selector/components/species-search-results-table/SpeciesSearchResultsTable.tsx

@@ -193,10 +193,10 @@ const SpeciesSearchResultsTable = (props: Props) => {
                     ? formatNumber(searchMatch.contig_n50)
                     : '-'}
                 </td>
-                <td>
+                <td className={styles.centered}>
                   {searchMatch.has_variation ? <SolidDot /> : <EmptyDot />}
                 </td>
-                <td>
+                <td className={styles.centered}>
                   {searchMatch.has_regulation ? <SolidDot /> : <EmptyDot />}
                 </td>
                 <td>{searchMatch.annotation_provider}</td>

src/shared/components/data-table/DataTable.scss

@@ -15,23 +15,16 @@
 }
 
 .table {
-  --table-background: $white;
+  --table-background: #{$white};
 
   thead {
     tr {
-      background-color: $white;
       z-index: 1;
     }
   }
 
   &ThemeDark {
-    --table-background: $light-grey;
-
-    thead {
-      tr {
-        background-color: $light-grey;
-      }
-    }
+    --table-background: #{$light-grey};
   }
 
   td {

src/shared/components/table/ColumnHead.scss

@@ -22,12 +22,12 @@
   align-items: baseline;
   justify-content: start;
   column-gap: var( --_sort-arrow-right-margin);
-  font-weight: $light;
+  font-weight: inherit;
   text-align: left;
 }
 
 .columnHeadSortingApplied {
-  font-weight: $bold;
+  --table-head-font-weight: #{$normal};
 }
 
 .sortArrow {