MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hackathon): dashboard UI improvement and dark mode adjustment

Browse Source
This commit is contained in:
Hafid Nur
2025-11-27 13:06:13 +07:00
parent 2700f7cbb7
commit f81a7c334e
3 changed files with 64 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/hackathon/src/app/dashboard/layout.tsx
+4 -4
View File
@@ -6,18 +6,18 @@ const DashboardLayout: FC = (): ReactElement => {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
return ( 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)} /> <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
{/* Mobile Header with Hamburger */} {/* 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 <button
onClick={() => setSidebarOpen(true)} 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 <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" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
apps/hackathon/src/app/dashboard/page.tsx
+50 -38
View File
@@ -41,13 +41,13 @@ const DashboardPage: FC = (): ReactElement => {
}; };
return ( 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"> <div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white"> <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}! Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
</h1> </h1>
{user?.location && ( {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" /> <Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
<span>{user.location}</span> <span>{user.location}</span>
</p> </p>
@@ -63,13 +63,13 @@ const DashboardPage: FC = (): ReactElement => {
{invitations.map((invitation) => ( {invitations.map((invitation) => (
<div <div
key={invitation.id} 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> <div>
<p className="font-medium text-gray-900 dark:text-white"> <p className="font-medium text-gray-900 dark:text-white">
{invitation.team.name} {invitation.team.name}
</p> </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} Invited by {invitation.inviter.fullname}
</p> </p>
</div> </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"> <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
My Team My Team
</h2> </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) => ( {myTeams.map((team) => (
<Link <Link
key={team.id} key={team.id}
to={'/teams/' + 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 && ( {team.banner && (
<img <div className="w-full aspect-3/1">
src={team.banner} <img
alt={team.name} src={team.banner}
className="w-full h-32 object-cover" alt={team.name}
/> className="w-full h-full object-cover"
/>
</div>
)} )}
<div className="p-4 md:p-6"> <div className="p-4">
<div className="flex items-center space-x-3 mb-2 md:mb-3"> <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 && ( {team.logo && (
<img <img
src={team.logo} src={team.logo}
alt={team.name} 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> <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} {team.name}
</h3> </h3>
<p className="text-xs md:text-sm text-gray-600 dark:text-neutral-400"> <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
City: {team.city} <Icon
icon="heroicons:map-pin-16-solid"
width="16"
height="16"
/>
<span className="ml-1">{team.city}</span>
</p> </p>
</div> </div>
</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} {team.description}
</p> </p>
</div> </div>
@@ -140,33 +147,33 @@ const DashboardPage: FC = (): ReactElement => {
</div> </div>
</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-center">
<div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div> <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"> <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 You are not in a team yet
</h2> </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 Use the sidebar to browse teams or create your own
</p> </p>
</div> </div>
</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="mt-8 bg-white dark:bg-gray-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="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"> <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 md:items-start -mt-12 mb-4 md:mb-6">
<div className="flex flex-col md:flex-row items-start"> <div className="flex flex-col md:flex-row items-start">
{user?.avatar ? ( {user?.avatar ? (
<img <img
src={user.avatar} src={user.avatar}
alt={user.fullname || 'User'} 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"> <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-neutral-500 text-3xl md:text-4xl font-sans"> <span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
U U
</span> </span>
</div> </div>
@@ -179,8 +186,13 @@ const DashboardPage: FC = (): ReactElement => {
</h2> </h2>
{user?.location ? ( {user?.location ? (
<p className="text-gray-600 dark:text-neutral-400 flex items-center mt-1 text-sm md:text-base font-sans"> <p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
{user.location} <Icon
icon="heroicons:map-pin-16-solid"
width="16"
height="16"
/>
<span className="ml-1">{user.location}</span>
</p> </p>
) : ( ) : (
<Link <Link
@@ -206,37 +218,37 @@ const DashboardPage: FC = (): ReactElement => {
</Link> </Link>
)} )}
</div> </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 && ( {user?.bio && (
<div className="bg-white dark:bg-neutral-800 rounded-lg p-4 shadow-sm"> <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-neutral-300 uppercase tracking-wide mb-2"> <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
About About
</h3> </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} {user.bio}
</p> </p>
</div> </div>
)} )}
<div className="bg-white dark:bg-neutral-800 rounded-lg p-4 shadow-sm"> <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
<h3 className="font-semibold text-gray-700 dark:text-neutral-300 tracking-wide mb-3"> <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
Contact Contact
</h3> </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"> <span className="text-gray-900 dark:text-white">
{user?.email} {user?.email}
</span> </span>
</div> </div>
</div> </div>
{user?.skills && user.skills.length > 0 && ( {user?.skills && user.skills.length > 0 && (
<div className="bg-white dark:bg-neutral-800 rounded-lg p-4 shadow-sm"> <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
<h3 className="font-semibold text-gray-700 dark:text-neutral-300 tracking-wide mb-3"> <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
Skills Skills
</h3> </h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{user.skills.map((skill: string) => ( {user.skills.map((skill: string) => (
<span <span
key={skill} 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} {skill}
</span> </span>
apps/hackathon/src/components/sidebar.tsx
+10 -10
View File
@@ -161,19 +161,19 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
}; };
const sidebarContent = ( 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 */} {/* 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"> <h1 className="text-xl font-bold text-gray-900 dark:text-white">
Hackathon Hackathon
</h1> </h1>
{onClose && ( {onClose && (
<button <button
onClick={onClose} 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 <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" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -190,7 +190,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
</div> </div>
{/* User Info */} {/* 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"> <div className="flex items-center space-x-3">
{user?.avatar ? ( {user?.avatar ? (
<img <img
@@ -204,7 +204,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
icon="ic:baseline-person" icon="ic:baseline-person"
width="24" width="24"
height="24" height="24"
className="text-gray-400 dark:text-neutral-400" className="text-gray-400 dark:text-gray-400"
/> />
</div> </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"> <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
{user?.fullname || user?.email?.split('@')[0] || 'User'} {user?.fullname || user?.email?.split('@')[0] || 'User'}
</p> </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} {user?.email}
</p> </p>
</div> </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 ${ className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
isActive isActive
? 'bg-primary-50 dark:bg-blue-900/30 text-primary-600 dark:text-blue-400 font-medium' ? '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} {item.icon}
@@ -246,10 +246,10 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
</nav> </nav>
{/* Theme Toggle & Logout */} {/* 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 <button
onClick={cycleTheme} 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()} {getThemeIcon()}
<span>{getThemeLabel()}</span> <span>{getThemeLabel()}</span>