fix settings page styles

app/routes/_pages.settings.tsx

@@ -5,6 +5,7 @@ import { authenticator } from "~/services/auth.server"
 import { Form, useLoaderData } from "@remix-run/react"
 
 import { TrashIcon } from "@heroicons/react/24/outline"
+import { Button } from "~/components/ui/button"
 
 export async function loader({ request }: LoaderArgs) {
 	let user = await authenticator.isAuthenticated(request, {
@@ -35,16 +36,12 @@ export default function Settings() {
 	let { hasAuthToken } = useLoaderData<typeof loader>()
 
 	return (
-		<div className="rounded bg-white p-4 shadow">
+		<div className="p-4 rounded-lg border bg-card text-card-foreground shadow-smw">
 			<Form method="post" className="flex flex-row items-center gap-6">
-				<button
-					type="submit"
-					disabled={!hasAuthToken}
-					className="flex cursor-pointer flex-row items-center gap-2 rounded bg-red-600 p-4 text-white disabled:cursor-not-allowed disabled:bg-neutral-400"
-				>
+				<Button variant="destructive" type="submit" disabled={!hasAuthToken}>
 					<TrashIcon className="block h-6 w-6" aria-hidden="true" />
 					Delete authentication token
-				</button>
+				</Button>
 
 				<p>
 					Delete your authentication token? You'll no longer be able to use the

app/routes/_pages.tsx

@@ -6,7 +6,7 @@ export default function PageLayout() {
 
 	return (
 		<div className="h-full w-full overflow-scroll pb-16">
-			<header className="bg-background shadow">
+			<header className="bg-background ">
 				<Title title={matches.at(-1)?.data?.title} />
 				<Breadcrumbs
 					crumbs={uniqBy(matches, (match) => {