format

Closes #865

Author: kentcdodds

app/components/ui/input-otp.tsx

@@ -40,7 +40,7 @@ const InputOTPSlot = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm',
 				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
 				className,
 			)}

app/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
+					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
 					className,
 				)}
 				ref={ref}

app/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
+					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
 					className,
 				)}
 				ref={ref}

app/routes/_auth+/onboarding.tsx

@@ -228,7 +228,7 @@ export default function OnboardingRoute() {
 					<div className="flex items-center justify-between gap-6">
 						<StatusButton
 							className="w-full"
-							status={isPending ? 'pending' : form.status ?? 'idle'}
+							status={isPending ? 'pending' : (form.status ?? 'idle')}
 							type="submit"
 							disabled={isPending}
 						>

app/routes/_auth+/onboarding_.$provider.tsx

@@ -271,7 +271,7 @@ export default function OnboardingProviderRoute() {
 					<div className="flex items-center justify-between gap-6">
 						<StatusButton
 							className="w-full"
-							status={isPending ? 'pending' : form.status ?? 'idle'}
+							status={isPending ? 'pending' : (form.status ?? 'idle')}
 							type="submit"
 							disabled={isPending}
 						>

app/routes/settings+/profile.change-email.tsx

@@ -138,7 +138,7 @@ export default function ChangeEmailIndex() {
 					<ErrorList id={form.errorId} errors={form.errors} />
 					<div>
 						<StatusButton
-							status={isPending ? 'pending' : form.status ?? 'idle'}
+							status={isPending ? 'pending' : (form.status ?? 'idle')}
 						>
 							Send Confirmation
 						</StatusButton>

app/routes/settings+/profile.connections.tsx

@@ -197,7 +197,7 @@ function Connection({
 									status={
 										deleteFetcher.state !== 'idle'
 											? 'pending'
-											: deleteFetcher.data?.status ?? 'idle'
+											: (deleteFetcher.data?.status ?? 'idle')
 									}
 								>
 									<Icon name="cross-1" />

app/routes/settings+/profile.index.tsx

@@ -262,7 +262,9 @@ function UpdateProfile() {
 					size="wide"
 					name="intent"
 					value={profileUpdateActionIntent}
-					status={fetcher.state !== 'idle' ? 'pending' : form.status ?? 'idle'}
+					status={
+						fetcher.state !== 'idle' ? 'pending' : (form.status ?? 'idle')
+					}
 				>
 					Save changes
 				</StatusButton>
@@ -309,7 +311,7 @@ function SignOutOfSessions() {
 						status={
 							fetcher.state !== 'idle'
 								? 'pending'
-								: fetcher.data?.status ?? 'idle'
+								: (fetcher.data?.status ?? 'idle')
 						}
 					>
 						<Icon name="avatar">

app/routes/settings+/profile.password.tsx

@@ -167,7 +167,7 @@ export default function ChangePasswordRoute() {
 				</Button>
 				<StatusButton
 					type="submit"
-					status={isPending ? 'pending' : form.status ?? 'idle'}
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
 				>
 					Change Password
 				</StatusButton>

app/routes/settings+/profile.password_.create.tsx

@@ -118,7 +118,7 @@ export default function CreatePasswordRoute() {
 				</Button>
 				<StatusButton
 					type="submit"
-					status={isPending ? 'pending' : form.status ?? 'idle'}
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
 				>
 					Create Password
 				</StatusButton>

app/routes/settings+/profile.photo.tsx

@@ -202,7 +202,7 @@ export default function PhotoRoute() {
 							pendingIntent === 'submit'
 								? 'pending'
 								: lastSubmissionIntent === 'submit'
-									? form.status ?? 'idle'
+									? (form.status ?? 'idle')
 									: 'idle'
 						}
 					>
@@ -228,7 +228,7 @@ export default function PhotoRoute() {
 								pendingIntent === 'delete'
 									? 'pending'
 									: lastSubmissionIntent === 'delete'
-										? form.status ?? 'idle'
+										? (form.status ?? 'idle')
 										: 'idle'
 							}
 						>

app/routes/settings+/profile.two-factor.verify.tsx

@@ -201,7 +201,7 @@ export default function TwoFactorRoute() {
 									pendingIntent === 'verify'
 										? 'pending'
 										: lastSubmissionIntent === 'verify'
-											? form.status ?? 'idle'
+											? (form.status ?? 'idle')
 											: 'idle'
 								}
 								type="submit"
@@ -217,7 +217,7 @@ export default function TwoFactorRoute() {
 									pendingIntent === 'cancel'
 										? 'pending'
 										: lastSubmissionIntent === 'cancel'
-											? form.status ?? 'idle'
+											? (form.status ?? 'idle')
 											: 'idle'
 								}
 								type="submit"

app/routes/users+/$username_+/notes.$noteId.tsx

@@ -172,7 +172,7 @@ export function DeleteNote({ id }: { id: string }) {
 				name="intent"
 				value="delete-note"
 				variant="destructive"
-				status={isPending ? 'pending' : form.status ?? 'idle'}
+				status={isPending ? 'pending' : (form.status ?? 'idle')}
 				disabled={isPending}
 				className="w-full max-md:aspect-square max-md:px-0"
 			>

app/utils/auth.server.ts

@@ -53,7 +53,7 @@ export async function requireUserId(
 		redirectTo =
 			redirectTo === null
 				? null
-				: redirectTo ?? `${requestUrl.pathname}${requestUrl.search}`
+				: (redirectTo ?? `${requestUrl.pathname}${requestUrl.search}`)
 		const loginParams = redirectTo ? new URLSearchParams({ redirectTo }) : null
 		const loginRedirect = ['/login', loginParams?.toString()]
 			.filter(Boolean)

docs/fonts.md

@@ -6,7 +6,8 @@ easy to do so.
 
 ## Using Custom Fonts
 
-You can use custom fonts by creating the `./public/fonts` directory (if it doesn't already exist) and adding them to it.
+You can use custom fonts by creating the `./public/fonts` directory (if it
+doesn't already exist) and adding them to it.
 [Google Fonts](https://fonts.google.com/) is a good place to find open source
 fonts. You will also need to add the `css` file for the font to the
 `./app/styles` directory, if your font doesn't come with one (Google Fonts

public/favicons/README.md

@@ -1,10 +1,12 @@
 # Favicon
 
-This directory has the icons used for android devices. In
-some cases, we cannot reliably detect light/dark mode preference. Hence these icons should not have a transparent background. These icons are
-referenced in the `site.webmanifest` file.
+This directory has the icons used for android devices. In some cases, we cannot
+reliably detect light/dark mode preference. Hence these icons should not have a
+transparent background. These icons are referenced in the `site.webmanifest`
+file.
 
-The icons used by modern browsers and Apple devices are in `app/assets/favicons` as they can be imported with a fingerprint to bust the browser cache.
+The icons used by modern browsers and Apple devices are in `app/assets/favicons`
+as they can be imported with a fingerprint to bust the browser cache.
 
 Note, there's also a `favicon.ico` in the root of `/public` which some older
 browsers will request automatically. This is a fallback for those browsers.