improved settings pages

This commit is contained in:
Oliver Bryan
2026-01-01 11:29:17 +00:00
parent 13314ad16e
commit 5a9e950fa8
4 changed files with 15 additions and 17 deletions

View File

@@ -56,7 +56,8 @@ function Account() {
return ( return (
<SettingsPageLayout title="Account"> <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> <div>
<Label className="mb-4 block">Avatar</Label> <Label className="mb-4 block">Avatar</Label>
<UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} /> <UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} />

View File

@@ -127,7 +127,7 @@ function Organisations() {
return ( return (
<SettingsPageLayout title="Organisations"> <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"> <div className="flex gap-2 items-center">
<OrganisationSelect <OrganisationSelect
organisations={organisations} organisations={organisations}

View File

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

View File

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