chore: various styling issues

Author: didinele

apps/website/src/app/dashboard/[id]/ama/amas/[amaId]/_components/AMADetails.tsx

@@ -22,7 +22,6 @@ function ChannelIcon({ channel }: { readonly channel: GuildChannelInfo | Possibl
 export function AMADetails() {
 	const params = useParams<{ amaId: string; id: string }>();
 	const router = useRouter();
-	const [isEndingAMA, setIsEndingAMA] = useState(false);
 	const [showEndConfirm, setShowEndConfirm] = useState(false);
 
 	const { data: ama, isLoading } = client.guilds.ama.useAMA(params.id, params.amaId);
@@ -52,13 +51,11 @@ export function AMADetails() {
 		}
 
 		try {
-			setIsEndingAMA(true);
 			await updateAMA.mutateAsync({ ended: true });
 			router.push(`/dashboard/${params.id}/ama/amas`);
 		} catch (error) {
 			console.error('Failed to end AMA:', error);
 		} finally {
-			setIsEndingAMA(false);
 			setShowEndConfirm(false);
 		}
 	};
@@ -177,7 +174,7 @@ export function AMADetails() {
 					{!ama.promptMessageExists && !ama.ended && (
 						<div className="pt-2">
 							<Button
-								className="px-6 py-3 bg-misc-accent text-white rounded-md hover:bg-misc-accent/90 transition-colors disabled:opacity-50"
+								className="bg-misc-accent text-white rounded-md hover:bg-misc-accent/90 transition-colors disabled:opacity-50"
 								onPress={handleRepostPrompt}
 								type="button"
 							>
@@ -202,15 +199,14 @@ export function AMADetails() {
 							</p>
 							<div className="flex gap-3">
 								<Button
-									className="px-6 py-3 bg-misc-danger text-white rounded-md hover:bg-misc-danger/90 transition-colors disabled:opacity-50"
-									isDisabled={isEndingAMA}
+									className="px-3 py-2.5 bg-misc-danger text-white rounded-md hover:bg-misc-danger/90 transition-colors disabled:opacity-50"
 									onPress={handleEndAMA}
 									type="button"
 								>
-									{isEndingAMA ? 'Ending...' : 'Yes, End AMA'}
+									Yes, End AMA
 								</Button>
 								<Button
-									className="px-6 py-3 bg-on-tertiary dark:bg-on-tertiary-dark text-primary dark:text-primary-dark rounded-md hover:bg-on-secondary dark:hover:bg-on-secondary-dark transition-colors"
+									className="px-3 py-2.5 bg-on-tertiary dark:bg-on-tertiary-dark text-primary dark:text-primary-dark rounded-md hover:bg-on-secondary dark:hover:bg-on-secondary-dark transition-colors"
 									onPress={() => setShowEndConfirm(false)}
 									type="button"
 								>
@@ -224,7 +220,7 @@ export function AMADetails() {
 								Ending an AMA will prevent new questions from being submitted. This action cannot be undone.
 							</p>
 							<Button
-								className="px-6 py-3 bg-misc-danger text-white rounded-md hover:bg-misc-danger/90 transition-colors"
+								className="px-3 py-2.5 bg-misc-danger text-white rounded-md hover:bg-misc-danger/90 transition-colors"
 								onPress={handleEndAMA}
 								type="button"
 							>

apps/website/src/app/dashboard/[id]/ama/amas/new/_components/CreateAMAForm.tsx

@@ -312,14 +312,14 @@ export function CreateAMAForm() {
 
 			<div className="flex gap-4">
 				<Button
-					className="px-6 py-3 bg-misc-accent text-white rounded-md hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+					className="px-3 py-2.5 bg-misc-accent text-white rounded-md hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
 					isDisabled={createAMA.isPending}
 					type="submit"
 				>
 					{createAMA.isPending ? 'Creating...' : 'Create AMA Session'}
 				</Button>
 				<Button
-					className="px-6 py-3 bg-on-tertiary dark:bg-on-tertiary-dark text-primary dark:text-primary-dark rounded-md hover:bg-on-secondary dark:hover:bg-on-secondary-dark transition-colors"
+					className="px-3 py-2.5 bg-on-tertiary dark:bg-on-tertiary-dark text-primary dark:text-primary-dark rounded-md hover:bg-on-secondary dark:hover:bg-on-secondary-dark transition-colors"
 					onPress={() => router.back()}
 					type="button"
 				>

apps/website/src/app/dashboard/_components/DashboardCrumbs.tsx

@@ -70,17 +70,10 @@ const SEGMENT_OPTIONS: SegmentOptionsEntry[] = [
 				return null;
 			}
 
-			// Build options with "New" first, then existing AMAs
-			const options: BreadcrumbOption[] = [
-				{
-					label: 'New AMA',
-					href: `/dashboard/${context.guildId}/ama/amas/new`,
-				},
-				...data.amaSessions.map((s) => ({
-					label: s.title,
-					href: `/dashboard/${context.guildId}/ama/amas/${s.id}`,
-				})),
-			];
+			const options: BreadcrumbOption[] = data.amaSessions.map((s) => ({
+				label: s.title,
+				href: `/dashboard/${context.guildId}/ama/amas/${s.id}`,
+			}));
 
 			return {
 				options,

apps/website/src/components/footer/Footer.tsx

@@ -4,7 +4,7 @@ import { SvgGitHub } from '@/components/icons/SvgGitHub';
 
 export function Footer() {
 	return (
-		<footer className="g-4 flex flex-col items-start justify-between gap-3 border-t-2 border-solid border-t-on-secondary px-6 py-3 font-medium sm:flex-row sm:items-center sm:gap-4 dark:border-t-on-secondary-dark">
+		<footer className="g-4 flex flex-col items-start justify-between gap-3 border-t-2 border-solid border-t-on-secondary px-3 py-2.5 font-medium sm:flex-row sm:items-center sm:gap-4 dark:border-t-on-secondary-dark">
 			<span className="whitespace-nowrap text-secondary dark:text-secondary-dark">© ChatSift, 2022 - Present</span>
 			<div className="flex w-full flex-row flex-wrap items-center justify-between gap-3 sm:w-auto sm:gap-4">
 				<div className="flex flex-row items-center gap-4">