improved styling of event-card

client/src/components/Event/AssignmentTable.tsx

@@ -1,5 +1,13 @@
 import { classNames } from "@/lib";
 import { EventData } from "@/Zustand";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+} from "@heroui/react";
 
 export default function AssignmentTable({
 	tasks,
@@ -13,26 +21,42 @@ export default function AssignmentTable({
 	className?: string;
 }) {
 	return (
-		<table className={className}>
-			<tbody>
-				{tasks.map((task) => (
-					<tr
-						key={task.taskID}
-						className={classNames({
-							"text-danger":
-								task.userName === highlightUser ||
-								task.taskName === highlightTask,
-						})}
-					>
-						<th className="pr-4 text-left">{task.taskName}</th>
-						<td>
-							{task.userName ?? (
-								<span className="italic text-highlight">missing</span>
-							)}
-						</td>
-					</tr>
-				))}
-			</tbody>
-		</table>
+		<div className={className}>
+			<h4 id="assignmentTableHeader">Tasks</h4>
+			<Table
+				aria-labelledby="assignmentTableHeader"
+				hideHeader
+				removeWrapper
+				classNames={{
+					td: "text-base",
+				}}
+				shadow="none"
+				title="Tasks"
+			>
+				<TableHeader>
+					<TableColumn>Task</TableColumn>
+					<TableColumn>Volunteer</TableColumn>
+				</TableHeader>
+				<TableBody items={tasks}>
+					{(task) => (
+						<TableRow
+							key={task.taskID}
+							className={classNames({
+								"text-danger":
+									task.userName === highlightUser ||
+									task.taskName === highlightTask,
+							})}
+						>
+							<TableCell className="font-bold">{task.taskName}</TableCell>
+							<TableCell>
+								{task.userName ?? (
+									<span className="italic text-highlight">missing</span>
+								)}
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		</div>
 	);
 }

client/src/components/Event/AvailabilitySelector.tsx

@@ -49,10 +49,12 @@ export default function AvailabilitySelector({
 	return (
 		<Select
 			items={availabilities.items}
-			label="Availability"
+			label={<h4>Availability</h4>}
 			variant="bordered"
 			className={className}
-			isMultiline
+			classNames={{ label: "text-base", trigger: "py-4" }}
+			labelPlacement="outside"
+			placeholder="Set availability"
 			renderValue={(availability) => (
 				<div>
 					{availability.map((a) =>

client/src/components/Event/Event.tsx

@@ -2,7 +2,7 @@
 
 import LocalDate from "../LocalDate";
 import { BaseEvent } from "@/Zustand";
-import { Card, CardBody, CardHeader, Divider, Textarea } from "@heroui/react";
+import { Card, CardBody, CardFooter, CardHeader, Divider } from "@heroui/react";
 import React from "react";
 
 export default function Event({
@@ -10,7 +10,7 @@ export default function Event({
 	children,
 }: {
 	event: BaseEvent;
-	children?: React.ReactNode;
+	children?: React.ReactNode | [React.ReactNode, React.ReactNode];
 }) {
 	return (
 		<Card
@@ -34,15 +34,21 @@ export default function Event({
 			</CardHeader>
 			<Divider />
 			<CardBody>
-				<Textarea
-					isReadOnly
-					label="Description"
-					defaultValue={event.description}
-					variant="bordered"
-				/>
+				{event.description != "" ? (
+					<div>
+						<h4>Description</h4>
+						<div className="ms-2 mt-2">{event.description}</div>
+					</div>
+				) : null}
 
-				{children}
+				{Array.isArray(children) ? children[0] : children}
 			</CardBody>
+			{Array.isArray(children) ? (
+				<>
+					<Divider />
+					<CardFooter>{children[1]}</CardFooter>
+				</>
+			) : null}
 		</Card>
 	);
 }