From 19547802aebb422641c2003ea9cc7336edd64be4 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 30 Mar 2020 22:06:05 +0530
Subject: [PATCH] Taskcard - Add edit button

---
 src/features/TaskCard/TaskCard.js         |  8 ++++++--
 src/features/TaskCard/TaskCard.module.css | 13 +++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/features/TaskCard/TaskCard.js b/src/features/TaskCard/TaskCard.js
index a236c17..53047b0 100644
--- a/src/features/TaskCard/TaskCard.js
+++ b/src/features/TaskCard/TaskCard.js
@@ -8,14 +8,18 @@ export function TaskCard({ cardData, listID }) {
   const [isEditing, setIsEditing] = useState(false);
 
   const stopEditing = () => setIsEditing(false);
+  const startEditing = () => setIsEditing(true);
 
   return !isEditing ? (
     <div
       className={styles.cardContainer}
       tabIndex={1}
-      onDoubleClick={e => setIsEditing(true)}
+      onDoubleClick={startEditing}
     >
-      {cardData.text}
+      <div>{cardData.text}</div>
+      <div className={styles.cardEditBtn}>
+        <input type="button" value="Edit" onClick={startEditing} />
+      </div>
     </div>
   ) : (
     <CreateOrEditTaskCard
diff --git a/src/features/TaskCard/TaskCard.module.css b/src/features/TaskCard/TaskCard.module.css
index f84756c..8c2f61b 100644
--- a/src/features/TaskCard/TaskCard.module.css
+++ b/src/features/TaskCard/TaskCard.module.css
@@ -1,4 +1,5 @@
 .cardContainer {
+  position: relative;
   background-color: #fff;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
@@ -6,6 +7,18 @@
   margin: 8px 0;
 }
 
+.cardEditBtn {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  visibility: hidden;
+}
+
+.cardContainer:focus .cardEditBtn,
+.cardContainer:focus-within .cardEditBtn {
+  visibility: visible;
+}
+
 .createCardContainer {
   width: 100%;
   resize: vertical;