better looking SettingsSection

app/settings/components/account/danger-zone.tsx

@@ -2,10 +2,10 @@ import { useRef, useState } from "react";
 import { useMutation } from "blitz";
 import clsx from "clsx";
 
-import Button from "./button";
-import SettingsSection from "./settings-section";
-import Modal, { ModalTitle } from "./modal";
-import deleteUser from "../mutations/delete-user";
+import Button from "../button";
+import SettingsSection from "../settings-section";
+import Modal, { ModalTitle } from "../modal";
+import deleteUser from "../../mutations/delete-user";
 
 export default function DangerZone() {
 	const deleteUserMutation = useMutation(deleteUser)[0];
@@ -26,9 +26,8 @@ export default function DangerZone() {
 	};
 
 	return (
-		<SettingsSection title="Danger Zone" description="Highway to the Danger Zone 𝅘𝅥𝅮">
-			<div className="shadow border border-red-300 sm:rounded-md sm:overflow-hidden">
-				<div className="flex justify-between items-center flex-row px-4 py-5 space-x-2 bg-white sm:p-6">
+		<SettingsSection className="border border-red-300">
+			<div className="flex justify-between items-center flex-row space-x-2">
 				<p>
 					Once you delete your account, all of its data will be permanently deleted and any ongoing
 					subscription will be cancelled.
@@ -40,7 +39,6 @@ export default function DangerZone() {
 					</Button>
 				</span>
 			</div>
-			</div>
 
 			<Modal initialFocus={modalCancelButtonRef} isOpen={isConfirmationModalOpen} onClose={closeModal}>
 				<div className="md:flex md:items-start">

app/settings/components/account/profile-informations.tsx

@@ -0,0 +1,115 @@
+import type { FunctionComponent } from "react";
+import { useEffect } from "react";
+import { useMutation } from "blitz";
+import { useForm } from "react-hook-form";
+
+import updateUser from "../../mutations/update-user";
+import Alert from "../../../core/components/alert";
+import Button from "../button";
+import SettingsSection from "../settings-section";
+import useCurrentUser from "../../../core/hooks/use-current-user";
+
+import appLogger from "../../../../integrations/logger";
+
+type Form = {
+	fullName: string;
+	email: string;
+};
+
+const logger = appLogger.child({ module: "profile-settings" });
+
+const ProfileInformations: FunctionComponent = () => {
+	const { user } = useCurrentUser();
+	const [updateUserMutation, { error, isError, isSuccess }] = useMutation(updateUser);
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		formState: { isSubmitting },
+	} = useForm<Form>();
+
+	useEffect(() => {
+		setValue("fullName", user?.fullName ?? "");
+		setValue("email", user?.email ?? "");
+	}, [setValue, user]);
+
+	const onSubmit = handleSubmit(async ({ fullName, email }) => {
+		if (isSubmitting) {
+			return;
+		}
+
+		await updateUserMutation({ email, fullName });
+	});
+	const errorMessage = parseErrorMessage(error as Error | null);
+
+	return (
+		<form onSubmit={onSubmit}>
+			<SettingsSection
+				footer={
+					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+						<Button variant="default" type="submit" isDisabled={isSubmitting}>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					</div>
+				}
+			>
+				{isError ? (
+					<div className="mb-8">
+						<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
+					</div>
+				) : null}
+
+				{isSuccess ? (
+					<div className="mb-8">
+						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
+					</div>
+				) : null}
+				<div className="col-span-3 sm:col-span-2">
+					<label htmlFor="fullName" className="block text-sm font-medium leading-5 text-gray-700">
+						Full name
+					</label>
+					<div className="mt-1 rounded-md shadow-sm">
+						<input
+							id="fullName"
+							type="text"
+							tabIndex={1}
+							className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+							{...register("fullName")}
+							required
+						/>
+					</div>
+				</div>
+
+				<div>
+					<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
+						Email address
+					</label>
+					<div className="mt-1 rounded-md shadow-sm">
+						<input
+							id="email"
+							type="email"
+							tabIndex={2}
+							className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+							{...register("email")}
+							required
+						/>
+					</div>
+				</div>
+			</SettingsSection>
+		</form>
+	);
+};
+
+export default ProfileInformations;
+
+function parseErrorMessage(error: Error | null): string {
+	if (!error) {
+		return "";
+	}
+
+	if (error.name === "ZodError") {
+		return JSON.parse(error.message)[0].message;
+	}
+
+	return error.message;
+}

app/settings/components/account/update-password.tsx

@@ -0,0 +1,112 @@
+import type { FunctionComponent } from "react";
+import { useMutation } from "blitz";
+import { useForm } from "react-hook-form";
+
+import Alert from "../../../core/components/alert";
+import Button from "../button";
+import SettingsSection from "../settings-section";
+
+import appLogger from "../../../../integrations/logger";
+import changePassword from "../../mutations/change-password";
+
+const logger = appLogger.child({ module: "update-password" });
+
+type Form = {
+	currentPassword: string;
+	newPassword: string;
+};
+
+const UpdatePassword: FunctionComponent = () => {
+	const [changePasswordMutation, { error, isError, isSuccess }] = useMutation(changePassword);
+	const {
+		register,
+		handleSubmit,
+		formState: { isSubmitting },
+	} = useForm<Form>();
+
+	const onSubmit = handleSubmit(async ({ currentPassword, newPassword }) => {
+		if (isSubmitting) {
+			return;
+		}
+
+		await changePasswordMutation({ currentPassword, newPassword });
+	});
+	const errorMessage = parseErrorMessage(error as Error | null);
+
+	return (
+		<form onSubmit={onSubmit}>
+			<SettingsSection
+				footer={
+					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+						<Button variant="default" type="submit" isDisabled={isSubmitting}>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					</div>
+				}
+			>
+				{isError ? (
+					<div className="mb-8">
+						<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
+					</div>
+				) : null}
+
+				{isSuccess ? (
+					<div className="mb-8">
+						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
+					</div>
+				) : null}
+				<div>
+					<label
+						htmlFor="currentPassword"
+						className="flex justify-between text-sm font-medium leading-5 text-gray-700"
+					>
+						<div>Current password</div>
+					</label>
+					<div className="mt-1 rounded-md shadow-sm">
+						<input
+							id="currentPassword"
+							type="password"
+							tabIndex={3}
+							className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+							{...register("currentPassword")}
+							required
+						/>
+					</div>
+				</div>
+
+				<div>
+					<label
+						htmlFor="newPassword"
+						className="flex justify-between text-sm font-medium leading-5 text-gray-700"
+					>
+						<div>New password</div>
+					</label>
+					<div className="mt-1 rounded-md shadow-sm">
+						<input
+							id="newPassword"
+							type="password"
+							tabIndex={4}
+							className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+							{...register("newPassword")}
+							required
+						/>
+					</div>
+				</div>
+			</SettingsSection>
+		</form>
+	);
+};
+
+export default UpdatePassword;
+
+function parseErrorMessage(error: Error | null): string {
+	if (!error) {
+		return "";
+	}
+
+	if (error.name === "ZodError") {
+		return JSON.parse(error.message)[0].message;
+	}
+
+	return error.message;
+}

app/settings/components/divider.tsx

@@ -1,9 +0,0 @@
-export default function Divider() {
-	return (
-		<div className="relative">
-			<div className="absolute inset-0 flex items-center">
-				<div className="w-full border-t border-gray-300" />
-			</div>
-		</div>
-	);
-}

app/settings/components/profile-informations.tsx

@@ -1,114 +0,0 @@
-import type { FunctionComponent } from "react";
-import { useEffect, useState } from "react";
-import { useMutation } from "blitz";
-import { useForm } from "react-hook-form";
-
-import updateUser from "../mutations/update-user";
-import Alert from "../../core/components/alert";
-import Button from "./button";
-import SettingsSection from "./settings-section";
-import useCurrentUser from "../../core/hooks/use-current-user";
-
-import appLogger from "../../../integrations/logger";
-
-type Form = {
-	fullName: string;
-	email: string;
-};
-
-const logger = appLogger.child({ module: "profile-settings" });
-
-const ProfileInformations: FunctionComponent = () => {
-	const { user } = useCurrentUser();
-	const updateUserMutation = useMutation(updateUser)[0];
-	const {
-		register,
-		handleSubmit,
-		setValue,
-		formState: { isSubmitting, isSubmitSuccessful },
-	} = useForm<Form>();
-	const [errorMessage, setErrorMessage] = useState("");
-
-	useEffect(() => {
-		setValue("fullName", user?.fullName ?? "");
-		setValue("email", user?.email ?? "");
-	}, [setValue, user]);
-
-	const onSubmit = handleSubmit(async ({ fullName, email }) => {
-		if (isSubmitting) {
-			return;
-		}
-
-		try {
-			await updateUserMutation({ email, fullName });
-		} catch (error: any) {
-			logger.error(error.response, "error updating user infos");
-			setErrorMessage(error.response.data.errorMessage);
-		}
-	});
-
-	return (
-		<SettingsSection
-			title="Profile Information"
-			description="Update your account's profile information and email address."
-		>
-			<form onSubmit={onSubmit}>
-				{errorMessage ? (
-					<div className="mb-8">
-						<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
-					</div>
-				) : null}
-
-				{isSubmitSuccessful ? (
-					<div className="mb-8">
-						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
-					</div>
-				) : null}
-
-				<div className="shadow sm:rounded-md sm:overflow-hidden">
-					<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
-						<div className="col-span-3 sm:col-span-2">
-							<label htmlFor="fullName" className="block text-sm font-medium leading-5 text-gray-700">
-								Full name
-							</label>
-							<div className="mt-1 rounded-md shadow-sm">
-								<input
-									id="fullName"
-									type="text"
-									tabIndex={1}
-									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
-									{...register("fullName")}
-									required
-								/>
-							</div>
-						</div>
-
-						<div>
-							<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
-								Email address
-							</label>
-							<div className="mt-1 rounded-md shadow-sm">
-								<input
-									id="email"
-									type="email"
-									tabIndex={2}
-									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
-									{...register("email")}
-									required
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
-						<Button variant="default" type="submit" isDisabled={isSubmitting}>
-							{isSubmitting ? "Saving..." : "Save"}
-						</Button>
-					</div>
-				</div>
-			</form>
-		</SettingsSection>
-	);
-};
-
-export default ProfileInformations;

app/settings/components/settings-section.tsx

@@ -1,18 +1,16 @@
 import type { FunctionComponent, ReactNode } from "react";
+import clsx from "clsx";
 
 type Props = {
-	title: string;
-	description?: ReactNode;
+	className?: string;
+	footer?: ReactNode;
 };
 
-const SettingsSection: FunctionComponent<Props> = ({ children, title, description }) => (
-	<div className="px-4 sm:px-6 lg:px-0 lg:grid lg:grid-cols-4 lg:gap-6">
-		<div className="lg:col-span-1">
-			<h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
-			{description ? <p className="mt-1 text-sm text-gray-600">{description}</p> : null}
-		</div>
-		<div className="mt-5 lg:mt-0 lg:col-span-3">{children}</div>
-	</div>
+const SettingsSection: FunctionComponent<Props> = ({ children, footer, className }) => (
+	<section className={clsx(className, "shadow sm:rounded-md sm:overflow-hidden")}>
+		<div className="bg-white space-y-6 py-6 px-4 sm:p-6">{children}</div>
+		{footer ?? null}
+	</section>
 );
 
 export default SettingsSection;

app/settings/components/update-password.tsx

@@ -1,114 +0,0 @@
-import type { FunctionComponent } from "react";
-import { useState } from "react";
-import { useMutation } from "blitz";
-import { useForm } from "react-hook-form";
-
-import Alert from "../../core/components/alert";
-import Button from "./button";
-import SettingsSection from "./settings-section";
-
-import appLogger from "../../../integrations/logger";
-import changePassword from "../mutations/change-password";
-
-const logger = appLogger.child({ module: "update-password" });
-
-type Form = {
-	currentPassword: string;
-	newPassword: string;
-};
-
-const UpdatePassword: FunctionComponent = () => {
-	const changePasswordMutation = useMutation(changePassword)[0];
-	const {
-		register,
-		handleSubmit,
-		formState: { isSubmitting, isSubmitSuccessful },
-	} = useForm<Form>();
-	const [errorMessage, setErrorMessage] = useState("");
-
-	const onSubmit = handleSubmit(async ({ currentPassword, newPassword }) => {
-		if (isSubmitting) {
-			return;
-		}
-
-		setErrorMessage("");
-
-		try {
-			await changePasswordMutation({ currentPassword, newPassword });
-		} catch (error: any) {
-			logger.error(error, "error updating user infos");
-			setErrorMessage(error.message);
-		}
-	});
-
-	return (
-		<SettingsSection
-			title="Update Password"
-			description="Make sure you are using a long, random password to stay secure."
-		>
-			<form onSubmit={onSubmit}>
-				{errorMessage ? (
-					<div className="mb-8">
-						<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
-					</div>
-				) : null}
-
-				{!isSubmitting && isSubmitSuccessful && !errorMessage ? (
-					<div className="mb-8">
-						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
-					</div>
-				) : null}
-
-				<div className="shadow sm:rounded-md sm:overflow-hidden">
-					<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
-						<div>
-							<label
-								htmlFor="currentPassword"
-								className="flex justify-between text-sm font-medium leading-5 text-gray-700"
-							>
-								<div>Current password</div>
-							</label>
-							<div className="mt-1 rounded-md shadow-sm">
-								<input
-									id="currentPassword"
-									type="password"
-									tabIndex={3}
-									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
-									{...register("currentPassword")}
-									required
-								/>
-							</div>
-						</div>
-
-						<div>
-							<label
-								htmlFor="newPassword"
-								className="flex justify-between text-sm font-medium leading-5 text-gray-700"
-							>
-								<div>New password</div>
-							</label>
-							<div className="mt-1 rounded-md shadow-sm">
-								<input
-									id="newPassword"
-									type="password"
-									tabIndex={4}
-									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
-									{...register("newPassword")}
-									required
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
-						<Button variant="default" type="submit" isDisabled={isSubmitting}>
-							{isSubmitting ? "Saving..." : "Save"}
-						</Button>
-					</div>
-				</div>
-			</form>
-		</SettingsSection>
-	);
-};
-
-export default UpdatePassword;

app/settings/pages/settings/billing.tsx

@@ -1,5 +1,7 @@
 import type { BlitzPage } from "blitz";
 import { GetServerSideProps, Link, Routes } from "blitz";
+import * as Panelbear from "@panelbear/panelbear-js";
+import clsx from "clsx";
 
 import useSubscription from "../../hooks/use-subscription";
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
@@ -7,10 +9,7 @@ import SettingsLayout from "../../components/settings-layout";
 import appLogger from "../../../../integrations/logger";
 import PaddleLink from "../../components/paddle-link";
 import SettingsSection from "../../components/settings-section";
-import Divider from "../../components/divider";
 import { HiCheck } from "react-icons/hi";
-import * as Panelbear from "@panelbear/panelbear-js";
-import clsx from "clsx";
 
 const logger = appLogger.child({ page: "/account/settings/billing" });
 
@@ -76,16 +75,12 @@ const Billing: BlitzPage = () => {
 
 	if (!subscription) {
 		return (
-			<section aria-labelledby="subscribe-heading">
-				<div className="shadow sm:rounded-md sm:overflow-hidden">
-					<div className="bg-white py-6 px-4 sm:p-6">
+			<SettingsSection>
 				<div>
-							<h2 id="subscribe-heading" className="text-lg leading-6 font-medium text-gray-900">
-								Subscribe
-							</h2>
+					<h2 className="text-lg leading-6 font-medium text-gray-900">Subscribe</h2>
 					<p className="mt-1 text-sm text-gray-500">
-								Update your billing information. Please note that updating your location could affect
-								your tax rates.
+						Update your billing information. Please note that updating your location could affect your tax
+						rates.
 					</p>
 				</div>
 
@@ -96,18 +91,14 @@ const Billing: BlitzPage = () => {
 							className="relative p-4 mb-4 bg-white border border-gray-200 rounded-xl shadow-sm flex flex-grow w-1/3 flex-col"
 						>
 							<div className="flex-1">
-										<h3 className="text-xl font-mackinac font-semibold text-gray-900">
-											{tier.title}
-										</h3>
+								<h3 className="text-xl font-mackinac font-semibold text-gray-900">{tier.title}</h3>
 								{tier.yearly ? (
 									<p className="absolute top-0 py-1.5 px-4 bg-primary-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
 										Get 2 months free!
 									</p>
 								) : null}
 								<p className="mt-4 flex items-baseline text-gray-900">
-											<span className="text-2xl font-extrabold tracking-tight">
-												{tier.price}€
-											</span>
+									<span className="text-2xl font-extrabold tracking-tight">{tier.price}€</span>
 									<span className="ml-1 text-lg font-semibold">{tier.frequency}</span>
 								</p>
 								{tier.yearly ? (
@@ -153,34 +144,22 @@ const Billing: BlitzPage = () => {
 						</div>
 					))}
 				</div>
-					</div>
-				</div>
-			</section>
+			</SettingsSection>
 		);
 	}
 
 	return (
 		<>
-			<SettingsSection title="Payment method">
+			<SettingsSection>
 				<PaddleLink
 					onClick={() => updatePaymentMethod({ updateUrl: subscription.updateUrl })}
 					text="Update payment method on Paddle"
 				/>
 			</SettingsSection>
 
-			<div className="hidden lg:block">
-				<Divider />
-			</div>
+			<SettingsSection>{/*<BillingPlans activePlanId={subscription.paddlePlanId} />*/}</SettingsSection>
 
-			<SettingsSection title="Plan">
-				{/*<BillingPlans activePlanId={subscription.paddlePlanId} />*/}
-			</SettingsSection>
-
-			<div className="hidden lg:block">
-				<Divider />
-			</div>
-
-			<SettingsSection title="Cancel subscription">
+			<SettingsSection>
 				<PaddleLink
 					onClick={() => cancelSubscription({ cancelUrl: subscription.cancelUrl })}
 					text="Cancel subscription on Paddle"

app/settings/pages/settings/index.tsx

@@ -2,10 +2,9 @@ import type { BlitzPage } from "blitz";
 import { Routes } from "blitz";
 
 import SettingsLayout from "../../components/settings-layout";
-import ProfileInformations from "../../components/profile-informations";
-import Divider from "../../components/divider";
-import UpdatePassword from "../../components/update-password";
-import DangerZone from "../../components/danger-zone";
+import ProfileInformations from "../../components/account/profile-informations";
+import UpdatePassword from "../../components/account/update-password";
+import DangerZone from "../../components/account/danger-zone";
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
 
 const Account: BlitzPage = () => {
@@ -15,16 +14,8 @@ const Account: BlitzPage = () => {
 		<div className="flex flex-col space-y-6">
 			<ProfileInformations />
 
-			<div className="hidden lg:block">
-				<Divider />
-			</div>
-
 			<UpdatePassword />
 
-			<div className="hidden lg:block">
-				<Divider />
-			</div>
-
 			<DangerZone />
 		</div>
 	);