#1 Add functionality to edit name in new entry

package.json

@@ -15,6 +15,7 @@
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-edit-text": "^5.0.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
@@ -44,6 +45,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-edit-text": "^5.0.1",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8"

src/components/entry/NewEntry.tsx

@@ -1,10 +1,12 @@
 import cx from "classnames";
-import { CornersIn, CornersOut, FloppyDisk, X } from "phosphor-react";
-import React, { useEffect, useState } from "react";
+import { CornersIn, CornersOut, FloppyDisk, X, Pencil } from "phosphor-react";
+import React, { useState } from "react";
 import { UserRole } from "../../types";
 import { Button } from "../Button";
 import { Action } from "./Action";
 import { EntryHeader } from "./EntryHeader";
+import { EditText } from "react-edit-text";
+import "react-edit-text/dist/index.css";
 
 interface NewEntryProps {
   parentRole: "Kläger" | "Beklagter";
@@ -35,7 +37,20 @@ export const NewEntry: React.FC<NewEntryProps> = ({
         className="rounded-b-none cursor-default"
         isPlaintiff={!isPlaintiff}
       >
-        <span className="font-bold">Stefan Schneider</span>
+        <EditText
+          inputClassName={cx("font-bold focus:outline-none bg-transparent", {
+            "border-darkPurple": !isPlaintiff,
+            "border-darkPetrol": isPlaintiff,
+          })}
+          className={cx("font-bold", {
+            "text-darkPurple": !isPlaintiff,
+            "text-darkPetrol": isPlaintiff,
+          })}
+          defaultValue="Stefan Schneider"
+          showEditButton
+          editButtonContent={<Pencil size={18} />}
+          editButtonProps={{ className: cx("bg-transparent") }}
+        />
       </EntryHeader>
       {/* Toolbar */}
       <div

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
   theme: {
     extend: {},
     colors: {
+      transparent: "transparent",
       white: "#fff",
       offWhite: "#F5F5F5",
       lightGrey: "#E4E4E4",