From bdccce2747b1431ee5ef4e952d02916bc4a37c6b Mon Sep 17 00:00:00 2001 From: palakgupta2712 Date: Sun, 18 Feb 2024 00:29:44 +0530 Subject: [PATCH 1/3] bug-fix: #225 re-design task card --- __tests__/Unit/Components/Tasks/Card.test.tsx | 8 +- src/components/tasks/card/card.module.scss | 97 ++++++--- src/components/tasks/card/index.tsx | 201 ++++++++++-------- src/styles/variables.scss | 4 +- src/utils/handleStatusTextColor.ts | 9 + 5 files changed, 201 insertions(+), 118 deletions(-) create mode 100644 src/utils/handleStatusTextColor.ts diff --git a/__tests__/Unit/Components/Tasks/Card.test.tsx b/__tests__/Unit/Components/Tasks/Card.test.tsx index e67c820c7..79e15faf5 100644 --- a/__tests__/Unit/Components/Tasks/Card.test.tsx +++ b/__tests__/Unit/Components/Tasks/Card.test.tsx @@ -532,7 +532,7 @@ describe('Task card', () => { , {} ); - const spanElement = screen.getByTestId('started-on'); + const spanElement = screen.getByTestId('startedOn'); expect(spanElement).toHaveTextContent('Not started'); }); @@ -547,8 +547,10 @@ describe('Task card', () => { , {} ); - const spanElement = screen.getByTestId('started-on'); - expect(spanElement).toHaveTextContent('Started 3 years ago'); // Mocked date from moment + const spanElement = screen.getByTestId('startedOn'); + expect(spanElement).toHaveTextContent( + 'Started: Apr 19, 2021 (3 years ago)' + ); // Mocked date from moment }); it('Should show the status of the task', () => { renderWithRouter( diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index 50e10fe16..a01a90ceb 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -22,7 +22,6 @@ display: flex; flex-direction: column; padding: 1rem; - margin-bottom: 2rem; margin-bottom: 25px; justify-content: space-between; border: 1px solid $lighter-gray; @@ -36,6 +35,7 @@ @media (max-width: 448px) { justify-content: center; } + box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 5px 2px; } .card_updated { border-radius: 10px; @@ -54,7 +54,7 @@ } .dateInfo { - margin-top: 0.8rem; + // margin-top: 0.8rem; } .cardTitle { @@ -73,39 +73,56 @@ } } +.cardTitle:hover { + text-decoration: underline; + transition: ease-in 3s; +} .cardTitleText { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; - + color: $black; + font-weight: 500; @media (max-width: 368px) { -webkit-line-clamp: 2; } + letter-spacing: 0.5px; } .cardSpecialFont { font-size: 1.1rem; - font-weight: 500; - color: #aeaeae; + font-weight: 300; + color: #57534e; } .cardStatusFont { font-size: 1.3rem; font-weight: 500; } + .contributor { display: flex; align-items: center; - gap: 1rem; - margin-top: 0.8rem; + gap: 0.5rem; + margin-top: 0.1rem; flex-wrap: wrap; + .card__top__button { + margin-top: 0; + } +} +.contributorDiv { + display: flex; + align-items: center; + gap: 3px; + flex-wrap: wrap; .card__top__button { margin-top: 0; } } + .completionDate { padding-left: 0.5rem; @media (max-width: 448px) { @@ -114,6 +131,10 @@ } } +.formattedDate { + color: #6f6c6b; +} + .contributorImage { img { border-radius: 50%; @@ -121,16 +142,13 @@ } .cardStrongFont { - font-size: 1.3rem; - font-weight: 500; - border-radius: 5px; - width: 7rem; - height: 1.5rem; + font-size: 1.2rem; + font-weight: 400; } .overdueTask { - border: solid red 2px; - background-color: lighten($light-red-2, 3%); + border: solid #fca5a5 1px; + background-color: $light-red-2; } .progressContainer { @@ -139,6 +157,7 @@ flex-direction: column; align-items: center; padding-top: 0.5rem; + border: none; } .progressContainerUpdated { @@ -150,8 +169,7 @@ .progressIndicator { width: 100%; height: 0.6rem; - background-color: $white; - border: 2px solid $black; + background-color: #e2d7d2; border-radius: 1rem; max-width: 9rem; } @@ -201,7 +219,7 @@ } .progressRed { - background-color: $red; + background-color: $coral-red; } .progressYellow { @@ -212,15 +230,6 @@ cursor: pointer; } -.taskStatusAndDateContainer { - display: flex; - justify-content: space-between; -} - -.taskStatusEditMode { - margin-top: 0.8rem; -} - .taskTagLevelWrapper { display: flex; padding-top: 0.5rem; @@ -234,7 +243,6 @@ .taskTagLevelContainer { display: flex; - gap: 0.25rem; } .taskTagLevel { @@ -435,8 +443,41 @@ align-items: center; } +.statusTextIndicator { + border-radius: 50%; + width: 8px; + height: 8px; +} +.statusTextIndicatorOrange { + background: orange; +} +.statusTextIndicatorRed { + background: red; +} +.statusTextIndicatorGreen { + background: green; +} + .statusText { - margin-left: 0.5rem; + margin: 0; + padding: 0 10px; + border-radius: 25px; + display: flex; + align-items: center; + gap: 5px; +} + +.statusTextOrange { + background-color: lighten(orange, 40%); + border: solid 1px orange; +} +.statusTextRed { + background-color: lighten(red, 40%); + border: solid 1px red; +} +.statusTextGreen { + background-color: lighten(green, 40%); + border: solid 1px green; } .assigneeSuggestionInput { diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx index fa85d0ca7..3ef5efb22 100644 --- a/src/components/tasks/card/index.tsx +++ b/src/components/tasks/card/index.tsx @@ -38,6 +38,7 @@ import { PENDING, SAVED, ERROR_STATUS } from '../constants'; import { StatusIndicator } from './StatusIndicator'; import Suggestions from '../SuggestionBox/Suggestions'; import { useRouter } from 'next/router'; +import handleStatusTextColor from '@/utils/handleStatusTextColor'; const Card: FC = ({ content, @@ -46,7 +47,6 @@ const Card: FC = ({ }) => { const router = useRouter(); const isDevMode = router.query.dev === 'true' ? true : false; - const statusRedList = [BLOCKED]; const statusNotOverDueList = [COMPLETED, VERIFIED, AVAILABLE, DONE]; const cardDetails = content; @@ -96,20 +96,9 @@ const Card: FC = ({ const [showSuggestion, setShowSuggestion] = useState(false); - function getStartedAgo() { - if (cardDetails.startedOn === undefined) { - return 'N/A'; - } else { - const localStartedOn = new Date( - parseInt(cardDetails.startedOn, 10) * 1000 - ); - const fromNowStartedOn = moment(localStartedOn).fromNow(); - return fromNowStartedOn; - } - } - + const localStartedOn = new Date(parseInt(cardDetails.startedOn, 10) * 1000); const localEndsOn = new Date(cardDetails.endsOn * 1000); - const fromNowEndsOn = moment(localEndsOn).fromNow(); + const iconHeight = '25'; const iconWidth = '25'; @@ -199,14 +188,15 @@ const Card: FC = ({ } } - function renderDate(fromNowEndsOn: string, isEditable: boolean) { + function renderDate(date: Date, isEditable: boolean, type: any) { + const formattedDate = moment(date).format('MMM D, YYYY'); if (isEditable) { return ( { setDateTimes(e.target.value); - handelDateChange(e, 'endsOn'); + handelDateChange(e, type); }} value={dateTimes} data-testid="date" @@ -214,9 +204,19 @@ const Card: FC = ({ ); } return ( - - {!cardDetails.endsOn ? 'TBD' : fromNowEndsOn} - + <> + + {formattedDate} + + {''} ({moment(date).fromNow()}) + + + ); } @@ -527,70 +527,56 @@ const Card: FC = ({ -
+

