From 0fcd93cb7df67686fa3d8a8aa8a51fe604140569 Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Thu, 27 Nov 2025 14:59:22 +0700
Subject: [PATCH] feat(hackathon): update dark mode onboarding and edit profile

---
 .../src/app/onboarding/user/page.tsx          | 26 +++++++++----------
 apps/hackathon/src/app/profile/page.tsx       | 12 ++++-----
 .../src/molecules/input-field/input-field.tsx |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/hackathon/src/app/onboarding/user/page.tsx b/apps/hackathon/src/app/onboarding/user/page.tsx
index 4f0b6c0..a21b308 100644
--- a/apps/hackathon/src/app/onboarding/user/page.tsx
+++ b/apps/hackathon/src/app/onboarding/user/page.tsx
@@ -104,13 +104,13 @@ const UserOnboardingPage: FC = (): ReactElement => {
   });
 
   return (
-    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950 px-4 py-8">
-      <div className="bg-white dark:bg-neutral-900 w-full max-w-2xl p-8 rounded-xl shadow-lg dark:shadow-neutral-950/50">
+    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4 py-8">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-xl shadow-lg dark:shadow-gray-950/50">
         <div className="mb-6">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Complete Your Profile
           </h1>
-          <p className="text-gray-600 font-sans dark:text-neutral-400">
+          <p className="text-gray-600 font-sans dark:text-gray-400">
             Tell us more about yourself to get started
           </p>
         </div>
@@ -123,15 +123,15 @@ const UserOnboardingPage: FC = (): ReactElement => {
                 <img
                   src={avatarPreview}
                   alt="Avatar preview"
-                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700"
+                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-gray-700"
                 />
               ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
+                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                   <Icon
                     icon="ic:baseline-person"
                     width="48"
                     height="48"
-                    className="text-gray-400 dark:text-neutral-500"
+                    className="text-gray-400 dark:text-gray-500"
                   />
                 </div>
               )}
@@ -149,7 +149,7 @@ const UserOnboardingPage: FC = (): ReactElement => {
                   onChange={handleAvatarChange}
                 />
               </label>
-              <p className="text-xs text-gray-500 dark:text-neutral-500 mt-2 text-center">
+              <p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
                 Optional, but highly recommended
               </p>
             </div>
@@ -168,7 +168,7 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
           {/* City */}
           <div className="space-y-2">
-            <label className="block text-base font-medium text-gray-700 dark:text-neutral-300">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               City <span className="text-red-500">*</span>
             </label>
             <Controller
@@ -187,7 +187,7 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
           {/* Role/Skills */}
           <div className="space-y-2">
-            <label className="block text-base font-medium text-gray-700 dark:text-neutral-300">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               Role / Skills
             </label>
             <Controller
@@ -210,9 +210,9 @@ const UserOnboardingPage: FC = (): ReactElement => {
                               : (field.value || []).filter((v) => v !== role);
                             field.onChange(newValue);
                           }}
-                          className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 dark:text-primary-500 focus:ring-blue-500 dark:focus:ring-primary-500 dark:bg-neutral-800"
+                          className="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-primary-500 focus:ring-blue-500 dark:focus:ring-primary-500 dark:bg-gray-800"
                         />
-                        <span className="text-sm dark:text-neutral-300">
+                        <span className="text-sm dark:text-gray-300">
                           {role}
                         </span>
                       </label>
@@ -225,9 +225,9 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
           {/* Bio */}
           <div className="space-y-2">
-            <label className="block text-base font-medium text-gray-700 dark:text-neutral-300">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               Bio{' '}
-              <span className="text-gray-400 dark:text-neutral-500">
+              <span className="text-gray-400 dark:text-gray-500">
                 (Optional)
               </span>
             </label>
diff --git a/apps/hackathon/src/app/profile/page.tsx b/apps/hackathon/src/app/profile/page.tsx
index 2e22689..b09dee9 100644
--- a/apps/hackathon/src/app/profile/page.tsx
+++ b/apps/hackathon/src/app/profile/page.tsx
@@ -138,8 +138,8 @@ const ProfilePage: FC = (): ReactElement => {
   const isLoading = isUpdating || isUploading;
 
   return (
-    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex flex-col justify-center items-center px-4 py-8 z-50 overflow-y-auto">
-      <div className="bg-white dark:bg-neutral-900 w-full max-w-md p-8 rounded-xl shadow-xl dark:shadow-neutral-950/50">
+    <div className=" bg-black/30 dark:bg-black/50 backdrop-blur-sm flex flex-col justify-center items-center px-4 py-8 z-50 overflow-y-auto">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-xl border dark:boder-gray-800">
         <div className="mb-6">
           <div className="flex items-center justify-between mb-2">
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -180,7 +180,7 @@ const ProfilePage: FC = (): ReactElement => {
                   className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
                 />
               ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-neutral-600 transition-colors">
+                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
                   <Icon
                     icon="ic:baseline-person"
                     width="48"
@@ -241,7 +241,7 @@ const ProfilePage: FC = (): ReactElement => {
 
           {/* City */}
           <div className="space-y-2">
-            <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
+            <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
               City
             </label>
             <Controller
@@ -283,7 +283,7 @@ const ProfilePage: FC = (): ReactElement => {
                               : (field.value || []).filter((v) => v !== role);
                             field.onChange(newValue);
                           }}
-                          className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-neutral-800"
+                          className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
                         />
                         <span className="text-sm dark:text-neutral-300">
                           {role}
@@ -313,7 +313,7 @@ const ProfilePage: FC = (): ReactElement => {
                     {...field}
                     placeholder="Tell us about yourself..."
                     rows={4}
-                    className="w-full"
+                    className="w-full font-sans"
                     size="lg"
                   />
                   {fieldState.error && (
diff --git a/libs/ui/src/molecules/input-field/input-field.tsx b/libs/ui/src/molecules/input-field/input-field.tsx
index 1249cbb..bd1fbf3 100644
--- a/libs/ui/src/molecules/input-field/input-field.tsx
+++ b/libs/ui/src/molecules/input-field/input-field.tsx
@@ -56,7 +56,7 @@ export const InputField: FC<TInputFieldProps> = ({
       <label
         htmlFor={htmlFor}
         className={cn(
-          'items-start justify-item-start text-start text-neutral-800! dark:text-gray-300!',
+          'items-start justify-item-start text-start text-neutral-800! dark:text-neutral-300!',
           sizeClasses[size].label
         )}
       >