feat: slightly improve card layout + edit profile page

frontend/components/Button.tsx

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

frontend/components/Card.tsx

@@ -9,7 +9,7 @@ export type Props = {
 
 export default function Card({ title, draggable, children, footer }: Props) {
   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
         className={`text-2xl p-2 border-b border-zinc-200 dark:border-slate-800${
           draggable && " handle hover:cursor-grab"
@@ -19,7 +19,7 @@ export default function Card({ title, draggable, children, footer }: Props) {
       </h1>
       <div className="flex flex-col p-2">{children}</div>
       {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}
         </div>
       )}

frontend/components/Editable.tsx

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

frontend/components/PersonPage.tsx

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

frontend/pages/edit/profile.tsx

@@ -63,9 +63,12 @@ export default function Index() {
   const addField = () => {
     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(() => {