white theme fix in edit event page + minor changes

Arakasi21 · Jun 8, 2024 · 793c692 · 793c692
1 parent ef0ab5f
commit 793c692
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 27 deletions.
diff --git a/src/app/events/[eventID]/edit/page.tsx b/src/app/events/[eventID]/edit/page.tsx
@@ -520,7 +520,7 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 							/>
 						)}
 					</div>
-					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
+					<div className="rounded-lg bg-accent p-6 dark:bg-[#030a20] sm:p-8">
 						<CardTitle className="mb-2 flex items-center justify-center">EDIT EVENT</CardTitle>
 						{/*<Separator />*/}
 						<div className="mb-4 mt-2">
@@ -627,7 +627,12 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 										className="rounded-md px-2 py-1 text-sm"
 										placeholder="Enter new tag"
 									/>
-									<Button variant="default" disabled={!isEditable} onClick={handleAddTag}>
+									<Button
+										className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+										variant="default"
+										disabled={!isEditable}
+										onClick={handleAddTag}
+									>
 										Add Tag
 									</Button>
 								</div>
@@ -681,7 +686,11 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 
 									{/*CHECKING */}
 									{isUserOrganizer && event.status !== 'PENDING' && (
-										<Button className="h-8" variant="secondary" onClick={handleSubmit}>
+										<Button
+											className="h-8 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+											variant="secondary"
+											onClick={handleSubmit}
+										>
 											Update Event
 										</Button>
 									)}
@@ -690,7 +699,11 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 										isEventReadyForReview &&
 										event.status == 'DRAFT' &&
 										formData.type === 'UNIVERSITY' && (
-											<Button className="h-8" variant="default" onClick={handleSendToReview}>
+											<Button
+												className="h-8 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+												variant="default"
+												onClick={handleSendToReview}
+											>
 												Send to Review
 											</Button>
 										)}
@@ -723,7 +736,7 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 				{/* ================ COVER IMAGE ===============  */}
 
 				<section className="mb-4">
-					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
+					<div className="rounded-lg bg-accent p-6 dark:bg-[#030a20] sm:p-8">
 						<h3 className="text-xl font-semibold">Cover Image</h3>
 						<p className=" mb-4 text-sm text-gray-400"> Upload a cover image for your event.</p>
 
@@ -756,8 +769,8 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 
 				{/* ============================ 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 className="rounded-lg bg-accent p-6 dark:bg-[#030a20] sm:p-8">
+						<div className="flex flex-col items-center 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">
@@ -776,7 +789,10 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 								<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">
+										<li
+											key={invite.id}
+											className="flex items-center justify-between space-x-2 space-y-6"
+										>
 											<div className="flex items-center py-2">
 												<Link href={`/clubs/${invite.club.id}`}>
 													<img
@@ -808,7 +824,7 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 
 				{/* ============================ ADD ORGANIZERS ============================ */}
 				<section className="mb-4">
-					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
+					<div className="rounded-lg bg-accent p-6 dark:bg-[#030a20] sm:p-8">
 						<div className="flex flex-col items-center gap-4 sm:flex-row">
 							<div>
 								<h3 className="text-xl font-semibold">Add Organizers</h3>
@@ -865,7 +881,7 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 				</section>
 				{/*TODO Attach files section DO LATER*/}
 				<section>
-					<div className="rounded-lg bg-[#030a20] p-6 sm:p-8">
+					<div className="rounded-lg bg-accent p-6 dark:bg-[#030a20] sm:p-8">
 						<h3 className="text-xl font-semibold">Attach Files</h3>
 						<p className="mb-4 text-sm text-gray-400">Attach files to your event.</p>
 						<Input
@@ -879,7 +895,7 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 				</section>
 
 				<section className="my-4">
-					<Card className="bg-[#030a20]">
+					<Card className="bg-accent dark:bg-[#030a20]">
 						<CardHeader>
 							{' '}
 							<CardTitle>Participants</CardTitle>
@@ -958,7 +974,12 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 														<Button variant={'destructive'} onClick={confirmKickMember}>
 															Yes, kick the user
 														</Button>
-														<Button onClick={() => setIsKickDialogOpen(false)}>No, cancel</Button>
+														<Button
+															className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+															onClick={() => setIsKickDialogOpen(false)}
+														>
+															No, cancel
+														</Button>
 													</DialogContent>
 												</Dialog>
 												<Dialog open={isBanDialogOpen} onOpenChange={setIsBanDialogOpen}>
