From f70d92df7e8145b3770ab224169033c403b3662a Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Sun, 3 Oct 2021 13:32:04 +0100
Subject: [PATCH] added edit icon to event-type title input to make editing
 more obvious (#848)

---
 pages/event-types/[type].tsx | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 0dd007c9..126ced77 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -8,6 +8,7 @@ import {
   ExternalLinkIcon,
   LinkIcon,
   LocationMarkerIcon,
+  PencilAltIcon,
   PlusIcon,
   TrashIcon,
   UserAddIcon,
@@ -115,6 +116,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
   });
 
   const [users, setUsers] = useState<AdvancedOptions["users"]>([]);
+
+  const [editIcon, setEditIcon] = useState(true);
+
   const [enteredAvailability, setEnteredAvailability] = useState();
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [showAddCustomModal, setShowAddCustomModal] = useState(false);
@@ -358,16 +362,24 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
       <Shell
         title={`${eventType.title} | Event Type`}
         heading={
-          <input
-            ref={titleRef}
-            type="text"
-            name="title"
-            id="title"
-            required
-            className="pl-0 w-full text-xl font-bold focus:text-black text-gray-500 hover:text-gray-700 bg-transparent border-none cursor-pointer focus:ring-0 focus:outline-none"
-            placeholder="Quick Chat"
-            defaultValue={eventType.title}
-          />
+          <div className="relative group" onClick={() => setEditIcon(false)}>
+            <input
+              ref={titleRef}
+              type="text"
+              name="title"
+              id="title"
+              required
+              className="pl-0 w-full text-xl font-bold focus:text-black text-gray-500 hover:text-gray-700 bg-transparent border-none cursor-pointer focus:ring-0 focus:outline-none"
+              placeholder="Quick Chat"
+              defaultValue={eventType.title}
+            />
+            {editIcon && (
+              <PencilAltIcon
+                style={{ top: 14, left: `${eventType.title.length * 10 + 8}` }}
+                className="group-hover:text-gray-700 text-gray-500 absolute left-0 w-4 h-4 inline"
+              />
+            )}
+          </div>
         }
         subtitle={eventType.description || ""}>
         <div className="block sm:flex">