add captions to act as ui helpers

src/components/Event/EventCarpoolCreateButton.tsx

@@ -55,7 +55,7 @@ export default function EventCarpoolCreateButton() {
 				</span>
 			) : (
 				<>
-					<span>Available to drive?</span>
+					<span style={{ fontSize: '0.875em' }}>Available to drive?</span>
 					<UIButton
 						onClick={createCarpoolCallback}
 						style={{ backgroundColor: lightgrey }}

src/components/Event/EventCarpools.tsx

@@ -141,6 +141,10 @@ export default function Carpools() {
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<h3 style={{ marginBottom: '0' }}>Carpools</h3>
+			<span style={{ fontSize: '0.875rem' }}>
+				Click <EmojiPeopleIcon style={{ fontSize: '0.875rem' }} /> to request to
+				join a carpool.
+			</span>
 			{event.carpools.map((carpool) => (
 				<CarpoolRow
 					carpool={carpool}

src/components/Event/EventInterestForm.tsx

@@ -65,6 +65,7 @@ export default function EventInterestForm() {
 
 	return (
 		<>
+			<span style={{ fontSize: '0.875em' }}>Click to toggle your interest</span>
 			<UIButton
 				onClick={
 					interested
@@ -84,6 +85,9 @@ export default function EventInterestForm() {
 			</UIButton>
 			{interested && (
 				<>
+					<span style={{ fontSize: '0.875em' }}>
+						Click to toggle your driving availability
+					</span>
 					<UIButton
 						onClick={() => {
 							canDriveRef.current = !canDriveRef.current;

src/components/Event/EventSignups.tsx

@@ -83,6 +83,7 @@ export default function EventSignups() {
 	const { event } = useContext(EventContext);
 	const signups = event.signups;
 	const carpools = event.carpools;
+	const me = useMe();
 
 	const signupsWithoutCarpool = useMemo(() => {
 		// A list of users not in any carpool
@@ -94,10 +95,24 @@ export default function EventSignups() {
 			.map((id) => signups[id]);
 	}, [signups, carpools]);
 
+	const hasCarpool = useMemo(
+		() =>
+			event.carpools.some((carpool) =>
+				carpool.members.some((member) => member.id === me?.id)
+			),
+		[event.carpools, me?.id]
+	);
+
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<h3 style={{ marginBlockEnd: '0' }}>People without a carpool</h3>
 			<EventCarpoolCreateButton />
+			{!hasCarpool && (
+				<span style={{ fontSize: '0.875em' }}>
+					Click <PersonAddIcon style={{ fontSize: '0.875rem' }} /> to add
+					someone to the temporary invite list
+				</span>
+			)}
 			{signupsWithoutCarpool.map((signup) => (
 				<EventSignup key={signup.user.id} signup={signup} />
 			))}

src/components/Groups/GroupList.tsx

@@ -1,30 +1,39 @@
 import { IGroup } from '../types';
+import UILink from '../UI/UILink';
 import UISecondaryBox from '../UI/UISecondaryBox';
 
 function GroupListItem({ group }: { group: IGroup }) {
 	return (
-		<UISecondaryBox>
+		<div style={{ display: 'flex', alignItems: 'center' }}>
-			<h2
+			<span
 				style={{
-					textAlign: 'center',
+					fontSize: '1.5rem',
-					cursor: 'pointer',
+					fontWeight: 'bold',
-				}}
+					display: 'block',
-				onClick={() => {
+					marginTop: '1rem',
-					window.location.href = `/groups/${group.id}`;
+					marginBottom: '1rem',
+					marginRight: '2rem',
 				}}
 			>
 				{group.name}
-			</h2>
+			</span>
-		</UISecondaryBox>
+			<UILink href={`/groups/${group.id}`}>View group</UILink>
+		</div>
 	);
 }
 
 export default function GroupList({ groups }: { groups: IGroup[] }) {
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+		<UISecondaryBox
+			style={{
+				width: '100%',
+				boxSizing: 'border-box',
+				alignItems: 'center',
+			}}
+		>
 			{groups.map((group) => (
 				<GroupListItem group={group} key={group.id} />
 			))}
-		</div>
+		</UISecondaryBox>
 	);
 }

src/components/UI/UIButton.tsx

@@ -5,7 +5,8 @@ const baseStyle: CSSProperties = {
 	borderRadius: '0.5em',
 	textTransform: 'uppercase',
 	fontWeight: 500,
-	margin: '0.5em',
+	marginTop: '0.5rem',
+	marginBottom: '0.5rem',
 	cursor: 'pointer',
 	userSelect: 'none',
 };