feat: slightly improve card layout + edit profile page

This commit is contained in:
Sam 2023-01-03 00:07:10 +01:00
parent e5723360a7
commit 68939f5e10
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
5 changed files with 46 additions and 40 deletions

View File

@ -10,6 +10,7 @@ export interface Props {
onClick?: MouseEventHandler<HTMLButtonElement>; onClick?: MouseEventHandler<HTMLButtonElement>;
style?: ButtonStyle; style?: ButtonStyle;
bold?: boolean; bold?: boolean;
disabled?: boolean;
noRound?: boolean; noRound?: boolean;
children?: ReactNode; children?: ReactNode;
} }
@ -33,10 +34,11 @@ function PrimaryButton(props: Props) {
return ( return (
<button <button
type="button" type="button"
disabled={props.disabled}
onClick={props.onClick} onClick={props.onClick}
className={`bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 ${ className={`bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 ${
!props.noRound && "rounded-md" !props.noRound && "rounded-md"
} text-white`} } ${props.disabled && "cursor-not-allowed"} text-white`}
> >
<span className={props.bold ? "font-bold" : ""}>{props.children}</span> <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button> </button>
@ -47,10 +49,11 @@ function SuccessButton(props: Props) {
return ( return (
<button <button
type="button" type="button"
disabled={props.disabled}
onClick={props.onClick} onClick={props.onClick}
className={`bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 ${ className={`bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 ${
!props.noRound && "rounded-md" !props.noRound && "rounded-md"
} text-white`} } ${props.disabled && "cursor-not-allowed"} text-white`}
> >
<span className={props.bold ? "font-bold" : ""}>{props.children}</span> <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button> </button>
@ -61,10 +64,11 @@ function DangerButton(props: Props) {
return ( return (
<button <button
type="button" type="button"
disabled={props.disabled}
onClick={props.onClick} onClick={props.onClick}
className={`bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 ${ className={`bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 ${
!props.noRound && "rounded-md" !props.noRound && "rounded-md"
} text-white`} } ${props.disabled && "cursor-not-allowed"} text-white`}
> >
<span className={props.bold ? "font-bold" : ""}>{props.children}</span> <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button> </button>

View File

@ -9,7 +9,7 @@ export type Props = {
export default function Card({ title, draggable, children, footer }: Props) { export default function Card({ title, draggable, children, footer }: Props) {
return ( return (
<div className="bg-slate-100 dark:bg-slate-700 rounded-md shadow"> <div className="relative bg-slate-100 dark:bg-slate-700 rounded-md shadow">
<h1 <h1
className={`text-2xl p-2 border-b border-zinc-200 dark:border-slate-800${ className={`text-2xl p-2 border-b border-zinc-200 dark:border-slate-800${
draggable && " handle hover:cursor-grab" draggable && " handle hover:cursor-grab"
@ -19,7 +19,7 @@ export default function Card({ title, draggable, children, footer }: Props) {
</h1> </h1>
<div className="flex flex-col p-2">{children}</div> <div className="flex flex-col p-2">{children}</div>
{footer && ( {footer && (
<div className="p-2 border-t border-zinc-200 dark:border-slate-800"> <div className="border-t border-zinc-200 dark:border-slate-800">
{footer} {footer}
</div> </div>
)} )}

View File

@ -48,11 +48,28 @@ export function EditableCard(props: EditableCardProps) {
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const footer = ( const footer = (
<div className="flex justify-between"> <div className="flex flex-col justify-between space-y-2">
<TextInput value={props.field.name} onChange={props.onChangeName} /> <div className="flex justify-between items-center px-2 pt-2">
<Button style={ButtonStyle.danger} onClick={props.onClickDelete}> <TextInput value={input} onChange={(e) => setInput(e.target.value)} />
<Trash3 aria-hidden className="inline" /> Delete <Button
</Button> disabled={!input || input === ""}
style={ButtonStyle.success}
onClick={() => {
if (!input || input === "") return;
props.onAddPronoun(input);
setInput("");
}}
>
<Plus aria-hidden className="inline" /> Add entry
</Button>
</div>
<div className="flex justify-between p-2 border-t border-zinc-200 dark:border-slate-800">
<TextInput value={props.field.name} onChange={props.onChangeName} />
<Button style={ButtonStyle.danger} onClick={props.onClickDelete}>
<Trash3 aria-hidden className="inline" /> Delete field
</Button>
</div>
</div> </div>
); );
@ -76,7 +93,7 @@ export function EditableCard(props: EditableCardProps) {
choice == PronounChoice.favourite choice == PronounChoice.favourite
? "bg-slate-500" ? "bg-slate-500"
: "bg-slate-600" : "bg-slate-600"
} hover:bg-slate-400 p-2`} } text-white hover:bg-slate-400 p-2`}
> >
<Heart /> <Heart />
</button> </button>
@ -87,7 +104,7 @@ export function EditableCard(props: EditableCardProps) {
choice == PronounChoice.okay choice == PronounChoice.okay
? "bg-slate-500" ? "bg-slate-500"
: "bg-slate-600" : "bg-slate-600"
} hover:bg-slate-400 p-2`} } text-white hover:bg-slate-400 p-2`}
> >
<HandThumbsUp /> <HandThumbsUp />
</button> </button>
@ -98,7 +115,7 @@ export function EditableCard(props: EditableCardProps) {
choice == PronounChoice.jokingly choice == PronounChoice.jokingly
? "bg-slate-500" ? "bg-slate-500"
: "bg-slate-600" : "bg-slate-600"
} hover:bg-slate-400 p-2`} } text-white hover:bg-slate-400 p-2`}
> >
<EmojiLaughing /> <EmojiLaughing />
</button> </button>
@ -109,7 +126,7 @@ export function EditableCard(props: EditableCardProps) {
choice == PronounChoice.friendsOnly choice == PronounChoice.friendsOnly
? "bg-slate-500" ? "bg-slate-500"
: "bg-slate-600" : "bg-slate-600"
} hover:bg-slate-400 p-2`} } text-white hover:bg-slate-400 p-2`}
> >
<People /> <People />
</button> </button>
@ -120,7 +137,7 @@ export function EditableCard(props: EditableCardProps) {
choice == PronounChoice.avoid choice == PronounChoice.avoid
? "bg-slate-500" ? "bg-slate-500"
: "bg-slate-600" : "bg-slate-600"
} hover:bg-slate-400 p-2`} } text-white hover:bg-slate-400 p-2`}
> >
<HandThumbsDown /> <HandThumbsDown />
</button> </button>
@ -135,20 +152,6 @@ export function EditableCard(props: EditableCardProps) {
</li> </li>
); );
})} })}
<li className="flex justify-between my-1 items-center">
<TextInput value={input} onChange={(e) => setInput(e.target.value)} />
<Button
style={ButtonStyle.success}
onClick={() => {
if (!input || input === "") return;
props.onAddPronoun(input);
setInput("");
}}
>
<Plus aria-hidden className="inline" /> Add
</Button>
</li>
</ul> </ul>
</Card> </Card>
); );

View File

@ -260,15 +260,11 @@ function FieldCard({
}) { }) {
return ( return (
<Card title={field.name} draggable={draggable}> <Card title={field.name} draggable={draggable}>
{labelStatusOrder.map((status, i) => ( {labelStatusOrder.map((status, i) =>
<LabelsLine field.labels
key={i} .filter((x) => x.status === status)
status={status} .map((x) => <LabelLine key={i} label={x} />)
texts={field.labels )}
.filter((x) => x.status === status)
.map((x) => x.display())}
/>
))}
</Card> </Card>
); );
} }

View File

@ -63,9 +63,12 @@ export default function Index() {
const addField = () => { const addField = () => {
if (fields.length >= 25) return; if (fields.length >= 25) return;
const lastId = fields[fields.length - 1]?.id ?? 0; const lastId = fields[fields.length - 1]?.id ?? -1;
setFields([...fields, { id: lastId + 1, name: "", pronouns: {} }]); setFields([
...fields,
{ id: lastId + 1, name: `Field #${lastId + 2}`, pronouns: {} },
]);
}; };
useEffect(() => { useEffect(() => {