- Estimated completion + Estimated completion:

-

- {renderDate(fromNowEndsOn, isEditable)} +

+ {!cardDetails.endsOn + ? 'TBD' + : renderDate(localEndsOn, isEditable, 'endsOn')}

- handleChange(e, 'startedOn')} - role="button" - tabIndex={0} - data-testid="started-on" - > - {cardDetails.status === AVAILABLE - ? 'Not started' - : `Started ${getStartedAgo()}`} - -
- {/* EDIT task status */} -
- {isEditable ? ( - + + {cardDetails.status === AVAILABLE + ? 'Not started' + : 'Started on:'} + + + {cardDetails.status === AVAILABLE + ? 'Not started' + : !cardDetails.startedOn + ? 'N/A' + : renderDate( + localStartedOn, + isEditable, + 'startedOn' + )} + + - ) : ( -
-

Status:

-

- {TASK_STATUS_MAPING[ - cardDetails.status as keyof typeof TASK_STATUS_MAPING - ] || - cardDetails.status || - 'NA'} -

-
- )} +

- {cardDetails.assignee ? 'Assigned to' : 'Assign to'} + {cardDetails.assignee ? 'Assigned to:' : 'Assign to:'}

- - {cardDetails.assignee - + {isEditable ? isUserAuthorized && (
= ({
) : editedTaskDetails.assignee && ( -

- {editedTaskDetails.assignee} +

+ + {cardDetails.assignee + + + {editedTaskDetails.assignee} +

)} {showAssignButton() && }
-
-
- + ) : ( +
+

+

+ {TASK_STATUS_MAPING[ + cardDetails.status as keyof typeof TASK_STATUS_MAPING + ] || + cardDetails.status || + 'NA'} +

+
+ )} + +
+ + {isEditable && isUserAuthorized && ( + - {isEditable && isUserAuthorized && ( - - )} -
+ )}
{cardDetails.status !== COMPLETED && isIssueClosed() && ( diff --git a/src/styles/variables.scss b/src/styles/variables.scss index fae8365c5..59aeed400 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -27,10 +27,10 @@ $white: white; $green: #008000; $jungle-green: #29ab87; $active-green: #87d870; -$yellow: #ecef08; +$yellow: #eab308; $orange: #ffa500; $light-red-1: #ffb0b0; -$light-red-2: #ffdddd; +$light-red-2: #fef2f2; $shimmer-lighter: #eff1f3; $shimmer-darker: #e2e2e2; diff --git a/src/utils/handleStatusTextColor.ts b/src/utils/handleStatusTextColor.ts new file mode 100644 index 000000000..2418b0044 --- /dev/null +++ b/src/utils/handleStatusTextColor.ts @@ -0,0 +1,9 @@ +import { TASK_STATUS_MAPING } from '@/constants/constants'; + +const handleStatusTextColor = (status: any): string => { + if (status === TASK_STATUS_MAPING.COMPLETED) return 'Green'; + if (status === TASK_STATUS_MAPING.BLOCKED) return 'Red'; + return 'Orange'; +}; + +export default handleStatusTextColor; From fa75a3be623c7e83f0e4742ee708fa2598d94a13 Mon Sep 17 00:00:00 2001 From: palakgupta2712 Date: Sun, 18 Feb 2024 00:34:35 +0530 Subject: [PATCH 2/3] bug-fix: #225 re-design task card test cases fix --- src/components/tasks/card/index.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx index 3ef5efb22..498013aa5 100644 --- a/src/components/tasks/card/index.tsx +++ b/src/components/tasks/card/index.tsx @@ -209,7 +209,6 @@ const Card: FC = ({ className={styles.cardStrongFont} role="button" tabIndex={0} - data-testid={type} > {formattedDate} @@ -545,19 +544,14 @@ const Card: FC = ({ status={editedTaskDetails.savingDate} />
-
+
{cardDetails.status === AVAILABLE ? 'Not started' : 'Started on:'} - - {cardDetails.status === AVAILABLE - ? 'Not started' - : !cardDetails.startedOn + + {!cardDetails.startedOn ? 'N/A' : renderDate( localStartedOn, From c5694e2de4228c55a012f1df8ca59e818dacac6a Mon Sep 17 00:00:00 2001 From: palakgupta2712 Date: Sun, 18 Feb 2024 01:02:48 +0530 Subject: [PATCH 3/3] bug-fix: #225 re-design task card --- __tests__/Unit/Components/Tasks/Card.test.tsx | 20 ++++++++++--------- src/components/tasks/card/card.module.scss | 4 ++++ src/components/tasks/card/index.tsx | 10 ++++++---- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/Card.test.tsx b/__tests__/Unit/Components/Tasks/Card.test.tsx index 79e15faf5..1814d059c 100644 --- a/__tests__/Unit/Components/Tasks/Card.test.tsx +++ b/__tests__/Unit/Components/Tasks/Card.test.tsx @@ -106,7 +106,7 @@ describe('Task card', () => { ); - expect(getByText('a day ago')).toBeInTheDocument(); + expect(getByText('2 days ago')).toBeInTheDocument(); // With updated props props = { @@ -268,7 +268,7 @@ describe('Task card', () => { expect(closeTaskBtn).toBeInTheDocument(); const dummyNameImage = screen.getByAltText('Dummy Name'); - const assignToText = screen.getByText('Assign to'); + const assignToText = screen.getByText('Assign to:'); expect(dummyNameImage).toBeInTheDocument(); expect(assignToText).toBeInTheDocument(); @@ -315,9 +315,9 @@ describe('Task card', () => { ); - const assignedToText = screen.getByText('Assigned to'); + const assignedToText = screen.getByText('Assigned to:'); expect(assignedToText).toBeInTheDocument(); - const assignToText = screen.queryByText('Assign to'); + const assignToText = screen.queryByText('Assign to:'); expect(assignToText).not.toBeInTheDocument(); }); @@ -335,9 +335,9 @@ describe('Task card', () => { ); - const assignedToText = screen.queryByText('Assigned to'); + const assignedToText = screen.queryByText('Assigned to:'); expect(assignedToText).not.toBeInTheDocument(); - const assignToText = screen.getByText('Assign to'); + const assignToText = screen.getByText('Assign to:'); expect(assignToText).toBeInTheDocument(); }); @@ -487,7 +487,7 @@ describe('Task card', () => { const editButton = getByTestId('edit-button'); fireEvent.click(editButton); - const dateInput = screen.getByTestId('date'); + const dateInput = screen.getByTestId('endsOnInput'); fireEvent.change(dateInput, { target: { value: '2023-08-25' } }); jest.runAllTimers(); @@ -533,7 +533,9 @@ describe('Task card', () => { {} ); const spanElement = screen.getByTestId('startedOn'); - expect(spanElement).toHaveTextContent('Not started'); + expect(spanElement).toHaveTextContent( + 'Not started:Apr 19, 2021 (3 years ago)' + ); }); it('renders "Started" with a specific date if status is not AVAILABLE', () => { @@ -549,7 +551,7 @@ describe('Task card', () => { ); const spanElement = screen.getByTestId('startedOn'); expect(spanElement).toHaveTextContent( - 'Started: Apr 19, 2021 (3 years ago)' + 'Started on:Apr 19, 2021 (3 years ago)' ); // Mocked date from moment }); it('Should show the status of the task', () => { diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index a01a90ceb..cee821f7a 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -151,6 +151,10 @@ background-color: $light-red-2; } +.overdueTaskTitle { + color: rgb(140, 28, 28); +} + .progressContainer { width: 12rem; display: flex; diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx index 498013aa5..5d0034961 100644 --- a/src/components/tasks/card/index.tsx +++ b/src/components/tasks/card/index.tsx @@ -199,7 +199,7 @@ const Card: FC = ({ handelDateChange(e, type); }} value={dateTimes} - data-testid="date" + data-testid={type + 'Input'} /> ); } @@ -510,7 +510,9 @@ const Card: FC = ({ taskId={cardDetails.id} > handleChange(e, 'title')} role="button" @@ -547,7 +549,7 @@ const Card: FC = ({
{cardDetails.status === AVAILABLE - ? 'Not started' + ? 'Not started:' : 'Started on:'} @@ -616,7 +618,7 @@ const Card: FC = ({ isDevMode={isDevMode} /> ) : ( -
+