mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 02:33:01 +00:00
improved settings pages
This commit is contained in:
@@ -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} />
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user