From 609baa98aadfbbf48b7e892293dc44b7cfc2f178 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Mon, 13 Jul 2020 16:20:06 -0500
Subject: [PATCH] feature: connect card operation icon to quick card editor

---
 frontend/src/shared/components/Card/Styles.ts |  5 ++--
 frontend/src/shared/components/Card/index.tsx | 25 +++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/shared/components/Card/Styles.ts b/frontend/src/shared/components/Card/Styles.ts
index 442a838..3ef2c25 100644
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@@ -134,10 +134,9 @@ export const ListCardOperation = styled.span`
   position: absolute;
   right: 2px;
   top: 2px;
-  z-index: 10;
-
+  z-index: 100;
   &:hover {
-    background-color: ${props => mixin.darken('#262c49', 0.45)};
+    background-color: ${props => mixin.darken('#262c49', .25)};
   }
 `;
 
diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
index 36385f4..763180b 100644
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, {useState, useRef, useEffect} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import TaskAssignee from 'shared/components/TaskAssignee';
-import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons';
+import {faPencilAlt, faList} from '@fortawesome/free-solid-svg-icons';
+import {faClock, faCheckSquare, faEye} from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
   EditorContent,
@@ -132,7 +132,12 @@ const Card = React.forwardRef(
       >
         <ListCardInnerContainer ref={$innerCardRef}>
           {isActive && (
-            <ListCardOperation>
+            <ListCardOperation onClick={e => {
+              e.stopPropagation();
+              if (onContextMenu) {
+                onContextMenu($innerCardRef, taskID, taskGroupID);
+              }
+            }}>
               <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
             </ListCardOperation>
           )}
@@ -164,11 +169,11 @@ const Card = React.forwardRef(
                 />
               </EditorContent>
             ) : (
-              <CardTitle>
-                {complete && <CompleteIcon width={16} height={16} />}
-                {title}
-              </CardTitle>
-            )}
+                <CardTitle>
+                  {complete && <CompleteIcon width={16} height={16} />}
+                  {title}
+                </CardTitle>
+              )}
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>