From ff9a02c020974d9a5438482e07c7a082e333f11e Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Thu, 27 Nov 2025 13:20:17 +0700
Subject: [PATCH] feat(hackathon): browse team page

- update dark mode color scheme
- add some border style to give outline and depth
- change emoji to icon
---
 apps/hackathon/src/app/teams/browse/page.tsx  | 63 ++++++++++---------
 apps/hackathon/src/app/teams/layout.tsx       |  8 +--
 apps/hackathon/src/components/city-select.tsx | 12 ++--
 apps/hackathon/src/components/sidebar.tsx     |  8 +--
 libs/ui/src/atoms/button/button.tsx           |  9 +--
 5 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/apps/hackathon/src/app/teams/browse/page.tsx b/apps/hackathon/src/app/teams/browse/page.tsx
index 29d4a03..b0b8aaa 100644
--- a/apps/hackathon/src/app/teams/browse/page.tsx
+++ b/apps/hackathon/src/app/teams/browse/page.tsx
@@ -12,6 +12,7 @@ import {
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';
 
 const BrowseTeamsPage: FC = (): ReactElement => {
   const navigate = useNavigate();
@@ -70,16 +71,16 @@ const BrowseTeamsPage: 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-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
                 Browse Teams
               </h1>
-              <p className="text-gray-600 dark:text-neutral-400 mt-1">
+              <p className="text-gray-600 dark:text-gray-400 mt-1">
                 Find and join teams looking for members
               </p>
             </div>
@@ -92,10 +93,10 @@ const BrowseTeamsPage: FC = (): ReactElement => {
 
       {/* Filters */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div className="bg-white dark:bg-neutral-900 p-6 rounded-lg shadow-sm mb-6">
+        <div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-sm mb-6 border dark:border-gray-800">
           <div className="grid gap-4 md:grid-cols-2">
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Search Teams
               </label>
               <input
@@ -103,11 +104,11 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                 placeholder="Search by team name..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full h-[42px] px-3 border border-gray-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500"
+                className="w-full h-[42px] px-3 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Filter by City
               </label>
               <CitySelect
@@ -122,30 +123,28 @@ const BrowseTeamsPage: FC = (): ReactElement => {
         {/* Teams List */}
         {isLoading ? (
           <div className="text-center py-12">
-            <p className="text-gray-600 dark:text-neutral-400">
-              Loading teams...
-            </p>
+            <p className="text-gray-600 dark:text-gray-400">Loading teams...</p>
           </div>
         ) : teams.length === 0 ? (
-          <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-sm p-12 text-center">
-            <p className="text-gray-600 dark:text-neutral-400 text-lg">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm p-12 text-center">
+            <p className="text-gray-600 dark:text-gray-400 text-lg">
               No teams found
             </p>
-            <p className="text-gray-500 dark:text-neutral-500 mt-2">
+            <p className="text-gray-500 dark:text-gray-500 mt-2">
               Try adjusting your filters
             </p>
           </div>
         ) : (
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
             {teams.map((team) => (
               <div
                 key={team.id}
-                className="bg-white dark:bg-neutral-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col"
+                className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col border dark:border-gray-800"
               >
                 <img
                   src={team.banner || '/images/banner-imphnen.webp'}
                   alt={team.name}
-                  className="w-full h-32 object-cover"
+                  className="w-full aspect-3/1 object-cover"
                 />
                 <div className="p-6 flex flex-col flex-1">
                   <div className="flex items-center space-x-3 mb-3">
@@ -156,27 +155,29 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                         className="w-12 h-12 rounded-full object-cover"
                       />
                     ) : (
-                      <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
-                        <span className="text-gray-500 dark:text-neutral-400 text-xl">
-                          👥
+                      <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <span className="text-gray-500 dark:text-gray-300 text-xl">
+                          <Icon icon="mdi:account-group" />
                         </span>
                       </div>
                     )}
                     <div className="flex-1 min-w-0">
-                      <h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-2">
+                      <h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-2 leading-tight">
                         {team.name}
                       </h3>
-                      <div className="text-sm text-gray-600 dark:text-neutral-400 flex gap-2">
-                        <p className="truncate flex-1 min-w-0">
-                          📍 {team.city}
+                      <div className="text-sm font-sans text-gray-600 dark:text-gray-400 flex gap-2">
+                        <p className="truncate flex-1 min-w-0 flex items-center gap-x-1">
+                          <Icon icon="mdi:map-marker" />{' '}
+                          <span>{team.city}</span>
                         </p>
-                        <p className="whitespace-nowrap shrink-0">
-                          👥 {team.members?.length || 0} members
+                        <p className="whitespace-nowrap shrink-0 flex items-center gap-x-1">
+                          <Icon icon="mdi:account-group" />{' '}
+                          {team.members?.length || 0} members
                         </p>
                       </div>
                     </div>
                   </div>
-                  <p className="text-gray-600 dark:text-neutral-400 text-sm mb-4 line-clamp-3">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3 font-sans">
                     {team.description}
                   </p>
                   <div className="space-y-3 mt-auto">
@@ -219,26 +220,26 @@ const BrowseTeamsPage: FC = (): ReactElement => {
       {/* Join Request Modal */}
       {showJoinModal && (
         <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-xl max-w-md w-full p-6">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
             <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
               Request to Join Team
             </h2>
-            <p className="text-gray-600 dark:text-neutral-400 mb-6">
+            <p className="text-gray-600 dark:text-gray-400 mb-6 font-sans">
               Send a message to the team leader explaining why you want to join
             </p>
             <form onSubmit={onSubmit} className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   Your Message
                 </label>
                 <textarea
                   {...form.register('message')}
                   rows={4}
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500"
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
                   placeholder="Tell the team leader why you want to join their team..."
                 />
                 {form.formState.errors.message && (
-                  <p className="text-sm text-red-500 mt-1">
+                  <p className="text-sm text-red-500 mt-1 font-sans">
                     {form.formState.errors.message.message}
                   </p>
                 )}
diff --git a/apps/hackathon/src/app/teams/layout.tsx b/apps/hackathon/src/app/teams/layout.tsx
index 5a91631..21f7959 100644
--- a/apps/hackathon/src/app/teams/layout.tsx
+++ b/apps/hackathon/src/app/teams/layout.tsx
@@ -6,19 +6,19 @@ const TeamsLayout: 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 z-10">
+        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 z-10">
           <div className="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/components/city-select.tsx b/apps/hackathon/src/components/city-select.tsx
index 58f7675..aabf8ec 100644
--- a/apps/hackathon/src/components/city-select.tsx
+++ b/apps/hackathon/src/components/city-select.tsx
@@ -70,15 +70,15 @@ export const CitySelect: FC<CitySelectProps> = ({
           }}
           onClick={handleInputClick}
           placeholder={placeholder}
-          className={`w-full h-[42px] px-3 text-[15px] border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 ${
-            error ? 'border-red-500' : 'border-gray-300 dark:border-neutral-600'
+          className={`w-full h-[42px] px-3 text-[15px] border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 ${
+            error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
           }`}
         />
         {value && !isOpen && (
           <button
             type="button"
             onClick={handleClearSelection}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-neutral-500 hover:text-gray-600 cursor-pointer dark:hover:text-neutral-300"
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 hover:text-gray-600 cursor-pointer dark:hover:text-gray-300"
           >
             ✕
           </button>
@@ -88,7 +88,7 @@ export const CitySelect: FC<CitySelectProps> = ({
       {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
 
       {isOpen && (
-        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-neutral-800 border border-gray-300 dark:border-neutral-600 rounded-lg shadow-lg max-h-60 overflow-y-auto text-label2">
+        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto text-label2">
           {filteredCities.length > 0 ? (
             <ul className="py-1">
               {filteredCities.map((city) => (
@@ -98,7 +98,7 @@ export const CitySelect: FC<CitySelectProps> = ({
                   className={`px-3 py-2 cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/30 ${
                     value === city
                       ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400'
-                      : 'text-gray-900 dark:text-neutral-200'
+                      : 'text-gray-900 dark:text-gray-200'
                   }`}
                 >
                   {city}
@@ -106,7 +106,7 @@ export const CitySelect: FC<CitySelectProps> = ({
               ))}
             </ul>
           ) : (
-            <div className="px-3 py-2 text-gray-500 dark:text-neutral-400 text-sm">
+            <div className="px-3 py-2 text-gray-500 dark:text-gray-400 text-sm">
               No cities found
             </div>
           )}
diff --git a/apps/hackathon/src/components/sidebar.tsx b/apps/hackathon/src/components/sidebar.tsx
index 3a88160..f23e757 100644
--- a/apps/hackathon/src/components/sidebar.tsx
+++ b/apps/hackathon/src/components/sidebar.tsx
@@ -161,9 +161,9 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
   };
 
   const sidebarContent = (
-    <div className="w-64 bg-white dark:bg-gray-900 border-r dark:border-gray-700 min-h-screen flex flex-col">
+    <div className="w-64 bg-white dark:bg-gray-900 border-r dark:border-gray-800 min-h-screen flex flex-col">
       {/* Logo / Brand with Close Button */}
-      <div className="p-6 flex items-center justify-between border-b dark:border-gray-700">
+      <div className="p-6 flex items-center justify-between border-b dark:border-gray-800">
         <h1 className="text-xl font-bold text-gray-900 dark:text-white">
           Hackathon
         </h1>
@@ -190,7 +190,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
       </div>
 
       {/* User Info */}
-      <div className="p-4 border-y dark:border-gray-700">
+      <div className="p-4 border-b dark:border-gray-800">
         <div className="flex items-center space-x-3">
           {user?.avatar ? (
             <img
@@ -246,7 +246,7 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
       </nav>
 
       {/* Theme Toggle & Logout */}
-      <div className="p-4 border-t dark:border-gray-700 space-y-2">
+      <div className="p-4 border-t dark:border-gray-800 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-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer"
diff --git a/libs/ui/src/atoms/button/button.tsx b/libs/ui/src/atoms/button/button.tsx
index fd4eddd..b730068 100644
--- a/libs/ui/src/atoms/button/button.tsx
+++ b/libs/ui/src/atoms/button/button.tsx
@@ -26,12 +26,13 @@ type TButtonProps = DetailedHTMLProps<
 const variantClasses: Record<TButtonVariant, string> = {
   primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
   secondary:
-    'bg-white dark:bg-neutral-800 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-neutral-700 text-primary-500 dark:text-primary-400 shadow-md dark:shadow-neutral-900/50',
-  text: 'bg-transparent hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-neutral-800 text-primary-500 dark:text-primary-400',
+    'bg-white dark:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700 text-primary-500 dark:text-primary-400 shadow-md dark:shadow-gray-900/50 border dark:border-gray-700',
+  text: 'bg-transparent hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
   bordered:
-    'border border-primary-500 dark:border-primary-400 hover:border-primary-600 dark:hover:border-primary-300 bg-transparent hover:text-primary-600 dark:hover:text-primary-300 hover:bg-gray-50 dark:hover:bg-neutral-800 text-primary-500 dark:text-primary-400',
+    'border border-primary-500 dark:border-primary-400 hover:border-primary-600 dark:hover:border-primary-300 bg-transparent hover:text-primary-600 dark:hover:text-primary-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
   success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
-  danger: 'bg-danger-100 dark:bg-danger-500/20 hover:bg-danger-200 dark:hover:bg-danger-500/30 text-danger-500 shadow-md dark:shadow-neutral-900/50',
+  danger:
+    'bg-danger-100 dark:bg-danger-500/20 hover:bg-danger-200 dark:hover:bg-danger-500/30 text-danger-500 shadow-md dark:shadow-gray-900/50',
 };
 
 const sizeClasses: Record<TButtonSize, string> = {