@@ -978,7 +999,12 @@ export default function EditEventPage({ params }: { params: { eventID: string }
 														<Button variant={'destructive'} onClick={confirmBanMember}>
 															Yes, ban the user
 														</Button>
-														<Button onClick={() => setIsBanDialogOpen(false)}>No, cancel</Button>
+														<Button
+															className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+															onClick={() => setIsBanDialogOpen(false)}
+														>
+															No, cancel
+														</Button>
 													</DialogContent>
 												</Dialog>
 											</TableRow>

diff --git a/src/app/events/[eventID]/page.tsx b/src/app/events/[eventID]/page.tsx
@@ -333,7 +333,7 @@ export default function Page({ params }: { params: { eventID: string } }) {
 								{isUserOrganizer && (
 									<Link className="w-full" href={`/events/${event.id}/edit`}>
 										<Button
-											className="w-full bg-gray-500 text-white hover:bg-gray-700"
+											className="w-full bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
 											variant="default"
 										>
 											Edit Event
@@ -356,7 +356,11 @@ export default function Page({ params }: { params: { eventID: string } }) {
 
 								{participantStatus === 'UNKNOWN' && event.status === 'IN_PROGRESS' && (
 									<div className="flex gap-2">
-										<Button className="mt-2 flex-1" variant="default" onClick={participateEvent}>
+										<Button
+											className="mt-2 flex-1 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+											variant="default"
+											onClick={participateEvent}
+										>
 											Participate
 										</Button>
 									</div>

diff --git a/src/components/clubs/ClubPageButtons.tsx b/src/components/clubs/ClubPageButtons.tsx
@@ -38,7 +38,12 @@ export default function ClubPageButtons(props: {
 					)}
 					<div>
 						{props.memberStatus === 'NOT_MEMBER' && (
-							<Button onClick={props.onClick}>Join Club</Button>
+							<Button
+								className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+								onClick={props.onClick}
+							>
+								Join Club
+							</Button>
 						)}
 						{props.memberStatus === 'PENDING' && <Button disabled>Pending</Button>}
 						{props.memberStatus === 'BANNED' && (

diff --git a/src/components/clubs/members/memberRolesRow.tsx b/src/components/clubs/members/memberRolesRow.tsx
@@ -254,7 +254,12 @@ function MemberRolesRow({
 					<Button variant={'destructive'} onClick={confirmKickMember}>
 						Yes, kick the user
 					</Button>
-					<Button onClick={() => setIsKickDialogOpen(false)}>No, cancel</Button>
+					<Button
+						className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+						onClick={() => setIsKickDialogOpen(false)}
+					>
+						No, cancel
+					</Button>
 				</DialogContent>
 			</Dialog>
 			<Dialog open={isBanDialogOpen} onOpenChange={setIsBanDialogOpen}>
@@ -272,7 +277,12 @@ function MemberRolesRow({
 					<Button variant={'destructive'} onClick={confirmBanMember}>
 						Yes, ban the user
 					</Button>
-					<Button onClick={() => setIsBanDialogOpen(false)}>No, cancel</Button>
+					<Button
+						className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+						onClick={() => setIsBanDialogOpen(false)}
+					>
+						No, cancel
+					</Button>
 				</DialogContent>
 			</Dialog>
 		</TableRow>

diff --git a/src/components/clubs/roles/DialogUpdateClubRole.tsx b/src/components/clubs/roles/DialogUpdateClubRole.tsx
@@ -159,7 +159,10 @@ const RoleEditForm: React.FC<{
 						</FormItem>
 					)}
 				/>
-				<Button className="mt-8" type="submit">
+				<Button
+					className="mt-8 bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+					type="submit"
+				>
 					Update Role
 				</Button>
 			</form>

diff --git a/src/components/events/InviteCollaboratorDialog.tsx b/src/components/events/InviteCollaboratorDialog.tsx
@@ -137,7 +137,9 @@ const InviteCollaboratorDialog: React.FC<InviteCollaboratorDialogProps> = ({
 		<>
 			<Dialog>
 				<DialogTrigger asChild>
-					<Button className="ml-auto">Invite Clubs</Button>
+					<Button className="ml-auto bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90">
+						Invite Clubs
+					</Button>
 				</DialogTrigger>
 				<DialogContent className="sm:max-w-[600px]">
 					<DialogHeader>
@@ -183,15 +185,20 @@ const InviteCollaboratorDialog: React.FC<InviteCollaboratorDialogProps> = ({
 										<div className="font-medium">{club.name} </div>
 									</div>
 									{event?.collaborator_clubs.find((collab) => collab.id === club.id) ? (
-										<Button variant="outline" disabled>
+										<Button className="border-2" variant="outline" disabled>
 											Already a collaborator
 										</Button>
 									) : invitedClubs.find((invite) => invite.club.id === club.id) ? (
-										<Button variant="outline" disabled>
+										<Button className="border-2" variant="outline" disabled>
 											Invited
 										</Button>
 									) : (
-										<Button onClick={() => handleInvite(club.id)} variant="default" size="sm">
+										<Button
+											className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+											onClick={() => handleInvite(club.id)}
+											variant="default"
+											size="sm"
+										>
 											Invite
 										</Button>
 									)}

diff --git a/src/components/events/inviteOrganizerDialog.tsx b/src/components/events/inviteOrganizerDialog.tsx
@@ -145,7 +145,9 @@ export function InviteOrganizerDialog({
 		<>
 			<Dialog>
 				<DialogTrigger asChild>
-					<Button className="ml-auto">Invite Users</Button>
+					<Button className="ml-auto bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90">
+						Invite Users
+					</Button>
 				</DialogTrigger>
 				<DialogContent className="sm:max-w-[600px]">
 					<DialogHeader>
@@ -194,11 +196,20 @@ export function InviteOrganizerDialog({
 										</div>
 									</div>
 									{event?.organizers.find((organizer) => organizer.id === member.id) ? (
-										<Button disabled>Already Organizer</Button>
+										<Button className="border-2" variant="outline" disabled>
+											Already Organizer
+										</Button>
 									) : organizerInvites.find((invite) => invite.user.id === member.id) ? (
-										<Button disabled>Invite Pending</Button>
+										<Button className="border-2" variant="outline" disabled>
+											Invite Pending
+										</Button>
 									) : (
-										<Button onClick={() => handleInvite(member.id)}>Invite</Button>
+										<Button
+											className="bg-blue-200 text-gray-900 hover:bg-blue-200/70 dark:bg-[#ffffff] dark:hover:bg-[#ffffff]/90"
+											onClick={() => handleInvite(member.id)}
+										>
+											Invite
+										</Button>
 									)}
 								</div>
 							))}