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);
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"
apps/hackathon/src/app/dashboard/page.tsx
+50 -38
View File
@@ -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>
apps/hackathon/src/components/sidebar.tsx
+10 -10
View File
@@ -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>