From 4a3ef1cf79d3accb6aa465bb7d12859c4f5773ef Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Wed, 24 Sep 2025 13:37:36 +0700
Subject: [PATCH] adjust some pub components

---
 app/assets/css/main.css                           | 9 +++++++--
 app/components/pub/base/data-table/data-table.vue | 4 ++--
 app/components/pub/ui/card/CardContent.vue        | 2 +-
 app/components/pub/ui/input/Input.vue             | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7e7f0b70..7c699282 100644
--- a/app/assets/css/main.css
+++ b/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%;
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index ccb41100..e4413432 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/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>
diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
index 1f304071..2c5eda28 100644
--- a/app/components/pub/ui/card/CardContent.vue
+++ b/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>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 2d06d4d5..6acffbae 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/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,
       )
     "