Skip to content

Commit

Permalink
+white theme fix(not everywhere)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kralsolomon
kralsolomon committed Jun 5, 2024
1 parent 6b8cfb6 commit 7d06c61
Show file tree
Hide file tree
Showing 27 changed files with 179 additions and 113 deletions.
17 changes: 9 additions & 8 deletions src/app/clubs/[clubID]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
12 changes: 7 additions & 5 deletions src/app/clubs/[clubID]/settings/_components/Events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />*/}
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
7 changes: 2 additions & 5 deletions src/app/clubs/[clubID]/settings/_components/Members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/app/clubs/[clubID]/settings/_components/RolesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions src/app/clubs/[clubID]/settings/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
28 changes: 17 additions & 11 deletions src/app/events/[eventID]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand Down
16 changes: 10 additions & 6 deletions src/app/explore/clubs/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/explore/events/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}
Expand Down
41 changes: 23 additions & 18 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
</>
)}
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 7d06c61

Please sign in to comment.