Add to calendar

app/account/account.module.css

@@ -125,7 +125,10 @@
 }
 
 .emptyState a {
+	align-items: center;
+	display: inline-flex;
 	font-weight: 800;
+	gap: 0.35rem;
 }
 
 .submissionList {
@@ -177,9 +180,9 @@
 	padding: 0.55rem 0.7rem;
 }
 
-.recurrenceSummary span {
+.recurrenceIcon {
 	color: var(--color-river-deep);
-	font-size: 1.05rem;
+	flex: 0 0 auto;
 }
 
 .cardHeading span {

app/account/page.tsx

@@ -1,3 +1,4 @@
+import { ArrowRight, Repeat2 } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -140,7 +141,10 @@ async function AccountSubmissions({ userId }: { userId: string }) {
 				<div className={style.emptyState}>
 					<h3>No events here yet</h3>
 					<p>Events you submit or are invited to manage will appear here.</p>
-					<Link href="/events/submit">Submit an event →</Link>
+					<Link href="/events/submit">
+						Submit an event
+						<ArrowRight aria-hidden="true" size={16} strokeWidth={2.5} />
+					</Link>
 				</div>
 			) : (
 				<ul className={style.submissionList} role="list">
@@ -185,7 +189,13 @@ async function AccountSubmissions({ userId }: { userId: string }) {
 											{dateFormatter.format(submission.startsAt)}
 										</p>
 										<p className={style.recurrenceSummary}>
-											<span aria-hidden="true">↻</span> {recurrenceSummary}
+											<Repeat2
+												aria-hidden="true"
+												className={style.recurrenceIcon}
+												size={17}
+												strokeWidth={2.5}
+											/>
+											{recurrenceSummary}
 										</p>
 									</div>
 									<span data-status={displayStatus}>

app/admin/events/page.tsx

@@ -1,3 +1,4 @@
+import { ExternalLink } from "lucide-react";
 import type { Metadata } from "next";
 import { Suspense } from "react";
 import type { RecurrenceRule } from "@/app/events/types";
@@ -199,7 +200,12 @@ async function AdminEventQueues() {
 												rel="noopener noreferrer"
 												target="_blank"
 											>
-												Open event link <span aria-hidden="true">↗</span>
+												Open event link
+												<ExternalLink
+													aria-hidden="true"
+													size={16}
+													strokeWidth={2.5}
+												/>
 											</a>
 										)}
 
@@ -407,8 +413,12 @@ async function AdminEventQueues() {
 												rel="noopener noreferrer"
 												target="_blank"
 											>
-												Open proposed event link{" "}
-												<span aria-hidden="true">↗</span>
+												Open proposed event link
+												<ExternalLink
+													aria-hidden="true"
+													size={16}
+													strokeWidth={2.5}
+												/>
 											</a>
 										)}
 

app/auth/auth-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ArrowRight } from "lucide-react";
 import { type FormEvent, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { authClient } from "@/lib/auth-client";
@@ -407,7 +408,7 @@ export function AuthForm({ emailDeliveryEnabled = true }: AuthFormProps) {
 							: isCreatingAccount
 								? "Create account"
 								: "Sign in"}
-					<span aria-hidden="true">→</span>
+					<ArrowRight aria-hidden="true" size={18} />
 				</button>
 
 				{isResetRequest && (

app/auth/reset-password/reset-password-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { type FormEvent, useEffect, useRef, useState } from "react";
 import { authClient } from "@/lib/auth-client";
@@ -90,7 +91,7 @@ function UnavailableResetLink({
 			</div>
 			<div className={style.form}>
 				<Link className={style.submitButton} href="/auth">
-					Back to sign in <span aria-hidden="true">→</span>
+					Back to sign in <ArrowRight aria-hidden="true" size={18} />
 				</Link>
 			</div>
 		</div>
@@ -210,7 +211,7 @@ export function ResetPasswordForm({
 				</div>
 				<div className={style.form}>
 					<Link className={style.submitButton} href="/auth">
-						Back to sign in <span aria-hidden="true">→</span>
+						Back to sign in <ArrowRight aria-hidden="true" size={18} />
 					</Link>
 				</div>
 			</div>
@@ -286,7 +287,7 @@ export function ResetPasswordForm({
 					type="submit"
 				>
 					{isPending ? "Resetting password…" : "Reset password"}
-					<span aria-hidden="true">→</span>
+					<ArrowRight aria-hidden="true" size={18} />
 				</button>
 
 				<div className={style.status}>

app/auth/verify-email/verification-result.tsx

@@ -1,3 +1,4 @@
+import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import style from "../auth-form.module.css";
@@ -66,7 +67,7 @@ export async function VerifyEmailResult({
 			</div>
 			<div className={style.form}>
 				<Link className={style.submitButton} href="/auth">
-					Back to sign in <span aria-hidden="true">→</span>
+					Back to sign in <ArrowRight aria-hidden="true" size={18} />
 				</Link>
 			</div>
 		</div>

app/code-of-conduct/page.tsx

@@ -1,3 +1,4 @@
+import { ArrowDown } from "lucide-react";
 import type { Metadata } from "next";
 import { BridgeArt } from "../../components/bridge-art";
 import style from "./code-of-conduct.module.css";
@@ -65,7 +66,7 @@ export default function CodeOfConductPage() {
 							</li>
 						</ul>
 						<a className={style.readPolicyLink} href="#full-policy">
-							Read the full policy <span aria-hidden="true">↓</span>
+							Read the full policy <ArrowDown aria-hidden="true" size={18} />
 						</a>
 					</div>
 				</div>

app/events/[eventId]/edit/edit-event.module.css

@@ -27,8 +27,10 @@
 }
 
 .backLink {
-	display: inline-block;
+	align-items: center;
+	display: inline-flex;
 	font-weight: 800;
+	gap: 0.5rem;
 	margin-top: 1.5rem;
 }
 

app/events/[eventId]/edit/page.tsx

@@ -1,3 +1,4 @@
+import { ArrowLeft } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -284,7 +285,8 @@ async function EditEventContent({ params, searchParams }: EditEventPageProps) {
 					Approving one occurrence changes only that selected session.
 				</p>
 				<Link className={editStyle.backLink} href="/account">
-					← Back to your account
+					<ArrowLeft aria-hidden="true" size={16} />
+					Back to your account
 				</Link>
 			</aside>
 
@@ -403,7 +405,8 @@ function EditEventContentFallback() {
 					Your event details and editing options are loading now.
 				</p>
 				<Link className={editStyle.backLink} href="/account">
-					← Back to your account
+					<ArrowLeft aria-hidden="true" size={16} />
+					Back to your account
 				</Link>
 			</aside>
 

app/events/[eventId]/event-detail.module.css

@@ -339,6 +339,14 @@
 	font-size: 0.94rem;
 }
 
+.calendarAction {
+	margin-top: 1.5rem;
+}
+
+.calendarAction + .primaryLink {
+	margin-top: 0.75rem;
+}
+
 .detailsList dd > span,
 .detailsList dd > address,
 .scheduleFacts dd > span,