Enhancement/26 mar

package.json

@@ -12,11 +12,10 @@
     "typecheck": "nuxi typecheck"
   },
   "dependencies": {
-    "@nuxtjs/color-mode": "^4.0.0",
-    "@stripe/stripe-js": "^8.11.0",
+    "@stripe/stripe-js": "^9.1.0",
     "@tailwindcss/postcss": "^4.2.2",
     "@vueuse/core": "^14.2.1",
-    "reka-ui": "^2.9.2",
+    "reka-ui": "^2.9.5",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2"
   },

woonuxt_base/app/app.vue

@@ -59,7 +59,7 @@ useHead({
 
 html,
 body {
-  @apply bg-gray-100 dark:bg-[#18202f] text-gray-900 dark:text-gray-100;
+  @apply bg-gray-100  text-gray-900;
   scroll-behavior: smooth;
 }
 
@@ -209,7 +209,7 @@ img.skeleton {
 
 input[type='checkbox'],
 input[type='radio'] {
-  @apply bg-white border rounded-lg cursor-pointer font-sans outline-hidden border-gray-300 w-full p-3 transition-all duration-150 appearance-none hover:border-primary dark:bg-gray-700 dark:border-gray-600;
+  @apply bg-white border rounded-lg cursor-pointer font-sans outline-hidden border-gray-300 w-full p-3 transition-all duration-150 appearance-none hover:border-primary;
 
   width: 1em;
   height: 1em;
@@ -261,12 +261,12 @@ input[type='radio']:after {
 input[type='checkbox']:checked:after,
 input[type='checkbox'] + label,
 input[type='radio'] + label {
-  @apply cursor-pointer text-gray-600 dark:text-gray-400 hover:text-primary;
+  @apply cursor-pointer text-gray-600  hover:text-primary;
 }
 
 input[type='checkbox']:checked + label,
 input[type='radio']:checked + label {
-  @apply text-gray-800 dark:text-white hover:text-primary-dark;
+  @apply text-gray-800  hover:text-primary-dark;
 }
 
 input[type='checkbox']:checked,
@@ -283,4 +283,4 @@ input[type='radio']:checked:after {
   opacity: 1;
   transform: scale(1);
 }
-</style>
+</style>

woonuxt_base/app/assets/css/main.css

@@ -2,7 +2,7 @@
 
 /* Center container */
 .container {
-  @apply mx-auto px-4;
+  @apply mx-auto px-4 md:px-12 max-w-360;
 }
 
 @theme {
@@ -11,15 +11,10 @@
   --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
   --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
 
-  /* Breakpoints */
-  --breakpoint-2xl: 1400px;
-
   /* Spacing for Safe Areas */
   --spacing-safe: env(safe-area-inset-bottom);
 }
 
-@variant dark (&:where(.dark, .dark *));
-
 /* Class for no slider */
 .no-slider {
   &::-webkit-scrollbar {
@@ -30,26 +25,22 @@
 
 @layer components {
   .select {
-    @apply bg-white border rounded-md border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 appearance-none px-4 py-2 text-base leading-6 text-gray-900 dark:text-white dark:bg-gray-800;
+    @apply bg-white border rounded-md border-gray-300 hover:bg-gray-50 focus:z-20 appearance-none px-4 py-2 text-base leading-6 text-gray-900;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
     background-position: center right 10px;
     background-repeat: no-repeat;
     background-size: 1rem;
     padding-right: 2.5rem;
   }
 
-  .dark .select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23D1D5DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-  }
-
-
   .wn-form input[type='text'],
   .wn-form input[type='email'],
   .wn-form input[type='tel'],
   .wn-form input[type='password'],
   .wn-form textarea,
   .wn-form select {
-    @apply bg-white border rounded-md outline-hidden border-gray-300 shadow-inner w-full py-2 px-4 text-base text-gray-900 leading-6 dark:bg-gray-700 dark:border-gray-600 dark:text-white;
+    @apply bg-gray-50 border rounded-md border-gray-300 shadow-inner w-full py-2 px-4 text-base text-gray-900 leading-6 outline-none transition-colors;
+    @apply focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30;
   }
 
   .wn-form select {
@@ -61,16 +52,41 @@
     padding-right: 2.5rem;
   }
 
-  .dark .wn-form select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23D1D5DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  .wn-form label {
+    @apply inline-block leading-loose text-sm text-gray-700;
   }
 
-  .wn-form label {
-    @apply dark:text-gray-300;
+  .wn-form input::placeholder,
+  .wn-form textarea::placeholder {
+    @apply text-gray-400;
+  }
+
+  .wn-form input:read-only,
+  .wn-form textarea:read-only {
+    @apply bg-gray-100 border-gray-200 text-gray-900 shadow-none cursor-not-allowed;
+  }
+
+  .wn-form input:read-only:focus,
+  .wn-form input:read-only:focus-visible,
+  .wn-form textarea:read-only:focus,
+  .wn-form textarea:read-only:focus-visible {
+    @apply border-gray-200 ring-0;
+  }
+
+  .wn-form input:disabled,
+  .wn-form textarea:disabled,
+  .wn-form select:disabled {
+    @apply bg-gray-100 border-gray-200 text-gray-400 shadow-none cursor-not-allowed opacity-70;
   }
 
   .wn-form input.has-error,
   .wn-form textarea.has-error {
     @apply border-red-500;
   }
-}
+
+  .wn-form input[aria-invalid='true'],
+  .wn-form textarea[aria-invalid='true'],
+  .wn-form select[aria-invalid='true'] {
+    @apply border-red-500 ring-2 ring-red-500/25;
+  }
+}

woonuxt_base/app/components/AccountActivity.vue

@@ -117,12 +117,12 @@ const getRelativeTime = (timestamp: string) => {
   <div>
     <!-- Page Header -->
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Account Activity</h1>
-      <p class="text-gray-600 dark:text-gray-400">Track your account activity, logins, and important events</p>
+      <h1 class="text-3xl font-bold text-gray-900  mb-2">Account Activity</h1>
+      <p class="text-gray-600 ">Track your account activity, logins, and important events</p>
     </div>
 
     <!-- Filters -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xs border border-gray-100 dark:border-gray-700 p-6 mb-6">
+    <div class="bg-white  rounded-lg shadow-xs border border-gray-100  p-6 mb-6">
       <div class="flex flex-wrap gap-2">
         <button
           v-for="filter in filters"
@@ -132,17 +132,17 @@ const getRelativeTime = (timestamp: string) => {
           :class="
             selectedFilter === filter.value
               ? 'bg-primary text-white'
-              : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+              : 'bg-gray-100  text-gray-700  hover:bg-gray-200 '
           ">
           {{ filter.label }}
         </button>
       </div>
     </div>
 
     <!-- Activity Timeline -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xs border border-gray-100 dark:border-gray-700">
-      <div class="p-6 md:px-8 pb-4 border-b border-gray-100 dark:border-gray-700">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Activity</h3>
+    <div class="bg-white  rounded-lg shadow-xs border border-gray-100 ">
+      <div class="p-6 md:px-8 pb-4 border-b border-gray-100 ">
+        <h3 class="text-lg font-semibold text-gray-900 ">Recent Activity</h3>
       </div>
 
       <div class="p-6 md:p-8">
@@ -151,7 +151,7 @@ const getRelativeTime = (timestamp: string) => {
             <!-- Timeline Line -->
             <div
               v-if="index !== filteredActivities.length - 1"
-              class="absolute left-5 top-12 w-0.5 h-full bg-gray-200 dark:bg-gray-600"
+              class="absolute left-5 top-12 w-0.5 h-full bg-gray-200 "
               style="transform: translateX(-50%)"></div>
 
             <!-- Icon -->
@@ -164,24 +164,24 @@ const getRelativeTime = (timestamp: string) => {
             <!-- Content -->
             <div class="flex-1 min-w-0 pt-0.5">
               <div class="flex items-start justify-between gap-4 mb-1">
-                <h4 class="font-semibold text-gray-900 dark:text-white">{{ activity.title }}</h4>
-                <time class="text-sm text-gray-500 dark:text-gray-400 shrink-0">{{ getRelativeTime(activity.timestamp) }}</time>
+                <h4 class="font-semibold text-gray-900 ">{{ activity.title }}</h4>
+                <time class="text-sm text-gray-500  shrink-0">{{ getRelativeTime(activity.timestamp) }}</time>
               </div>
-              <p class="text-sm text-gray-600 dark:text-gray-400">{{ activity.description }}</p>
+              <p class="text-sm text-gray-600 ">{{ activity.description }}</p>
             </div>
           </div>
         </div>
 
-        <div v-else class="text-center py-12 text-gray-500 dark:text-gray-400">No activity found for this filter</div>
+        <div v-else class="text-center py-12 text-gray-500 ">No activity found for this filter</div>
       </div>
 
       <!-- Footer with export option -->
-      <div class="p-6 pt-4 bg-gray-50 dark:bg-gray-800 rounded-b-lg border-t border-gray-100 dark:border-gray-700">
-        <button class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 flex items-center gap-2 transition-colors">
+      <div class="p-6 pt-4 bg-gray-50  rounded-b-lg border-t border-gray-100 ">
+        <button class="text-sm text-gray-600  hover:text-gray-900  flex items-center gap-2 transition-colors">
           <Icon name="ion:download-outline" size="18" />
           <span>Export activity log</span>
         </button>
       </div>
     </div>
   </div>
-</template>
+</template>

woonuxt_base/app/components/AccountMyDetails.vue

@@ -4,4 +4,4 @@
     <BillingAndShipping />
     <ChangePassword />
   </div>
-</template>
+</template>