fix: visual bugs (#934)

client/src/components/util/EditableText.tsx

@@ -3,26 +3,31 @@ import { Button, Form, InputGroup } from "react-bootstrap";
 import Icon from "./Icon";
 
 export default function EditableText({
-	onChange,
-	children,
+	as = "p",
+	onSubmit,
 	initial,
+	authorised,
+	className,
 }: {
-	onChange: (str: string) => void;
-	children: (text: string) => React.ReactNode;
+	as?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span";
+	onSubmit: (value: string) => void;
 	initial: string;
+	authorised: boolean;
+	className?: string;
 }) {
 	const [text, setText] = useState(initial);
 	const [editing, setEditing] = useState(false);
 
 	if (editing) {
 		return (
-			<InputGroup className="mb-2">
+			<InputGroup>
 				<Form.Control value={text} onChange={(e) => setText(e.target.value)} />
 				<Button
 					variant="success"
+					type="submit"
 					onClick={() => {
 						setEditing(false);
-						onChange(text);
+						onSubmit(text);
 					}}
 				>
 					Change
@@ -32,11 +37,12 @@ export default function EditableText({
 	}
 
 	return (
-		<div onClick={() => setEditing(true)} className="d-flex">
-			<div>{children(text)}</div>
-			<div>
-				<Icon type="pencil" />
-			</div>
+		<div
+			onClick={() => authorised && setEditing(true)}
+			className={`d-flex gap-2 ${authorised ? "cursor-pointer" : ""}`}
+		>
+			{React.createElement(as, { className }, text)}
+			{authorised && <Icon type="pencil-alt" />}
 		</div>
 	);
 }