From 7d06c61ddf94ee4d9d31a7cdaef76b01fc2e7ccc Mon Sep 17 00:00:00 2001
From: kralsolomon <solomonkein228@gmail.com>
Date: Wed, 5 Jun 2024 08:13:56 +0500
Subject: [PATCH] +white theme fix(not everywhere)

---
 src/app/clubs/[clubID]/page.tsx               | 17 ++++----
 .../[clubID]/settings/_components/Events.tsx  | 12 +++---
 .../[clubID]/settings/_components/Members.tsx |  7 +---
 .../settings/_components/RolesTab.tsx         |  2 +-
 src/app/clubs/[clubID]/settings/page.tsx      | 11 ++---
 src/app/events/[eventID]/page.tsx             | 28 ++++++++-----
 src/app/explore/clubs/page.tsx                | 16 +++++---
 src/app/explore/events/page.tsx               |  2 +-
 src/app/page.tsx                              | 41 +++++++++++--------
 src/app/user/[userID]/page.tsx                | 29 +++++++------
 src/components/NavBar.tsx                     | 32 +++++++++------
 src/components/clubs/ClubEvent.tsx            |  9 ++--
 src/components/clubs/ClubMembersCard.tsx      |  3 +-
 src/components/clubs/ClubPageButtons.tsx      | 11 ++++-
 .../clubs/events/DialogViewClubInvites.tsx    |  5 ++-
 .../clubs/roles/DialogCreateClubRole.tsx      |  6 ++-
 src/components/clubs/settings/DangerZone.tsx  |  6 +--
 .../settings/DialogClubOwnershipTransfer.tsx  |  7 +++-
 .../clubs/settings/DialogClubUpdateInfo.tsx   |  5 ++-
 .../clubs/settings/DialogDeleteClub.tsx       |  7 +++-
 .../clubs/settings/DialogUpdateClubBanner.tsx |  2 +-
 .../clubs/settings/DialogUpdateClubLogo.tsx   |  2 +-
 .../clubs/settings/EventCreationComponent.tsx |  7 +++-
 src/components/ui/dropdown_for_logged_in.tsx  |  5 ++-
 src/components/user/LoginForm.tsx             |  5 ++-
 src/components/user/SignUpForm.tsx            |  9 ++--
 src/lib/eventStatusUtils.ts                   |  6 +--
 27 files changed, 179 insertions(+), 113 deletions(-)

