+ design fixes

Arakasi21 · May 28, 2024 · 2242894 · 2242894
1 parent 6c72385
commit 2242894
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 49 deletions.
diff --git a/src/app/clubs/[clubID]/page.tsx b/src/app/clubs/[clubID]/page.tsx
@@ -86,7 +86,7 @@ function Page({ params }: { params: { clubID: number } }) {
 							<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#020817]/90" />
 						</div>
 
-						<div className="relative z-30 mx-auto max-w-[800px] pt-24">
+						<div className="relative z-30 mx-auto max-w-[800px] pt-14">
 							<BackgroundClubImage club={club} />
 							<div className="z-50 rounded-lg bg-[#0c1125]">
 								<div className="flex items-center justify-between gap-4 p-6">

diff --git a/src/app/events/[eventID]/edit/page.tsx b/src/app/events/[eventID]/edit/page.tsx
@@ -330,7 +330,7 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 			setFormData({
 				title: event.title || '',
 				description: event.description || '',
-				start_date: event.start_date ? event.start_date : '',
+				start_date: new Date().toISOString().slice(0, 16) ? event.start_date : '',
 				end_date: event.end_date ? event.end_date : '',
 				location_uni: event.location_university || '',
 				location_link: event.location_link || '',
@@ -605,6 +605,45 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 					</div>
 				</section>
 
+				{/* ============================ ADD COLLABORATORS ============================ */}
+				<section className="mb-4">
+					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
+						<div className="kitems-center flex flex-col gap-4 sm:flex-row">
+							<div>
+								<h3 className="text-xl font-semibold">Invite Club Collaborators</h3>
+								<p className="mb-4 text-sm text-gray-400">
+									Manage the clubs that can access and edit this event.
+								</p>
+							</div>
+							<InviteCollaboratorDialog eventID={params.eventID} fetchInvites={fetchInvites} />
+						</div>
+
+						{Array.isArray(collaboratorInvites) && collaboratorInvites.length > 0 && (
+							<div className="mt-4">
+								<h4 className="text-lg font-semibold">Pending Club Invites</h4>
+								<ul>
+									{collaboratorInvites.map((invite) => (
+										<li key={invite.id} className="flex items-center space-x-2">
+											<span>{invite.club.name}</span>
+											<div className="m-0 mt-0 flex items-center justify-center p-0">
+												<Button
+													size="sm"
+													className="mt-0"
+													variant="ghost"
+													onClick={() => revokeInvite(invite.id, 'collaborators')}
+												>
+													<XIcon className="h-4 w-4" />
+													<span className="sr-only">Revoke invite</span>
+												</Button>
+											</div>
+										</li>
+									))}
+								</ul>
+							</div>
+						)}
+					</div>
+				</section>
+
 				{/* ============================ ADD ORGANIZERS ============================ */}
 				<section className="mb-4">
 					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
@@ -658,45 +697,6 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 						)}
 					</div>
 				</section>
-
-				{/* ============================ ADD COLLABORATORS ============================ */}
-				<section className="mb-4">
-					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
-						<div className="kitems-center flex flex-col gap-4 sm:flex-row">
-							<div>
-								<h3 className="text-xl font-semibold">Invite Club Collaborators</h3>
-								<p className="mb-4 text-sm text-gray-400">
-									Manage the clubs that can access and edit this event.
-								</p>
-							</div>
-							<InviteCollaboratorDialog eventID={params.eventID} fetchInvites={fetchInvites} />
-						</div>
-
-						{Array.isArray(collaboratorInvites) && collaboratorInvites.length > 0 && (
-							<div className="mt-4">
-								<h4 className="text-lg font-semibold">Pending Club Invites</h4>
-								<ul>
-									{collaboratorInvites.map((invite) => (
-										<li key={invite.id} className="flex items-center space-x-2">
-											<span>{invite.club.name}</span>
-											<div className="m-0 mt-0 flex items-center justify-center p-0">
-												<Button
-													size="sm"
-													className="mt-0"
-													variant="ghost"
-													onClick={() => revokeInvite(invite.id, 'collaborators')}
-												>
-													<XIcon className="h-4 w-4" />
-													<span className="sr-only">Revoke invite</span>
-												</Button>
-											</div>
-										</li>
-									))}
-								</ul>
-							</div>
-						)}
-					</div>
-				</section>
 			</div>
 		</>
 	)

diff --git a/src/app/explore/clubs/page.tsx b/src/app/explore/clubs/page.tsx
@@ -8,6 +8,7 @@ import Nav from '@/components/NavBar'
 import { Badge } from '@/components/ui/badge'
 import Image from 'next/image'
 import useUserRolesStore from '@/store/useUserRoles'
+import { UsersIcon } from 'lucide-react'
 
 export default function Clubs() {
 	const [clubs, setClubs] = useState<Club[]>()
@@ -68,7 +69,7 @@ export default function Clubs() {
 										height={400}
 										width={600}
 										priority={true}
-										style={{ aspectRatio: '30/20', objectFit: 'cover' }}
+										style={{ aspectRatio: '30/15', objectFit: 'cover' }}
 									/>
 									<div className="space-y-2 p-4">
 										<div className="flex items-center gap-2">
@@ -90,8 +91,12 @@ export default function Clubs() {
 											</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">
-											<span>{club.num_of_members} members</span>
+										<div className="flex items-center justify-between  text-sm 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>
 										</div>
 									</div>

diff --git a/src/components/clubs/BackgroundClubImage.tsx b/src/components/clubs/BackgroundClubImage.tsx
@@ -5,7 +5,7 @@ export default function BackgroundClubImage(props: { club: Club | undefined }) {
 	return (
 		<div
 			style={{ backgroundImage: `url(${props.club?.banner_url ?? '/main_photo.jpeg'})` }}
-			className="h-40 w-full rounded-t-lg bg-cover bg-center"
+			className="h-52 w-full rounded-t-lg bg-cover bg-center"
 		/>
 	)
 }
diff --git a/src/components/clubs/settings/DialogUpdateClubBanner.tsx b/src/components/clubs/settings/DialogUpdateClubBanner.tsx
@@ -88,10 +88,10 @@ export function DialogUpdateClubBanner() {
 							<ImageCropper
 								imageUrl={imageUrl}
 								onCropRef={onCropRef}
-								aspect={25 / 4}
+								aspect={10 / 4}
 								borderRadius="0"
-								width={450}
-								height={200}
+								width={1200}
+								height={400}
 							/>
 						)}
 					</div>

diff --git a/src/components/clubs/settings/DialogUpdateClubLogo.tsx b/src/components/clubs/settings/DialogUpdateClubLogo.tsx
@@ -24,7 +24,7 @@ export function DialogUpdateClubLogo() {
 			}
 			onCropRef.current().then(async (croppedImgBlob) => {
 				const formData = new FormData()
-				formData.append('avatar', croppedImgBlob ? croppedImgBlob : '')
+				formData.append('logo', croppedImgBlob ? croppedImgBlob : '')
 
 				const response = await axiosAuth(
 					`${process.env.NEXT_PUBLIC_BACKEND_URL}/clubs/${club?.id}/logo`,