From 0017aff5f4727055b5f31b0ebb0f9e88ef50cbbe Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Thu, 27 Nov 2025 16:08:39 +0700
Subject: [PATCH] feat(hackathon): dark mode for user page

---
 .../src/app/users/[userId]/layout.tsx         | 24 ++++--
 .../hackathon/src/app/users/[userId]/page.tsx | 83 +++++++++++--------
 2 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/apps/hackathon/src/app/users/[userId]/layout.tsx b/apps/hackathon/src/app/users/[userId]/layout.tsx
index d9dd3cd..978bb39 100644
--- a/apps/hackathon/src/app/users/[userId]/layout.tsx
+++ b/apps/hackathon/src/app/users/[userId]/layout.tsx
@@ -6,21 +6,33 @@ const UserDetailLayout: FC = (): ReactElement => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-neutral-950">
+    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       <div className="flex-1 flex flex-col overflow-auto">
         {/* Mobile Header with Hamburger */}
-        <div className="lg:hidden bg-white dark:bg-neutral-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
+        <div className="lg:hidden bg-white dark:bg-gray-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
           <button
             onClick={() => setSidebarOpen(true)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
           >
-            <svg className="w-6 h-6 text-gray-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            <svg
+              className="w-6 h-6 text-gray-600 dark:text-neutral-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
             </svg>
           </button>
-          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">Hackathon</h1>
+          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
+            Hackathon
+          </h1>
         </div>
 
         <main className="flex-1 overflow-auto">
diff --git a/apps/hackathon/src/app/users/[userId]/page.tsx b/apps/hackathon/src/app/users/[userId]/page.tsx
index 3d030cf..a6386e8 100644
--- a/apps/hackathon/src/app/users/[userId]/page.tsx
+++ b/apps/hackathon/src/app/users/[userId]/page.tsx
@@ -5,6 +5,7 @@ import {
   useUserDetailsById,
   useTeamsByUserId,
 } from '@imphnen-frontend-service/service';
+import { Icon } from '@iconify/react';
 
 const UserProfilePage: FC = (): ReactElement => {
   const { userId } = useParams<{ userId: string }>();
@@ -17,8 +18,8 @@ const UserProfilePage: FC = (): ReactElement => {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-gray-600 dark:text-neutral-400">
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-gray-600 dark:text-gray-400">
           Loading user profile...
         </div>
       </div>
@@ -27,7 +28,7 @@ const UserProfilePage: FC = (): ReactElement => {
 
   if (error || !user) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
           User not found
         </h2>
@@ -42,9 +43,9 @@ const UserProfilePage: FC = (): ReactElement => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       {/* Header */}
-      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
           <div className="flex items-start justify-between">
             <div className="flex items-center space-x-3 md:space-x-4">
@@ -52,12 +53,12 @@ const UserProfilePage: FC = (): ReactElement => {
                 <img
                   src={user.avatar}
                   alt={user.fullname}
-                  className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white dark:border-neutral-800 shadow-lg"
+                  className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-lg"
                 />
               ) : (
-                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center border-4 border-white dark:border-neutral-800 shadow-lg">
-                  <span className="text-gray-500 dark:text-neutral-400 text-2xl md:text-3xl">
-                    👤
+                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-lg">
+                  <span className="text-gray-500 dark:text-gray-400 text-2xl md:text-3xl">
+                    <Icon icon="mdi:account-circle" className="w-10 h-10" />
                   </span>
                 </div>
               )}
@@ -65,13 +66,17 @@ const UserProfilePage: FC = (): ReactElement => {
                 <h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white">
                   {user.fullname}
                 </h1>
-                <p className="text-sm md:text-base text-gray-600 dark:text-neutral-400 mt-1">
+                <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1">
                   {user.email}
                 </p>
                 {user.location && (
                   <div className="flex items-center space-x-4 mt-2">
-                    <span className="text-sm text-gray-500 dark:text-neutral-500">
-                      📍 {user.location}
+                    <span className="text-sm text-gray-500 dark:text-gray-500">
+                      <Icon
+                        icon="mdi:map-marker"
+                        className="inline-block w-4 h-4 mr-1"
+                      />
+                      {user.location}
                     </span>
                   </div>
                 )}
@@ -90,11 +95,11 @@ const UserProfilePage: FC = (): ReactElement => {
           <div className="lg:col-span-2 space-y-4 md:space-y-6">
             {/* About Section */}
             {user.bio && (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6 overflow-hidden">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6 overflow-hidden">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                   About
                 </h2>
-                <p className="text-gray-700 dark:text-neutral-300 break-all overflow-wrap-anywhere">
+                <p className="text-gray-700 dark:text-gray-300 break-all overflow-wrap-anywhere font-sans">
                   {user.bio}
                 </p>
               </div>
@@ -102,7 +107,7 @@ const UserProfilePage: FC = (): ReactElement => {
 
             {/* Skills Section */}
             {user.skills && user.skills.length > 0 && (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                   Skills
                 </h2>
@@ -110,7 +115,7 @@ const UserProfilePage: FC = (): ReactElement => {
                   {user.skills.map((skill: string) => (
                     <span
                       key={skill}
-                      className="inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-primary-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 dark:hover:bg-primary-700 transition-colors"
+                      className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
                     >
                       {skill}
                     </span>
@@ -121,7 +126,7 @@ const UserProfilePage: FC = (): ReactElement => {
 
             {/* Teams Section */}
             {userTeams.length > 0 ? (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                   Teams ({userTeams.length})
                 </h2>
@@ -130,37 +135,47 @@ const UserProfilePage: FC = (): ReactElement => {
                     <Link
                       key={team.id}
                       to={'/teams/' + team.id}
-                      className="bg-white dark:bg-neutral-800 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden hover:shadow-lg transition-shadow"
+                      className="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden hover:shadow-lg transition-shadow"
                     >
-                      <img
-                        src={team.banner || '/images/banner-imphnen.webp'}
-                        alt={team.name}
-                        className="w-full h-24 object-cover"
-                      />
+                      <div className="w-full aspect-3/1">
+                        <img
+                          src={team.banner}
+                          alt={team.name}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
                       <div className="p-4">
                         <div className="flex items-center space-x-3 mb-2">
                           {team.logo && (
                             <img
                               src={team.logo}
                               alt={team.name}
-                              className="w-10 h-10 rounded-full object-cover"
+                              className="w-12 h-12 rounded-full object-cover"
                             />
                           )}
                           <div className="flex-1 min-w-0">
-                            <h3 className="font-bold text-gray-900 dark:text-white line-clamp-2">
+                            <h3 className="font-bold text-gray-900 dark:text-white line-clamp-2 mb-1">
                               {team.name}
                             </h3>
-                            <div className="text-sm text-gray-600 dark:text-neutral-400 flex gap-2">
+                            <div className="text-sm text-gray-600 dark:text-gray-400 flex gap-2 font-sans">
                               <p className="truncate flex-1 min-w-0">
-                                📍 {team.city}
+                                <Icon
+                                  icon="mdi:map-marker"
+                                  className="inline-block w-4 h-4 mr-1"
+                                />
+                                {team.city}
                               </p>
                               <p className="whitespace-nowrap shrink-0">
-                                👥 {team.members?.length || 0} members
+                                <Icon
+                                  icon="mdi:account-group"
+                                  className="inline-block w-4 h-4 mr-1"
+                                />
+                                {team.members?.length || 0} members
                               </p>
                             </div>
                           </div>
                         </div>
-                        <p className="text-gray-600 dark:text-neutral-400 text-sm line-clamp-2">
+                        <p className="text-gray-600 dark:text-gray-400 text-base line-clamp-2 font-sans">
                           {team.description}
                         </p>
                       </div>
@@ -169,13 +184,13 @@ const UserProfilePage: FC = (): ReactElement => {
                 </div>
               </div>
             ) : (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                   Teams
                 </h2>
                 <div className="text-center py-8">
                   <div className="text-4xl mb-3">👥</div>
-                  <p className="text-gray-600 dark:text-neutral-400">
+                  <p className="text-gray-600 dark:text-gray-400">
                     Not in any team yet
                   </p>
                 </div>
@@ -186,13 +201,13 @@ const UserProfilePage: FC = (): ReactElement => {
           {/* Sidebar */}
           <div className="space-y-4 md:space-y-6">
             {/* Contact Info */}
-            <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
               <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                 Contact Information
               </h3>
               <div className="space-y-3">
                 <div>
-                  <p className="text-sm text-gray-600 dark:text-neutral-400">
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
                     Email
                   </p>
                   <p className="text-gray-900 dark:text-white font-medium">
@@ -201,7 +216,7 @@ const UserProfilePage: FC = (): ReactElement => {
                 </div>
                 {user.location && (
                   <div>
-                    <p className="text-sm text-gray-600 dark:text-neutral-400">
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
                       Location
                     </p>
                     <p className="text-gray-900 dark:text-white font-medium">