Merge pull request #69 from FLiotta/client/add-id-to-tasks-cards

Added ID on taskcard header
FLiotta · Oct 9, 2020 · 03877a6 · 03877a6
2 parents 232517c + 96ced55
commit 03877a6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/client/src/components/Task/index.tsx b/client/src/components/Task/index.tsx
@@ -12,13 +12,15 @@ import { ITask } from '../../interfaces/Task';
 import './styles.scss';
 
 interface TaskProps {
+  id: number,
   title: string,
   priority: string,
   handleDeleteTask: Function,
   handleInfoClick: Function,
 };
 
 export const Task = ({
+  id,
   title,
   priority,
   handleDeleteTask,
@@ -39,8 +41,9 @@ export const Task = ({
 
   return (
     <div className="task">
-      <div>
-        <p className="task__title">{title}</p>
+      <div className="task__header">
+        <p className="task__header-title">{title}</p>
+        <p className="task__header-id">#{id}</p>
       </div>
       <div className="task__body">
         <div className="task__body-priority">
@@ -113,6 +116,7 @@ const DraggableTask = ({
           style={{ ...provided.draggableProps.style }}
         >
           <Task
+            id={id}
             title={title}
             priority={priority}
             handleDeleteTask={handleDeleteTask}

diff --git a/client/src/components/Task/styles.scss b/client/src/components/Task/styles.scss
@@ -10,12 +10,22 @@
   display: flex;
   flex-direction: column;
 
-  &__title {
-    font-family: "Montserrat", sans-serif;
-    overflow-wrap: break-word;
-    margin: 0;
-    margin-bottom: 5px;
-    font-weight: 300;
+  &__header {
+    display: flex;
+    justify-content: space-between;
+
+    &-title {
+      font-family: "Montserrat", sans-serif;
+      overflow-wrap: break-word;
+      margin: 0;
+      margin-bottom: 5px;
+      font-weight: 300;
+    }
+
+    &-id {
+      font-size: 11px;
+      margin: 0;
+    }
   }
 
   &__body {
@@ -34,15 +44,15 @@
         margin-right: 4px;
 
         &--low {
-          background-color: #00AA9D;
+          background-color: #00aa9d;
         }
 
         &--medium {
-          background-color: #33D033;
+          background-color: #33d033;
         }
 
         &--high {
-          background-color: #DF0024;
+          background-color: #df0024;
         }
       }