Update table header color and update checkboxes

app/assets/javascripts/repositories/repository_datatable.js

@@ -413,7 +413,7 @@ var RepositoryDatatable = (function(global) {
         className: 'dt-body-center',
         sWidth: '1%',
         render: function() {
-          return "<input class='repository-row-selector' type='checkbox'>";
+          return "<input class='repository-row-selector sci-checkbox' type='checkbox'><span class='sci-checkbox-label'></span>";
         }
       }, {
         // Assigned column is not searchable

app/assets/stylesheets/extend/datatable.scss

@@ -0,0 +1,54 @@
+// scss-lint:disable SelectorDepth QualifyingElement NestingDepth
+// Data table
+
+.table.dataTable {
+  table-layout: initial;
+  text-overflow: initial;
+  width: 100%;
+  word-break: initial;
+
+  thead {
+    background-color: $color-concrete;
+
+    tr {
+      th {
+        border-bottom-width: 0;
+        border-left: 2px solid $color-white;
+        font-weight: bold;
+
+        &::after {
+          color: $color-silver-chalice;
+          font-weight: normal;
+          opacity: 1;
+        }
+
+        &:first-child {
+          border-left: 0;
+        }
+      }
+
+      th,
+      td {
+        padding: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &.selected,
+      .selected {
+        background-color: $color-alto;
+      }
+    }
+  }
+
+  .sorting_desc,
+  .sorting_asc {
+    background-color: $color-alto;
+
+    &::after {
+      color: $color-volcano;
+    }
+  }
+}

app/assets/stylesheets/repositories.scss

@@ -130,6 +130,12 @@
         }
       }
     }
+
+    .dataTables_scrollBody {
+      thead {
+        opacity: 0;
+      }
+    }
   }
 
   .pagination-row {
@@ -140,7 +146,7 @@
     display: flex;
     height: 68px;
     left: var(--repository-sidebar-margin);
-    padding: 0 32px;
+    padding: 0 142px 0 32px;
     position: fixed;
     transition: .4s;
     width: calc(100% - var(--repository-sidebar-margin));

app/assets/stylesheets/repository/repository_table.scss

@@ -43,7 +43,7 @@
     }
 
     .assign-counter-container {
-      border-radius: 2px;
+      border-radius: $border-radius-tag;
       cursor: pointer;
       display: inline-block;
       height: calc(100% - 2px);
@@ -103,6 +103,7 @@
         .repository-row-edit-icon {
           display: inline-block;
         }
+
         .assign-counter-container {
           margin-left: 0;
         }
@@ -121,6 +122,7 @@
           .repository-row-edit-icon {
             display: none;
           }
+
           .assign-counter-container {
             margin-left: 30px;
           }

app/assets/stylesheets/shared_styles/elements/checkboxes.scss

@@ -18,8 +18,8 @@ input[type="checkbox"].sci-checkbox {
     display: inline-block;
     flex-shrink: 0;
     height: var(--sci-checkbox-size);
-    margin-left: calc((var(--sci-checkbox-size) * -1) - 3px);
-    position: relative;
+    margin-left: calc(var(--sci-checkbox-size) * -1);
+    position: absolute;
     width: var(--sci-checkbox-size);
 
     &::before {

app/assets/stylesheets/themes/scinote.scss

@@ -1172,51 +1172,6 @@ ul.content-activities {
   width: 100%;
 }
 
-/* Data table */
-
-table.dataTable {
-  background-color: $color-alabaster;
-  table-layout: initial;
-  text-overflow: initial;
-  width: 100%;
-  word-break: initial;
-
-  thead {
-    background-color: $color-silver-chalice;
-  }
-
-  thead > tr > th {
-    border-bottom-width: 0;
-    border-left: 2px solid $color-alabaster;
-    color: $color-white;
-    font-weight: normal;
-  }
-
-  thead > tr > th:first-child {
-    border-left: none;
-  }
-
-  thead > tr > th,
-  thead > tr > td {
-    padding: 8px;
-  }
-
-  tbody > tr.selected,
-  tbody > tr > .selected {
-    background-color: $color-alto !important;
-    color: $color-emperor !important;
-
-    a {
-      color: $brand-primary !important;
-    }
-  }
-
-  .sorting_desc,
-  .sorting_asc {
-    background-color: $brand-primary;
-  }
-}
-
 /* Helpers */
 .line-wrap {
   overflow: hidden;

app/views/repositories/_repository_table.html.erb

@@ -22,7 +22,10 @@
     data-editable="<%= can_manage_repository_rows?(repository) %>">
     <thead>
       <tr>
-        <th id="checkbox"><input name="select_all" value="1" type="checkbox"></th>
+        <th id="checkbox">
+            <input name="select_all" value="1" type="checkbox" class="sci-checkbox">
+            <span class="sci-checkbox-label"></span>
+        </th>
         <th id="assigned"><%= t("repositories.table.assigned") %></th>
         <th id="row-id"><%= t("repositories.table.id") %></th>
         <th id="row-name"><%= t("repositories.table.row_name") %></th>