adjust some pub components

app/assets/css/main.css

@@ -3,7 +3,7 @@
 /* CSS Variables */
 :root {
   /* Medical Theme Colors */
-  --background: 210 20% 98%;
+  --background: 230 20% 98%;
   --foreground: 210 20% 15%;
   --card: 0 0% 100%;
   --card-foreground: 210 20% 15%;
@@ -162,12 +162,17 @@
 }
 
 body {
-  background-color: hsl(var(--background));
+  /* background-color: hsl(var(--background)); */
+  /* background-color: hsl(var(--background), 0.5); */
   color: hsl(var(--foreground));
   line-height: 1.5;
   margin: 0;
 }
 
+body {
+  @apply bg-slate-100 dark:bg-slate-800;
+}
+
 /* Container */
 .container {
   width: 100%;

app/components/pub/base/data-table/data-table.vue

@@ -38,7 +38,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader class="bg-gray-50">
+    <TableHeader class="bg-gray-50 dark:bg-gray-800">
       <TableRow>
         <TableHead
           v-for="(h, idx) in header[0]"
@@ -55,7 +55,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
         </TableCell>
       </TableRow>
     </TableBody>

app/components/pub/ui/card/CardContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
     <slot />
   </div>
 </template>

app/components/pub/ui/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground flex  h-10 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "