feat: Dark Mode (#7471)

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -1,20 +1,19 @@
 table {
-  border-spacing: 0;
-  font-size: var(--font-size-small);
+  @apply border-spacing-0 text-sm;
 
   thead {
     th {
-      @apply font-medium text-left uppercase text-slate-900 dark:text-slate-200;
+      @apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
     }
   }
 
   tbody {
     tr {
-      @apply border-b border-slate-50 dark:border-slate-700;
+      @apply border-b border-slate-50 dark:border-slate-800/30;
     }
 
     td {
-      padding: var(--space-small);
+      @apply p-2.5 text-slate-700 dark:text-slate-100;
     }
   }
 }
@@ -22,37 +21,68 @@ table {
 .woot-table {
   tr {
     .show-if-hover {
-      opacity: 0;
       transition: opacity 0.2s $swift-ease-out-function;
+      @apply opacity-0;
     }
 
     &:hover {
       .show-if-hover {
-        opacity: 1;
+        @apply opacity-100;
       }
     }
   }
 
   .agent-name {
-    display: block;
-    font-weight: var(--font-weight-medium);
-    text-transform: capitalize;
+    @apply block font-medium capitalize;
   }
 
   .woot-thumbnail {
-    border-radius: 50%;
-    height: 3.125rem;
-    width: 3.125rem;
+    @apply rounded-full h-[3.125rem] w-[3.125rem];
   }
 
   .button-wrapper {
-    @include flex-align(left, null);
-    @include flex;
-    flex-direction: row;
-    min-width: 12.5rem;
+    @apply flex justify-start flex-row min-w-[12.5rem] gap-1;
   }
 
   .button {
     margin: 0;
   }
 }
+
+.ve-table {
+  .ve-table-container.ve-table-border-around {
+    @apply border-slate-200 dark:border-slate-700;
+  }
+
+  .ve-table-content {
+    .ve-table-header .ve-table-header-tr .ve-table-header-th {
+      @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
+    }
+
+    .ve-table-body .ve-table-body-tr .ve-table-body-td {
+      @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
+    }
+
+    .ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
+      @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
+    }
+  }
+}
+
+.table-pagination {
+  .ve-pagination-total {
+    @apply text-slate-600 dark:text-slate-200;
+  }
+
+  .ve-pagination-goto {
+    @apply text-slate-600 dark:text-slate-200;
+  }
+
+  .ve-pagination-li {
+    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
+  }
+
+  .ve-pagination-goto-input {
+    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
+  }
+}