diff --git a/src/app/clubs/[clubID]/page.tsx b/src/app/clubs/[clubID]/page.tsx
index c63dcfd..e99776e 100644
--- a/src/app/clubs/[clubID]/page.tsx
+++ b/src/app/clubs/[clubID]/page.tsx
@@ -72,31 +72,32 @@ function Page({ params }: { params: { clubID: number } }) {
 					<SceletonClub />
 				) : (
 					<div className="relative">
-						<div className="absolute h-[320px] w-full overflow-hidden rounded-sm shadow-2xl shadow-[#020817]/40">
+						<div className="absolute h-[320px] w-full overflow-hidden rounded-sm dark:shadow-2xl dark:shadow-[#020817]/40">
 							<img
 								className="z-1 h-full w-full object-cover object-center "
 								height={600}
 								src={club?.banner_url}
+								alt={club?.name}
 								style={{
 									aspectRatio: '1920/600',
 									objectFit: 'cover',
 								}}
 								width={1920}
 							/>
-							<div className="z-1 absolute inset-0 bg-gradient-to-b from-transparent/30 to-[#020817]/80" />
-							<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#020817]/90" />
+							<div className="z-1 absolute inset-0 bg-gradient-to-b from-transparent/30 to-[#ffffff]/100 dark:bg-gradient-to-b dark:from-transparent/30 dark:to-[#020817]/80" />
+							<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#ffffff]/40 dark:bg-gradient-to-t dark:from-[#020817]/90" />
 						</div>
 
 						<div className="md:mx-15 relative z-30 mx-5 my-5 max-w-[1200px] pt-24 sm:mx-10 lg:mx-20 xl:mx-auto">
 							<BackgroundClubImage club={club} />
-							<div className="z-50 rounded-lg bg-[#0c1125]">
+							<div className="z-50 rounded-lg border bg-accent dark:border-none dark:bg-[#0c1125]">
 								<div className="flex items-center justify-between gap-4 p-6">
 									<div className="flex items-center gap-2">
 										<div className="hidden aspect-square shrink-0 overflow-hidden rounded-full sm:flex">
 											<ClubImage club={club} width={84} height={84} />
 										</div>
 										<div className="pl-4">
-											<CardTitle>{club?.name}</CardTitle>
+											<CardTitle className="text-gray-900 dark:text-white">{club?.name}</CardTitle>
 											<CardDescription>{club?.description}</CardDescription>
 											<CardDescription
 												className="cursor-pointer pt-2"
@@ -121,7 +122,7 @@ function Page({ params }: { params: { clubID: number } }) {
 							{/*CLUBS MEMBERS CARD*/}
 							<ClubMembersCard club={club!} clubMembers={clubMembers!} />
 							<div className="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2 ">
-								<Card className="bg-[#0c1125]">
+								<Card className="bg-accent dark:bg-[#0c1125]">
 									<CardHeader>
 										<CardTitle>Club Events</CardTitle>
 									</CardHeader>
@@ -136,7 +137,7 @@ function Page({ params }: { params: { clubID: number } }) {
 										)}
 									</CardContent>
 								</Card>
-								<Card className=" bg-[#0c1125]">
+								<Card className="bg-accent dark:bg-[#0c1125]">
 									<CardHeader>
 										<CardTitle>Club Posts</CardTitle>
 									</CardHeader>
@@ -147,7 +148,7 @@ function Page({ params }: { params: { clubID: number } }) {
 										</p>
 									</CardContent>
 								</Card>
-								<Card className=" bg-[#0c1125]">
+								<Card className="bg-accent dark:bg-[#0c1125]">
 									<CardHeader>
 										<CardTitle>Club Achievements</CardTitle>
 									</CardHeader>
diff --git a/src/app/clubs/[clubID]/settings/_components/Events.tsx b/src/app/clubs/[clubID]/settings/_components/Events.tsx
index f95273e..795b480 100644
--- a/src/app/clubs/[clubID]/settings/_components/Events.tsx
+++ b/src/app/clubs/[clubID]/settings/_components/Events.tsx
@@ -47,9 +47,9 @@ export default function EventsContent() {
 	}, [])
 
 	return (
-		<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">
+		<main className="flex flex-1 flex-col gap-4 bg-accent p-4 dark:bg-[#0D1525] md:gap-8 md:p-6">
 			<div className="flex flex-col items-center gap-4 sm:flex-row">
-				<h1 className="text-lg font-semibold md:text-2xl">Events</h1>
+				<h1 className="text-lg font-semibold  md:text-2xl">Events</h1>
 				<div className="flex flex-col items-center gap-4 sm:ml-auto sm:flex-row">
 					{/*<div className="relative w-full max-w-md">*/}
 					{/*	<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />*/}
@@ -77,7 +77,7 @@ export default function EventsContent() {
 					return (
 						<div
 							key={event.id}
-							className="rounded-lg border border-gray-200 p-4 shadow-sm dark:border-gray-800"
+							className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-[#0D1525]"
 						>
 							<h3 className="text-lg font-medium">{event.title || 'No Title'}</h3>
 							<p className="text-xs text-gray-500 dark:text-gray-400">
@@ -100,10 +100,12 @@ export default function EventsContent() {
 										</div>
 									</div>
 								)}
-								<div className="flex  items-center justify-between">
+								<div className="flex items-center justify-between">
 									{isEventOrganizer(event) && (
 										<Link href={`/events/${event.id}`}>
-											<Button className=" w-18 h-8 p-4">View Event</Button>
+											<Button className="w-18 h-8 bg-blue-200 p-4 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90">
+												View Event
+											</Button>
 										</Link>
 									)}
 								</div>
diff --git a/src/app/clubs/[clubID]/settings/_components/Members.tsx b/src/app/clubs/[clubID]/settings/_components/Members.tsx
index 8ed190d..8711273 100644
--- a/src/app/clubs/[clubID]/settings/_components/Members.tsx
+++ b/src/app/clubs/[clubID]/settings/_components/Members.tsx
@@ -38,13 +38,10 @@ export default function Members({
 								<div className="flex gap-3">
 									<Button
 										variant={`secondary`}
-										className=" w-30 right-0 h-20 whitespace-normal sm:h-max sm:w-60"
+										className="w-30 right-0 h-20 whitespace-normal bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90 sm:h-max sm:w-60"
 									>
 										{' '}
-										<Link
-											className="right-0 w-full font-bold"
-											href={`/clubs/${club?.id}/join-request`}
-										>
+										<Link className="right-0 w-full " href={`/clubs/${club?.id}/join-request`}>
 											Handle new members{' '}
 											{pendingRequests > 0 && (
 												<span
diff --git a/src/app/clubs/[clubID]/settings/_components/RolesTab.tsx b/src/app/clubs/[clubID]/settings/_components/RolesTab.tsx
index 0306efd..2a562b9 100644
--- a/src/app/clubs/[clubID]/settings/_components/RolesTab.tsx
+++ b/src/app/clubs/[clubID]/settings/_components/RolesTab.tsx
@@ -89,7 +89,7 @@ export default function RolesTab({
 														<Badge
 															key={index}
 															variant={p.id === 'administrator' ? 'destructive' : 'default'}
-															className="text-1xl mx-2.5 my-1.5 w-fit text-nowrap text-center"
+															className={`text-1xl mx-2.5 my-1.5 w-fit text-nowrap text-center ${p.id !== 'administrator' ? 'text-gray-900' : ''} ${p.id !== 'administrator' ? 'bg-blue-300' : ''} dark:${p.id !== 'administrator' ? 'bg-white' : ''}`}
 														>
 															{p.label}
 														</Badge>
diff --git a/src/app/clubs/[clubID]/settings/page.tsx b/src/app/clubs/[clubID]/settings/page.tsx
index 05ea130..acca4ad 100644
--- a/src/app/clubs/[clubID]/settings/page.tsx
+++ b/src/app/clubs/[clubID]/settings/page.tsx
@@ -82,23 +82,24 @@ function Page({ params }: { params: { clubID: number } }) {
 	return (
 		<main className="scroll-smooth" style={{ scrollBehavior: 'smooth' }}>
 			<Nav />
-			<div className="absolute h-[320px] w-full overflow-hidden rounded-sm shadow-2xl shadow-[#020817]/40">
+			<div className="absolute h-[320px] w-full overflow-hidden rounded-sm dark:shadow-2xl dark:shadow-[#020817]/40">
 				<img
 					className="z-1 h-full w-full object-cover object-center "
 					height={600}
 					src={club?.banner_url}
+					alt={club?.name}
 					style={{
 						aspectRatio: '1920/600',
 						objectFit: 'cover',
 					}}
 					width={1920}
 				/>
-				<div className="z-1 absolute inset-0 bg-gradient-to-b from-transparent/30 to-[#020817]/80" />
-				<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#020817]/90" />
+				<div className="z-1 absolute inset-0 bg-gradient-to-b from-transparent/30 to-[#ffffff]/100 dark:bg-gradient-to-b dark:from-transparent/30 dark:to-[#020817]/80" />
+				<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#ffffff]/40 dark:bg-gradient-to-t dark:from-[#020817]/90" />
 			</div>
 			<div className="sm:mx-o relative z-30 mx-5 max-w-6xl py-12 sm:p-12 md:mx-auto">
 				<BackgroundClubImage club={club} />
-				<div className=" rounded-lg bg-[#0c1125]">
+				<div className=" rounded-lg bg-accent dark:bg-[#0c1125]">
 					<div className="flex items-center justify-between gap-4 p-6">
 						<div className="flex items-center">
 							<div className="flex shrink-0 overflow-hidden rounded-full">
@@ -196,7 +197,7 @@ function Page({ params }: { params: { clubID: number } }) {
 					<TabsContent value="events" className="w-full overflow-x-auto">
 						<div>
 							<Card>
-								<CardContent style={{ backgroundColor: '#0D1525' }}>
+								<CardContent className="bg-accent dark:bg-[#0D1525]">
 									<EventsContent />
 								</CardContent>
 							</Card>
diff --git a/src/app/events/[eventID]/page.tsx b/src/app/events/[eventID]/page.tsx
index 203b0a2..fdc010c 100644
--- a/src/app/events/[eventID]/page.tsx
+++ b/src/app/events/[eventID]/page.tsx
@@ -129,7 +129,7 @@ export default function Page({ params }: { params: { eventID: string } }) {
 	return (
 		<>
 			<Nav />
-			<div className="flex min-h-screen flex-col bg-[#030a20] text-gray-50">
+			<div className="flex min-h-screen flex-col text-gray-50 dark:bg-[#030a20]">
 				<main className="container mx-auto flex-1 px-4 py-12 md:px-6 md:py-16 lg:px-8 lg:py-24">
 					<div className="grid gap-8 md:grid-cols-[1fr_300px] lg:gap-12">
 						<div>
@@ -156,7 +156,7 @@ export default function Page({ params }: { params: { eventID: string } }) {
 								)}
 							</div>
 							<div className="mt-8 space-y-2">
-								<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl">
+								<h1 className="text-3xl font-bold text-gray-900 dark:text-white md:text-4xl lg:text-5xl">
 									{event.title || event.id}
 								</h1>
 
@@ -175,36 +175,40 @@ export default function Page({ params }: { params: { eventID: string } }) {
 									)}
 								</div>
 
-								<div className="prose max-w-[800px] text-gray-300">
+								<div className="prose max-w-[800px] text-gray-500 dark:text-gray-300">
 									<p>{event.description || 'No event description'}</p>
 								</div>
 							</div>
 						</div>
 
 						{/* ============== RIGHT SECTION ================*/}
-						<div className="flex h-fit flex-col  space-y-6 rounded-xl bg-gray-800 p-6">
+						<div className="flex h-fit flex-col  space-y-6 rounded-xl bg-gray-200 p-6 dark:bg-gray-800">
 							<div className="flex items-center space-x-2 text-xs">
 								<div className={`rounded-md  px-2 py-2 text-xs text-white ${eventStatus.color}`}>
 									{eventStatus.label}
 								</div>
 							</div>
 							<div className="space-y-2">
-								<div className="text-sm font-medium text-gray-400">When</div>
+								<div className="text-sm font-medium text-gray-500 dark:text-gray-400">When</div>
 								<div>
-									<div className="text-lg font-medium">{formattedStartDate}</div>
+									<div className="text-lg font-medium text-gray-900 dark:text-white">
+										{formattedStartDate}
+									</div>
 								</div>
 							</div>
 							<div className="space-y-2">
-								<div className="text-sm font-medium text-gray-400">Where</div>
+								<div className="text-sm font-medium text-gray-500 dark:text-gray-400">Where</div>
 								<div>
-									<div className="text-lg font-medium">
+									<div className="text-lg font-medium text-gray-900 dark:text-white">
 										{event.location_university || 'Location not specified'}
 									</div>
 								</div>
 							</div>
 							<div className="space-y-2">
 								<div>
-									<div className="pb-2 text-sm font-medium text-gray-400">Club Collaborators</div>
+									<div className="pb-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+										Club Collaborators
+									</div>
 									{event.collaborator_clubs.map((club) => (
 										<div key={club.id} className="flex items-center gap-2 pb-2">
 											<div className="flex w-full items-center justify-between rounded-full bg-gray-700 px-2 py-1">
@@ -231,7 +235,9 @@ export default function Page({ params }: { params: { eventID: string } }) {
 										</div>
 									))}
 								</div>
-								<div className="text-sm font-medium text-gray-400">Organizers</div>
+								<div className="text-sm font-medium text-gray-500 dark:text-gray-400">
+									Organizers
+								</div>
 								<div className="flex-col items-center gap-4">
 									{event.organizers.map((organizer: Organizer) => (
 										<div key={organizer.id} className="flex items-center gap-2  px-2  pb-2">
@@ -244,7 +250,7 @@ export default function Page({ params }: { params: { eventID: string } }) {
 													{organizer?.first_name.slice(0, 1)}
 												</AvatarFallback>
 											</Avatar>
-											<div className="text-sm font-medium">
+											<div className="text-sm font-medium text-gray-900 dark:text-white">
 												{organizer.first_name} {organizer.last_name}
 											</div>
 										</div>
diff --git a/src/app/explore/clubs/page.tsx b/src/app/explore/clubs/page.tsx
index f125017..916f3d9 100644
--- a/src/app/explore/clubs/page.tsx
+++ b/src/app/explore/clubs/page.tsx
@@ -55,11 +55,11 @@ export default function Clubs() {
 						<h1 className="mb-8 text-center text-3xl font-bold dark:text-white md:text-4xl lg:text-5xl">
 							Discover Clubs
 						</h1>
-						<div className="grid grid-cols-1 gap-6 text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
+						<div className="grid grid-cols-1 gap-6 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
 							{clubs?.map((club) => (
 								<div
 									key={club.id}
-									className="cursor-pointer overflow-hidden rounded-lg bg-gray-900 shadow-lg transition-transform duration-300 hover:scale-105"
+									className="cursor-pointer overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:scale-105 dark:bg-gray-900"
 									onClick={() => handleClubClick(club.id)}
 								>
 									<Image
@@ -87,17 +87,21 @@ export default function Clubs() {
 											/>
 											<div>
 												<h3 className="font-semibold">{club.name}</h3>
-												<p className="text-sm text-gray-400">{club.club_type}</p>
+												<p className="text-sm text-gray-600 dark:text-gray-400">{club.club_type}</p>
 											</div>
 										</div>
-										<p className="line-clamp-2 text-sm text-gray-400">{club.description}</p>
-										<div className="flex items-center justify-between  text-sm text-gray-400">
+										<p className="line-clamp-2 text-sm text-gray-600 dark:text-gray-400">
+											{club.description}
+										</p>
+										<div className="flex items-center justify-between text-sm dark:text-gray-400">
 											<div className="flex ">
 												<UsersIcon className="mr-2 h-4 w-4" />
 												<span>{club.num_of_members} members</span>
 											</div>
 
-											<Badge variant="default">Active</Badge>
+											<Badge className="bg-blue-300 text-gray-900 dark:bg-white" variant="default">
+												Active
+											</Badge>
 										</div>
 									</div>
 								</div>
diff --git a/src/app/explore/events/page.tsx b/src/app/explore/events/page.tsx
index 5343c95..ab43190 100644
--- a/src/app/explore/events/page.tsx
+++ b/src/app/explore/events/page.tsx
@@ -65,7 +65,7 @@ export default function Events() {
 									<img
 										src={event.cover_images[0].url}
 										alt="Event Cover"
-										className="object-covertransition-transform duration-300 hover:scale-105"
+										className="object-cover transition-transform duration-300 hover:scale-105"
 										height={400}
 										width={600}
 										style={{ aspectRatio: '1/1', objectFit: 'cover' }}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d17bd9d..20698ab 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,7 +29,7 @@ export default function Home() {
 								{isLoggedIn ? (
 									<Link href={'explore/clubs'}>
 										<Button
-											className="invert-[.2] dark:text-white dark:invert-0"
+											className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800/70"
 											variant={'secondary'}
 										>
 											Explore Clubs
@@ -39,14 +39,19 @@ export default function Home() {
 									<>
 										<Link href={'/sign-in'}>
 											<Button
-												className="hidden invert dark:text-white dark:invert-0 sm:inline-flex"
+												className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800/70"
 												variant={'secondary'}
 											>
 												Join Now
 											</Button>
 										</Link>
 										<Link href={'explore/clubs'}>
-											<Button variant={'dark' ? 'secondary' : 'default'}>Explore Clubs</Button>
+											<Button
+												className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800/70"
+												variant={'secondary'}
+											>
+												Explore Clubs
+											</Button>
 										</Link>
 									</>
 								)}
@@ -71,34 +76,34 @@ export default function Home() {
 			<section className="pt-20">
 				<div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
 					<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-						<div className="hover: space-y-4 rounded-lg bg-[#0c1125] p-6 shadow-md transition duration-300 hover:bg-[#0c1125]/80">
-							<UsersIcon className="h-8 w-8 text-gray-50" />
-							<h3 className="text-xl font-semibold text-white">Discover Clubs</h3>
-							<p className="pb-4 text-gray-400">
+						<div className="space-y-4 rounded-lg bg-blue-200 p-6 shadow-md transition duration-300 hover:bg-blue-200/70 dark:bg-[#0c1125] dark:hover:bg-[#0c1125]/60">
+							<UsersIcon className="h-8 w-8 dark:text-white" />
+							<h3 className="text-xl font-semibold dark:text-white">Discover Clubs</h3>
+							<p className="pb-4 text-neutral-600 dark:text-gray-400">
 								Explore a diverse range of clubs that cater to your interests, hobbies, and
 								passions.
 							</p>
-							<Link className="text-gray-50 hover:underline" href={'/explore/clubs'}>
+							<Link className="hover:underline dark:text-white" href={'/explore/clubs'}>
 								Browse Clubs
 							</Link>
 						</div>
-						<div className="space-y-4 rounded-lg bg-[#0c1125] p-6 shadow-md transition duration-300 hover:bg-[#0c1125]/80">
-							<CalendarIcon className="h-8 w-8 text-gray-50" />
-							<h3 className="text-xl font-semibold text-white">Attend Events</h3>
-							<p className="pb-4 text-gray-400">
+						<div className="space-y-4 rounded-lg bg-blue-200 p-6 shadow-md transition duration-300 hover:bg-blue-200/70 dark:bg-[#0c1125] dark:hover:bg-[#0c1125]/60">
+							<CalendarIcon className="h-8 w-8 dark:text-white" />
+							<h3 className="text-xl font-semibold dark:text-white">Attend Events</h3>
+							<p className="pb-4 text-neutral-600 dark:text-gray-400">
 								Stay up-to-date with the latest club events and activities, and participate in them.
 							</p>
-							<Link className=" text-gray-50 hover:underline" href={'/explore/events'}>
+							<Link className="hover:underline dark:text-white" href={'/explore/events'}>
 								View Events
 							</Link>
 						</div>
-						<div className="space-y-4 rounded-lg bg-[#0c1125] p-6 shadow-md transition duration-300 hover:bg-[#0c1125]/80">
-							<GroupIcon className="h-8 w-8 text-gray-50" />
-							<h3 className="text-xl font-semibold text-white">Connect with Members</h3>
-							<p className="pb-4 text-gray-400">
+						<div className="space-y-4 rounded-lg bg-blue-200 p-6 shadow-md transition duration-300 hover:bg-blue-200/70 dark:bg-[#0c1125] dark:hover:bg-[#0c1125]/60">
+							<GroupIcon className="h-8 w-8 dark:text-white" />
+							<h3 className="text-xl font-semibold dark:text-white">Connect with Members</h3>
+							<p className="pb-4 text-neutral-600 dark:text-gray-400">
 								Engage with other club members, share ideas, and build meaningful connections.
 							</p>
-							<Link className="text-gray-50 hover:underline" href="#">
+							<Link className="hover:underline dark:text-white" href="#">
 								Join the Community
 							</Link>
 						</div>
diff --git a/src/app/user/[userID]/page.tsx b/src/app/user/[userID]/page.tsx
index f784d76..7c53508 100644
--- a/src/app/user/[userID]/page.tsx
+++ b/src/app/user/[userID]/page.tsx
@@ -10,7 +10,6 @@ import { toast } from 'sonner'
 import UserAvatar from '@/components/user/userAvatar'
 import { Skeleton } from '@/components/ui/skeleton'
 import Nav from '@/components/NavBar'
-import DialogViewUserInvites from '@/components/user/DialogViewUserInvites'
 
 const UserPage = ({ params }: { params: { userID: number } }) => {
 	const { user } = useUserStore()
@@ -57,7 +56,7 @@ const UserPage = ({ params }: { params: { userID: number } }) => {
 			<Nav />
 			<div className="flex flex-col items-center justify-center px-4 py-8 pt-10 text-white dark:bg-[#020817] md:px-8 md:py-12">
 				{pageowner ? (
-					<div className="w-full max-w-xl rounded-lg bg-[#0c1125] p-6 pt-10 shadow-lg md:p-8">
+					<div className="relative w-full max-w-xl rounded-lg border bg-accent p-6 pt-10 shadow-lg dark:bg-[#0c1125] md:p-8">
 						<div className="flex items-center space-x-4">
 							<div className="flex-shrink-0">
 								<div className="flex h-24 w-24 items-center justify-center overflow-hidden rounded-full">
@@ -65,22 +64,20 @@ const UserPage = ({ params }: { params: { userID: number } }) => {
 								</div>
 							</div>
 							<div className="flex-1">
-								<h1 className="text-2xl font-bold">
+								<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
 									{pageowner.first_name} {pageowner.last_name}
 								</h1>
-								<p className="text-sm text-gray-400">{pageowner.email}</p>
-								<div className="mt-2 flex items-center space-x-2">
+								<p className="text-xs text-gray-700 dark:text-gray-400 sm:text-sm">
+									{pageowner.email}
+								</p>
+								<div className="mt-2 flex flex-wrap items-center space-x-2">
 									<div className="rounded-md bg-gray-700 px-2 py-1 text-xs">
 										{pageowner.major}-{pageowner.group_name}
 									</div>
 									<div className="rounded-md bg-gray-700 px-2 py-1 text-xs">
 										User ID: {params.userID}
 									</div>
-								</div>
-							</div>
-							<div className="flex-shrink-0">
-								<div className="w-15 h-20 overflow-hidden rounded">
-									<div className="rounded-md bg-gray-700 px-2 py-1 text-xs">
+									<div className="absolute right-4 top-4 rounded-md bg-gray-700 px-2 py-1 text-xs">
 										{pageowner.barcode}
 									</div>
 								</div>
@@ -90,7 +87,7 @@ const UserPage = ({ params }: { params: { userID: number } }) => {
 							{isOwner && (
 								<div>
 									<Button
-										className="w-full bg-white text-black hover:bg-muted/50 dark:bg-white dark:text-black"
+										className="w-full bg-blue-200 text-black hover:bg-blue-200/70 dark:bg-white dark:hover:bg-muted/50"
 										variant="default"
 										onClick={() => router.push('/user/edit')}
 									>
@@ -109,17 +106,17 @@ const UserPage = ({ params }: { params: { userID: number } }) => {
 				)}
 				<div className="mt-6 w-full max-w-xl md:mt-8">
 					<h2 className="mb-4 text-lg font-bold text-gray-800 dark:text-white">Clubs</h2>
-					<div className="rounded-lg bg-[#0c1125] p-6 shadow-lg md:p-8">
+					<div className="rounded-lg border bg-accent p-6 shadow-lg dark:bg-[#0c1125] md:p-8">
 						{Number(clubs?.length) > 0 ? (
 							<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
 								{clubs?.map((club) => (
 									<div
 										key={club.id}
-										className="flex cursor-pointer items-center space-x-4 rounded-lg  bg-gray-800 p-4 shadow-lg transition-transform duration-300 hover:scale-105 md:p-6 "
+										className="flex cursor-pointer items-center space-x-4 rounded-lg bg-white p-4 shadow-lg transition-transform duration-300 hover:scale-105 dark:bg-gray-800 md:p-6 "
 										onClick={() => router.push(`/clubs/${club.id}`)}
 									>
 										<div className="flex-shrink-0">
-											<div className="h-12 w-12 overflow-hidden rounded-full">
+											<div className="h-13 w-13 overflow-hidden rounded-full border">
 												<Image
 													src={club.logo_url ?? '/main_photo.jpeg'}
 													alt={`Logo of ${club.name}`}
@@ -131,7 +128,9 @@ const UserPage = ({ params }: { params: { userID: number } }) => {
 											</div>
 										</div>
 										<div className="flex-1 overflow-hidden">
-											<p className="break-words text-lg font-bold text-white">{club.name}</p>
+											<p className="break-words text-lg font-bold text-gray-900 dark:text-white">
+												{club.name}
+											</p>
 											<p className="text-sm text-gray-400">{club.club_type}</p>
 										</div>
 									</div>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 340466e..72a106d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -26,32 +26,34 @@ export default function Nav() {
 	}
 
 	return (
-		<header className="sticky top-0 z-50 border-b bg-gray-900 text-white backdrop-blur-sm dark:bg-gray-900">
+		<header className="sticky top-0 z-50 border-b bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
 			<div className="container mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6 lg:px-8">
 				<Link className="flex items-center gap-2" href="/">
-					<span className="text-lg font-semibold tracking-tight text-gray-50">UCMS AITU</span>
+					<span className="text-lg font-semibold tracking-tight transition duration-300">
+						UCMS AITU
+					</span>
 				</Link>
 				<nav className="hidden space-x-4 sm:flex">
 					<Link
-						className="text-grey-50 rounded-md px-3 py-2 text-sm font-medium transition duration-300 hover:bg-accent/80"
+						className="rounded-md px-3 py-2 text-sm font-medium transition duration-300 hover:bg-gray-200 dark:hover:bg-accent"
 						href={'/explore/clubs'}
 					>
 						Clubs
 					</Link>
 					<Link
-						className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-accent"
+						className="rounded-md px-3 py-2 text-sm font-medium transition duration-300 hover:bg-gray-200 dark:hover:bg-accent"
 						href={'/explore/events'}
 					>
 						Events
 					</Link>
 					<Link
-						className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-accent"
+						className="rounded-md px-3 py-2 text-sm font-medium transition duration-300 hover:bg-gray-200 dark:hover:bg-accent"
 						href="#"
 					>
 						Community
 					</Link>
 					<Link
-						className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-accent"
+						className="rounded-md px-3 py-2 text-sm font-medium transition duration-300 hover:bg-gray-200 dark:hover:bg-accent"
 						href={'/explore/faq'}
 					>
 						FAQ
@@ -63,7 +65,10 @@ export default function Nav() {
 					) : (
 						<>
 							<Link href={'/sign-in'}>
-								<Button className="hidden sm:inline-flex" variant="secondary">
+								<Button
+									className="hidden bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800/70 sm:inline-flex"
+									variant="secondary"
+								>
 									Sign In
 								</Button>
 							</Link>
@@ -79,25 +84,25 @@ export default function Nav() {
 						<SheetContent className="w-auto max-w-xs" side="right">
 							<div className="grid gap-4 p-4">
 								<Link
-									className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-[#040a2f]"
+									className="rounded-md px-3 py-2 text-sm font-medium hover:bg-accent"
 									href={'/explore/clubs'}
 								>
 									Clubs
 								</Link>
 								<Link
-									className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-[#040a2f]"
+									className="rounded-md px-3 py-2 text-sm font-medium hover:bg-[#040a2f]"
 									href={'/explore/events'}
 								>
 									Events
 								</Link>
 								<Link
-									className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-[#040a2f]"
+									className="rounded-md px-3 py-2 text-sm font-medium hover:bg-[#040a2f]"
 									href="#"
 								>
 									Community
 								</Link>
 								<Link
-									className="rounded-md px-3 py-2 text-sm font-medium text-gray-50 hover:bg-[#040a2f]"
+									className="rounded-md px-3 py-2 text-sm font-medium hover:bg-[#040a2f]"
 									href="#"
 								>
 									About
@@ -105,7 +110,10 @@ export default function Nav() {
 								<div className="flex flex-col gap-2">
 									{!isLoggedIn ? (
 										<Link href={'/sign-in'}>
-											<Button className="inline-flex" variant="secondary">
+											<Button
+												className="inline-flex bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800/70"
+												variant="secondary"
+											>
 												Sign In
 											</Button>
 										</Link>
diff --git a/src/components/clubs/ClubEvent.tsx b/src/components/clubs/ClubEvent.tsx
index 1911623..de00a4b 100644
--- a/src/components/clubs/ClubEvent.tsx
+++ b/src/components/clubs/ClubEvent.tsx
@@ -10,9 +10,9 @@ export default function ClubEvent(props: { event: Event }) {
 
 	return (
 		<Card>
-			<CardContent className="flex w-full flex-wrap items-center justify-between gap-2 overflow-hidden rounded-lg bg-gray-700 p-4 sm:flex-nowrap sm:gap-4">
+			<CardContent className="flex w-full flex-wrap items-center justify-between gap-2 overflow-hidden rounded-lg p-4 dark:bg-gray-700 sm:flex-nowrap sm:gap-4">
 				<div className="flex flex-col">
-					<h3 className="text-nd font-medium text-white">{props.event.title}</h3>
+					<h3 className="text-md font-medium">{props.event.title}</h3>
 					<p className="text-sm font-normal text-muted-foreground">
 						{new Date(props.event.start_date).toLocaleString()}
 					</p>
@@ -24,7 +24,10 @@ export default function ClubEvent(props: { event: Event }) {
 				</div>
 				<div className="flex flex-row items-end">
 					<Link href={`/events/${props.event.id}`}>
-						<Button className="bg-gray-900" variant="outline">
+						<Button
+							className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-900/90"
+							variant="outline"
+						>
 							View
 						</Button>
 					</Link>
diff --git a/src/components/clubs/ClubMembersCard.tsx b/src/components/clubs/ClubMembersCard.tsx
index c28c3e8..a7d9b38 100644
--- a/src/components/clubs/ClubMembersCard.tsx
+++ b/src/components/clubs/ClubMembersCard.tsx
@@ -5,7 +5,6 @@ import Link from 'next/link'
 import { decimalToRgb } from '@/helpers/helper'
 import { Club, ClubMember, ClubRole } from '@/types/club'
 import ClubMembersDialog from '@/components/clubs/ClubMembersDialog'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
 interface ClubMembersCardProps {
 	club: Club
@@ -24,7 +23,7 @@ const ClubMembersCard: React.FC<ClubMembersCardProps> = ({ club, clubMembers })
 	}
 	return (
 		<>
-			<Card className="mt-8 bg-[#0c1125]">
+			<Card className="mt-8 bg-accent dark:bg-[#0c1125]">
 				<CardHeader>
 					<CardTitle onClick={openClubMembersDialog}>
 						Club Members <span className="text-base"> - {club?.num_of_members}</span>
diff --git a/src/components/clubs/ClubPageButtons.tsx b/src/components/clubs/ClubPageButtons.tsx
index 1170898..6d9fd92 100644
--- a/src/components/clubs/ClubPageButtons.tsx
+++ b/src/components/clubs/ClubPageButtons.tsx
@@ -22,10 +22,17 @@ export default function ClubPageButtons(props: {
 					{hasPermission(props.memberPerms, Permissions.ALL) && (
 						<div className=" flex flex-col gap-3 md:flex-row">
 							<Link href={`/clubs/${props.club?.id}/settings`}>
-								<Button variant="default">Settings</Button>
+								<Button
+									variant="default"
+									className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+								>
+									Settings
+								</Button>
 							</Link>
 							<Link href={`/clubs/${props.club?.id}/todo`}>
-								<Button>Notion Link</Button>
+								<Button className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90">
+									Notion Link
+								</Button>
 							</Link>
 						</div>
 					)}
diff --git a/src/components/clubs/events/DialogViewClubInvites.tsx b/src/components/clubs/events/DialogViewClubInvites.tsx
index 22af4fc..cc0b7cb 100644
--- a/src/components/clubs/events/DialogViewClubInvites.tsx
+++ b/src/components/clubs/events/DialogViewClubInvites.tsx
@@ -66,7 +66,10 @@ function DialogViewClubInvites({ clubId }: DialogViewClubInvites) {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button variant="secondary">
+				<Button
+					variant="secondary"
+					className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+				>
 					Invites{' '}
 					{pendingClubInvites > 0 && (
 						<span className={pendingClubInvites > 0 ? 'text-red-500' : ''}>
diff --git a/src/components/clubs/roles/DialogCreateClubRole.tsx b/src/components/clubs/roles/DialogCreateClubRole.tsx
index fd58d31..7fef74c 100644
--- a/src/components/clubs/roles/DialogCreateClubRole.tsx
+++ b/src/components/clubs/roles/DialogCreateClubRole.tsx
@@ -128,7 +128,11 @@ export function DialogCreateClubRole({
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant={'default'} className="right-0 w-40" onClick={toggleDialog}>
+				<Button
+					variant={'default'}
+					className="right-0 w-40 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+					onClick={toggleDialog}
+				>
 					Create Role
 				</Button>
 			</DialogTrigger>
diff --git a/src/components/clubs/settings/DangerZone.tsx b/src/components/clubs/settings/DangerZone.tsx
index 6c40c54..b62e30e 100644
--- a/src/components/clubs/settings/DangerZone.tsx
+++ b/src/components/clubs/settings/DangerZone.tsx
@@ -36,7 +36,7 @@ export default function DangerZone() {
 			toast.error('Failed to delete club', { description: response.data.error })
 		}
 		setIsDeleteDialogOpen(false)
-	}, [club?.id])
+	}, [club?.id, router])
 
 	return (
 		<Card className="border-red-900">
@@ -50,7 +50,7 @@ export default function DangerZone() {
 				<div className="flex items-center py-2">
 					<Label className="text-sm text-muted-foreground">Transfer ownership of the club</Label>
 					<Button
-						className="ml-auto text-red-500 hover:bg-red-500 hover:text-white"
+						className="ml-auto bg-red-100 text-red-500 hover:bg-red-500 hover:text-white dark:bg-[#182234] dark:hover:bg-red-500"
 						variant="secondary"
 						disabled={!isOwner}
 						onClick={() => setIsTransferOwnershipDialogOpen(true)}
@@ -62,7 +62,7 @@ export default function DangerZone() {
 				<div className="flex items-center py-2">
 					<Label className="text-sm text-muted-foreground">Delete Club</Label>
 					<Button
-						className="ml-auto text-red-500 hover:bg-red-500 hover:text-white"
+						className="ml-auto bg-red-100 text-red-500 hover:bg-red-500 hover:text-white dark:bg-[#182234] dark:hover:bg-red-500"
 						variant="secondary"
 						disabled={!isOwner}
 						onClick={() => setIsDeleteDialogOpen(true)}
diff --git a/src/components/clubs/settings/DialogClubOwnershipTransfer.tsx b/src/components/clubs/settings/DialogClubOwnershipTransfer.tsx
index 0f7bb7c..61f6827 100644
--- a/src/components/clubs/settings/DialogClubOwnershipTransfer.tsx
+++ b/src/components/clubs/settings/DialogClubOwnershipTransfer.tsx
@@ -152,7 +152,12 @@ export default function DialogClubOwnershipTransfer({
 					>
 						Yes, transfer the ownership
 					</Button>
-					<Button onClick={onClick1}>No, cancel</Button>
+					<Button
+						className="bg-blue-300 text-gray-900 hover:bg-blue-300/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+						onClick={onClick1}
+					>
+						No, cancel
+					</Button>
 				</DialogContent>
 			</Dialog>
 
diff --git a/src/components/clubs/settings/DialogClubUpdateInfo.tsx b/src/components/clubs/settings/DialogClubUpdateInfo.tsx
index 3319c61..04530b7 100644
--- a/src/components/clubs/settings/DialogClubUpdateInfo.tsx
+++ b/src/components/clubs/settings/DialogClubUpdateInfo.tsx
@@ -133,7 +133,10 @@ export function DialogUpdateClubInfo() {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button className="w-40" variant="secondary">
+				<Button
+					className="w-40 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#1B2436] dark:text-white dark:hover:bg-[#1B2436]/80"
+					variant="secondary"
+				>
 					Update Club Info
 				</Button>
 			</DialogTrigger>
diff --git a/src/components/clubs/settings/DialogDeleteClub.tsx b/src/components/clubs/settings/DialogDeleteClub.tsx
index d59e0c9..3babd23 100644
--- a/src/components/clubs/settings/DialogDeleteClub.tsx
+++ b/src/components/clubs/settings/DialogDeleteClub.tsx
@@ -48,7 +48,12 @@ export default function DialogDeleteClub({
 					<Button onClick={handleAccept} variant={'destructive'}>
 						Yes, delete the club
 					</Button>
-					<Button onClick={onCancel}>No, cancel</Button>
+					<Button
+						className="bg-blue-300 text-gray-900 hover:bg-blue-300/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+						onClick={onCancel}
+					>
+						No, cancel
+					</Button>
 				</DialogContent>
 			</Dialog>
 		</div>
diff --git a/src/components/clubs/settings/DialogUpdateClubBanner.tsx b/src/components/clubs/settings/DialogUpdateClubBanner.tsx
index c78753f..b6d376b 100644
--- a/src/components/clubs/settings/DialogUpdateClubBanner.tsx
+++ b/src/components/clubs/settings/DialogUpdateClubBanner.tsx
@@ -72,7 +72,7 @@ export function DialogUpdateClubBanner() {
 				onClick={() => {
 					inputRef.current?.click()
 				}}
-				className="w-40"
+				className="w-40 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#1B2436] dark:text-white dark:hover:bg-[#1B2436]/80"
 				variant="secondary"
 			>
 				Upload Club Banner
diff --git a/src/components/clubs/settings/DialogUpdateClubLogo.tsx b/src/components/clubs/settings/DialogUpdateClubLogo.tsx
index 2cbf759..26405b0 100644
--- a/src/components/clubs/settings/DialogUpdateClubLogo.tsx
+++ b/src/components/clubs/settings/DialogUpdateClubLogo.tsx
@@ -72,7 +72,7 @@ export function DialogUpdateClubLogo() {
 				onClick={() => {
 					inputRef.current?.click()
 				}}
-				className="w-40"
+				className="w-40 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#1B2436] dark:text-white dark:hover:bg-[#1B2436]/80"
 				variant="secondary"
 			>
 				Upload Club Logo
diff --git a/src/components/clubs/settings/EventCreationComponent.tsx b/src/components/clubs/settings/EventCreationComponent.tsx
index 3a8e1e5..97982af 100644
--- a/src/components/clubs/settings/EventCreationComponent.tsx
+++ b/src/components/clubs/settings/EventCreationComponent.tsx
@@ -46,7 +46,12 @@ export default function EventCreationComponent({ clubID, onEventCreated }: UseEv
 	}, [clubID, onEventCreated])
 
 	return (
-		<Button onClick={handleCreateEvent} variant="secondary" type="submit">
+		<Button
+			onClick={handleCreateEvent}
+			variant="secondary"
+			type="submit"
+			className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+		>
 			Create
 		</Button>
 	)
diff --git a/src/components/ui/dropdown_for_logged_in.tsx b/src/components/ui/dropdown_for_logged_in.tsx
index b94b8cd..61601b7 100644
--- a/src/components/ui/dropdown_for_logged_in.tsx
+++ b/src/components/ui/dropdown_for_logged_in.tsx
@@ -29,7 +29,10 @@ const DropdownForLoggedIn = ({ user, logout }: { user: User; logout: () => void
 				<div className="flex flex-row">
 					<DialogViewUserInvites userId={user?.id} />
 					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" className="flex items-center space-x-2.5 ">
+						<Button
+							variant="ghost"
+							className="flex items-center space-x-2.5 transition duration-300 hover:bg-gray-200 dark:hover:bg-accent"
+						>
 							<p>{user?.first_name}</p>
 							<UserAvatar user={user} size={44} />
 						</Button>
diff --git a/src/components/user/LoginForm.tsx b/src/components/user/LoginForm.tsx
index 3028ccb..8a125dc 100644
--- a/src/components/user/LoginForm.tsx
+++ b/src/components/user/LoginForm.tsx
@@ -129,7 +129,10 @@ export default function Login() {
 									</FormItem>
 								)}
 							/>
-							<Button type="submit" className="w-full">
+							<Button
+								type="submit"
+								className="w-full bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+							>
 								Log in
 							</Button>
 						</form>
diff --git a/src/components/user/SignUpForm.tsx b/src/components/user/SignUpForm.tsx
index 5075283..f96080d 100644
--- a/src/components/user/SignUpForm.tsx
+++ b/src/components/user/SignUpForm.tsx
@@ -85,7 +85,7 @@ export default function SignUp() {
 	}
 
 	return (
-		<main className="flex min-h-screen flex-col items-center justify-between p-12 sm:p-24">
+		<main className="flex min-h-screen flex-col items-center justify-between p-12 sm:p-14">
 			<Card className="w-full max-w-sm">
 				<CardHeader>
 					<CardTitle className="text-2xl">Register</CardTitle>
@@ -219,7 +219,10 @@ export default function SignUp() {
 								)}
 							/>
 
-							<Button type="submit" className="w-full">
+							<Button
+								type="submit"
+								className="w-full bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+							>
 								Create an account
 							</Button>
 						</form>
@@ -235,7 +238,7 @@ export default function SignUp() {
 					{/*</Button>*/}
 					<div className="mt-2 text-center text-sm">
 						Already have an account?{' '}
-						<Link href="/sign-in" className="underline">
+						<Link href="/sign-in" className="underline ">
 							Log in
 						</Link>
 					</div>
diff --git a/src/lib/eventStatusUtils.ts b/src/lib/eventStatusUtils.ts
index 14c2bf3..a9671b2 100644
--- a/src/lib/eventStatusUtils.ts
+++ b/src/lib/eventStatusUtils.ts
@@ -4,10 +4,10 @@ export type EventStatusMapping = {
 
 export const eventStatusMapping: EventStatusMapping = {
 	DRAFT: { color: 'bg-gray-500', label: 'Draft' },
-	PENDING: { color: 'bg-yellow-500', label: 'Pending' },
-	APPROVED: { color: 'bg-green-500', label: 'Approved' },
+	PENDING: { color: 'bg-yellow-600', label: 'Pending' },
+	APPROVED: { color: 'bg-green-600', label: 'Approved' },
 	REJECTED: { color: 'bg-red-500', label: 'Rejected' },
-	IN_PROGRESS: { color: 'bg-green-900', label: 'In Progress' },
+	IN_PROGRESS: { color: 'bg-green-800', label: 'In Progress' },
 }
 
 export function getEventStatus(status: string) {