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,23 +2,29 @@
 @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;
+.drgstn {
+  .p-tooltip-text, .p-tooltip-arrow {
+    background: var(--drgstn-tooltip) !important;
+    border-radius: 2px !important;
+    padding: .5rem 1rem .5rem 1rem !important;
+    color: var(--drgstn-text-secondary) !important;
+    font-size: .75rem !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-tooltip-text:before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    left: 50%;
+    bottom: +7px;
+    border: 6px solid transparent;
+    border-bottom: 0;
+    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;
@@ -30,33 +36,32 @@
     position: relative !important;
   }
 
-.p-datatable .p-datatable-tbody > tr > td, .button.is-light {
-  border-color: var(--drgstn-border) !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;
   }
 
-
-.drgstn {
-  .p-tooltip-text, .p-tooltip-arrow {
-    background: var(--drgstn-tooltip) !important;
-    border-radius: 2px !important;
-    padding: .5rem 1rem .5rem 1rem !important;
-    color: var(--drgstn-text-secondary) !important;
-    font-size: .75rem !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-tooltip-text:before {
-    content: '';
-    position: absolute;
-    display: block;
-    width: 0;
-    left: 50%;
-    bottom: +7px;
-    border: 6px solid transparent;
-    border-bottom: 0;
-    border-top: 6px solid var(--drgstn-tooltip);
-    transform: translate(-50%, calc(100% + 3px));
+  .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;
   }
+
 }