improved settings pages

packages/frontend/src/Account.tsx

@@ -56,7 +56,8 @@ function Account() {
 
     return (
         <SettingsPageLayout title="Account">
-            <form onSubmit={handleSubmit} className="flex flex-col gap-6 max-w-sm">
+            <form onSubmit={handleSubmit} className="flex flex-col p-4 gap-2 w-sm border">
+                <h2 className="text-xl font-600 mb-2">Account Details</h2>
                 <div>
                     <Label className="mb-4 block">Avatar</Label>
                     <UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} />

packages/frontend/src/Organisations.tsx

@@ -127,7 +127,7 @@ function Organisations() {
 
     return (
         <SettingsPageLayout title="Organisations">
-            <div className="flex flex-col gap-2 -m-2">
+            <div className="flex flex-col p-1 gap-2">
                 <div className="flex gap-2 items-center">
                     <OrganisationSelect
                         organisations={organisations}

packages/frontend/src/components/settings-page-layout.tsx

@@ -1,22 +1,19 @@
-import { Home } from "lucide-react";
+import type { UserRecord } from "@issue/shared";
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
-import { Button } from "@/components/ui/button";
+import Header from "@/components/header";
 
 export function SettingsPageLayout({ title, children }: { title: string; children?: ReactNode }) {
+    const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
+
     return (
-        <main className="w-full min-h-[100vh] flex flex-col items-start">
-            <div className="flex items-center gap-4 w-full border-b px-2 py-2">
-                <Button asChild variant="ghost" size="icon">
-                    <Link to="/">
-                        <Home />
-                    </Link>
-                </Button>
+        <main className="w-full h-screen flex flex-col">
+            <Header user={user}>
+                <div className="flex gap-1 items-center">
+                    <h1 className="text-3xl font-600">{title}</h1>
+                </div>
+            </Header>
 
-                <h1 className="text-3xl font-600">{title}</h1>
-            </div>
-
-            <div className="w-full px-4 py-4 text-md">{children}</div>
+            <div className="flex flex-col items-center justify-center w-full flex-1 text-md">{children}</div>
         </main>
     );
 }

packages/frontend/src/components/ui/confirm-dialog.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "./button";
 import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "./dialog";
- 
+
 export function ConfirmDialog({
     open,
     onOpenChange,