From f81a7c334ecb3c3742d6c6080445e255f3191d10 Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Thu, 27 Nov 2025 13:06:13 +0700
Subject: [PATCH] feat(hackathon): dashboard UI improvement and dark mode
 adjustment

---
 apps/hackathon/src/app/dashboard/layout.tsx |  8 +-
 apps/hackathon/src/app/dashboard/page.tsx   | 88 ++++++++++++---------
 apps/hackathon/src/components/sidebar.tsx   | 20 ++---
 3 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/apps/hackathon/src/app/dashboard/layout.tsx b/apps/hackathon/src/app/dashboard/layout.tsx
index 7bd34ef..5360727 100644
--- a/apps/hackathon/src/app/dashboard/layout.tsx
+++ b/apps/hackathon/src/app/dashboard/layout.tsx
@@ -6,18 +6,18 @@ const DashboardLayout: 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">
         {/* Mobile Header with Hamburger */}
-        <div className="lg:hidden sticky top-0 bg-white dark:bg-neutral-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
+        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-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"
+              className="w-6 h-6 text-gray-600 dark:text-gray-400"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
diff --git a/apps/hackathon/src/app/dashboard/page.tsx b/apps/hackathon/src/app/dashboard/page.tsx
index 9c0deae..a3cf454 100644
--- a/apps/hackathon/src/app/dashboard/page.tsx
+++ b/apps/hackathon/src/app/dashboard/page.tsx
@@ -41,13 +41,13 @@ const DashboardPage: FC = (): ReactElement => {
   };
 
   return (
-    <div className="p-8 max-w-7xl mx-auto">
+    <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto overflow-hidden">
       <div className="mb-8">
         <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
           Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
         </h1>
         {user?.location && (
-          <p className="text-gray-600 dark:text-neutral-400 mt-1 font-sans flex items-center space-x-1">
+          <p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
             <Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
             <span>{user.location}</span>
           </p>
@@ -63,13 +63,13 @@ const DashboardPage: FC = (): ReactElement => {
             {invitations.map((invitation) => (
               <div
                 key={invitation.id}
-                className="bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-sm flex items-center justify-between"
+                className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
               >
                 <div>
                   <p className="font-medium text-gray-900 dark:text-white">
                     {invitation.team.name}
                   </p>
-                  <p className="text-sm text-gray-600 dark:text-neutral-400">
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
                     Invited by {invitation.inviter.fullname}
                   </p>
                 </div>
@@ -99,39 +99,46 @@ const DashboardPage: FC = (): ReactElement => {
           <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
             My Team
           </h2>
-          <div className="grid gap-4 md:gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
             {myTeams.map((team) => (
               <Link
                 key={team.id}
                 to={'/teams/' + team.id}
-                className="bg-white dark:bg-neutral-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
+                className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
               >
                 {team.banner && (
-                  <img
-                    src={team.banner}
-                    alt={team.name}
-                    className="w-full h-32 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 md:p-6">
-                  <div className="flex items-center space-x-3 mb-2 md:mb-3">
+                <div className="p-4">
+                  <div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
                     {team.logo && (
                       <img
                         src={team.logo}
                         alt={team.name}
-                        className="w-10 h-10 md:w-12 md:h-12 rounded-full object-cover"
+                        className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
                       />
                     )}
                     <div>
-                      <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white">
+                      <h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
                         {team.name}
                       </h3>
-                      <p className="text-xs md:text-sm text-gray-600 dark:text-neutral-400">
-                        City: {team.city}
+                      <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
+                        <Icon
+                          icon="heroicons:map-pin-16-solid"
+                          width="16"
+                          height="16"
+                        />
+                        <span className="ml-1">{team.city}</span>
                       </p>
                     </div>
                   </div>
-                  <p className="text-gray-600 dark:text-neutral-400 text-xs md:text-sm line-clamp-2">
+                  <p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
                     {team.description}
                   </p>
                 </div>
@@ -140,33 +147,33 @@ const DashboardPage: FC = (): ReactElement => {
           </div>
         </div>
       ) : (
-        <div className="mb-6 md:mb-8 bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6 md:p-8">
+        <div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
           <div className="text-center">
             <div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
             <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
               You are not in a team yet
             </h2>
-            <p className="text-sm md:text-base text-gray-600 dark:text-neutral-400 font-sans">
+            <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
               Use the sidebar to browse teams or create your own
             </p>
           </div>
         </div>
       )}
 
-      <div className="mt-8 bg-linear-to-br from-white-50 to-primary-50 dark:from-neutral-800 dark:to-neutral-900 rounded-xl shadow-lg">
-        <div className="bg-linear-to-r from-primary-600 to-indigo-600 h-24 rounded-t-xl"></div>
-        <div className="px-4 md:px-8 pb-4 md:pb-8">
+      <div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
+        <div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
+        <div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
           <div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
             <div className="flex flex-col md:flex-row items-start">
               {user?.avatar ? (
                 <img
                   src={user.avatar}
                   alt={user.fullname || 'User'}
-                  className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-neutral-700 shadow-lg object-cover"
+                  className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
                 />
               ) : (
-                <div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-neutral-700 shadow-lg bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
-                  <span className="text-gray-400 dark:text-neutral-500 text-3xl md:text-4xl font-sans">
+                <div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                  <span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
                     U
                   </span>
                 </div>
@@ -179,8 +186,13 @@ const DashboardPage: FC = (): ReactElement => {
                 </h2>
 
                 {user?.location ? (
-                  <p className="text-gray-600 dark:text-neutral-400 flex items-center mt-1 text-sm md:text-base font-sans">
-                    {user.location}
+                  <p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
+                    <Icon
+                      icon="heroicons:map-pin-16-solid"
+                      width="16"
+                      height="16"
+                    />
+                    <span className="ml-1">{user.location}</span>
                   </p>
                 ) : (
                   <Link
@@ -206,37 +218,37 @@ const DashboardPage: FC = (): ReactElement => {
               </Link>
             )}
           </div>
-          <div className="space-y-4 md:space-y-6">
+          <div className="space-y-4 md:space-y-6 w-full max-w-full">
             {user?.bio && (
-              <div className="bg-white dark:bg-neutral-800 rounded-lg p-4 shadow-sm">
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-neutral-300 uppercase tracking-wide mb-2">
+              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
                   About
                 </h3>
-                <p className="text-gray-800 dark:text-neutral-200 leading-relaxed line-clamp-3 wrap-break-word">
+                <p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
                   {user.bio}
                 </p>
               </div>
             )}
-            <div className="bg-white dark:bg-neutral-800 rounded-lg p-4 shadow-sm">
-              <h3 className="font-semibold text-gray-700 dark:text-neutral-300 tracking-wide mb-3">
+            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+              <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
                 Contact
               </h3>
-              <div className="flex items-center text-gray-700 dark:text-neutral-300">
+              <div className="flex items-center text-gray-700 dark:text-gray-300">
                 <span className="text-gray-900 dark:text-white">
                   {user?.email}
                 </span>
               </div>
             </div>
             {user?.skills && user.skills.length > 0 && (
-              <div className="bg-white dark:bg-neutral-800 rounded-lg p-4 shadow-sm">
-                <h3 className="font-semibold text-gray-700 dark:text-neutral-300 tracking-wide mb-3">
+              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
                   Skills
                 </h3>
                 <div className="flex flex-wrap gap-2">
                   {user.skills.map((skill: string) => (
                     <span
                       key={skill}
-                      className="inline-flex items-center px-4 py-2 border border-primary-600 text-primary-600 rounded-4xl text-xs font-medium "
+                      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>
diff --git a/apps/hackathon/src/components/sidebar.tsx b/apps/hackathon/src/components/sidebar.tsx
index 18dc9e2..3a88160 100644
--- a/apps/hackathon/src/components/sidebar.tsx
+++ b/apps/hackathon/src/components/sidebar.tsx
@@ -161,19 +161,19 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
   };
 
   const sidebarContent = (
-    <div className="w-64 bg-white dark:bg-neutral-900 border-r dark:border-neutral-700 min-h-screen flex flex-col">
+    <div className="w-64 bg-white dark:bg-gray-900 border-r dark:border-gray-700 min-h-screen flex flex-col">
       {/* Logo / Brand with Close Button */}
-      <div className="p-6 flex items-center justify-between border-b dark:border-neutral-700">
+      <div className="p-6 flex items-center justify-between border-b dark:border-gray-700">
         <h1 className="text-xl font-bold text-gray-900 dark:text-white">
           Hackathon
         </h1>
         {onClose && (
           <button
             onClick={onClose}
-            className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+            className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
           >
             <svg
-              className="w-5 h-5 text-gray-500 dark:text-neutral-400"
+              className="w-5 h-5 text-gray-500 dark:text-gray-400"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -190,7 +190,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
       </div>
 
       {/* User Info */}
-      <div className="p-4 border-y dark:border-neutral-700">
+      <div className="p-4 border-y dark:border-gray-700">
         <div className="flex items-center space-x-3">
           {user?.avatar ? (
             <img
@@ -204,7 +204,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
                 icon="ic:baseline-person"
                 width="24"
                 height="24"
-                className="text-gray-400 dark:text-neutral-400"
+                className="text-gray-400 dark:text-gray-400"
               />
             </div>
           )}
@@ -212,7 +212,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
             <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
               {user?.fullname || user?.email?.split('@')[0] || 'User'}
             </p>
-            <p className="text-xs text-gray-500 dark:text-neutral-400 truncate">
+            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
               {user?.email}
             </p>
           </div>
@@ -233,7 +233,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
                     className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
                       isActive
                         ? 'bg-primary-50 dark:bg-blue-900/30 text-primary-600 dark:text-blue-400 font-medium'
-                        : 'text-gray-700 dark:text-neutral-300 hover:bg-gray-100 dark:hover:bg-neutral-800'
+                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                     }`}
                   >
                     {item.icon}
@@ -246,10 +246,10 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
       </nav>
 
       {/* Theme Toggle & Logout */}
-      <div className="p-4 border-t dark:border-neutral-700 space-y-2">
+      <div className="p-4 border-t dark:border-gray-700 space-y-2">
         <button
           onClick={cycleTheme}
-          className="flex items-center space-x-3 px-4 py-3 w-full rounded-lg text-gray-700 dark:text-neutral-300 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+          className="flex items-center space-x-3 px-4 py-3 w-full rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer"
         >
           {getThemeIcon()}
           <span>{getThemeLabel()}</span>