completed ng-class wrapping

src/app/components/analysis-panel/drug-table/drug-table.component.html

-<p-table *ngIf="tableDrugs.length > 0" [value]="tableDrugs">
+<p-table *ngIf="tableDrugs.length > 0" [value]="tableDrugs" class="drgstn">
   <ng-template pTemplate="header">
     <tr>
       <th [pSortableColumn]="'drugId'">

src/app/components/analysis-panel/prot-table/prot-table.component.html

 <p-table *ngIf="tableProteins.length > 0" selectionMode="multiple"
          [value]="tableProteins" [selection]="tableSelectedProteins" dataKey="uniprotAc"
-         (selectionChange)="tableProteinSelection($event)">
+         (selectionChange)="tableProteinSelection($event)" class="drgstn">
   <ng-template pTemplate="header">
     <tr>
       <th class="checkbox-col">
-        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+        <p-tableHeaderCheckbox class="drgstn"></p-tableHeaderCheckbox>
       </th>
       <th [pSortableColumn]="'uniprotAc'">
         UniProt Code
@@ -35,7 +35,7 @@
   <ng-template pTemplate="body" let-e>
     <tr>
       <td>
-        <p-tableCheckbox [value]="e"></p-tableCheckbox>
+        <p-tableCheckbox [value]="e" class="drgstn"></p-tableCheckbox>
       </td>
       <td><a href="https://www.uniprot.org/uniprot/{{ e.uniprotAc }}" target="_blank">{{ e.uniprotAc }}</a></td>
       <td>{{e.symbol}}</td>

src/stylesheets/primeng.scss

@@ -2,41 +2,6 @@
 @import "../../node_modules/primeng/resources/primeng.min.css";
 @import "../../node_modules/primeicons/primeicons.css";
 
-.-datatable .p-sortable-column .p-sortable-column-icon {
-  color: inherit !important;
-}
-
-.p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
-  background-color: var(--drgstn-panel) !important;
-  border-color: var(--drgstn-border) !important;
-  color: var(--drgstn-text-primary) !important;
-}
-
-.p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column:not(.p-highlight):hover, .p-datatable .p-sortable-column.p-highlight:hover {
-  background-color: var(--drgstn-panel) !important;
-  border-color: var(--drgstn-border) !important;
-  color: var(--drgstn-primary) !important;
-}
-
-
-.p-checkbox .p-checkbox-box {
-  border-color: var(--drgstn-text-primary) !important;
-  color: var(--drgstn-text-primary) !important;
-  background-color: var(--drgstn-panel) !important;
-  border-radius: 1px !important;
-  border-style: solid !important;
-  width: 18px !important;
-  height: 18px !important;
-  position: relative !important;
-}
-
-.p-datatable .p-datatable-tbody > tr > td, .button.is-light {
-  border-color: var(--drgstn-border) !important;
-  background-color: var(--drgstn-panel) !important;
-  color: var(--drgstn-text-primary) !important;
-}
-
-
 .drgstn {
   .p-tooltip-text, .p-tooltip-arrow {
     background: var(--drgstn-tooltip) !important;
@@ -59,4 +24,44 @@
     border-top: 6px solid var(--drgstn-tooltip);
     transform: translate(-50%, calc(100% + 3px));
   }
+
+  .p-checkbox .p-checkbox-box {
+    border-color: var(--drgstn-text-primary) !important;
+    color: var(--drgstn-text-primary) !important;
+    background-color: var(--drgstn-panel) !important;
+    border-radius: 1px !important;
+    border-style: solid !important;
+    width: 18px !important;
+    height: 18px !important;
+    position: relative !important;
+  }
+
+  .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before {
+    top: 8px!important;
+    left: 2px !important;
+  }
+
+  p.-datatable .p-sortable-column .p-sortable-column-icon {
+    color: inherit !important;
+  }
+
+  .p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
+    background-color: var(--drgstn-panel) !important;
+    border-color: var(--drgstn-border) !important;
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column:not(.p-highlight):hover, .p-datatable .p-sortable-column.p-highlight:hover {
+    background-color: var(--drgstn-panel) !important;
+    border-color: var(--drgstn-border) !important;
+    color: var(--drgstn-primary) !important;
+  }
+
+
+  .p-datatable .p-datatable-tbody > tr > td, .button.is-light {
+    border-color: var(--drgstn-border) !important;
+    background-color: var(--drgstn-panel) !important;
+    color: var(--drgstn-text-primary) !important;
+  }
+
 }