Skip to content

bug-fix: #225 re-design task card #1134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
palakgupta2712 wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

bug-fix: #225 re-design task card #1134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bdccce2
bug-fix: #225 re-design task card
palakgupta2712 Feb 17, 2024
fa75a3b
bug-fix: #225 re-design task card test cases fix
palakgupta2712 Feb 17, 2024
274918e
Merge branch 'develop' into 225-task-card
iamitprakash Feb 17, 2024
c5694e2
bug-fix: #225 re-design task card
palakgupta2712 Feb 17, 2024
adde8a4
Merge branch '225-task-card' of https://github.com/palakgupta2712/web…
palakgupta2712 Feb 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions __tests__/Unit/Components/Tasks/Card.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ describe('Task card', () => {
</Provider>
);

expect(getByText('a day ago')).toBeInTheDocument();
expect(getByText('2 days ago')).toBeInTheDocument();

// With updated props
props = {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -315,9 +315,9 @@ describe('Task card', () => {
</Provider>
);

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();
});

Expand All @@ -335,9 +335,9 @@ describe('Task card', () => {
</Provider>
);

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();
});

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -532,8 +532,10 @@ describe('Task card', () => {
</Provider>,
{}
);
const spanElement = screen.getByTestId('started-on');
expect(spanElement).toHaveTextContent('Not started');
const spanElement = screen.getByTestId('startedOn');
expect(spanElement).toHaveTextContent(
'Not started:Apr 19, 2021 (3 years ago)'
);
});

it('renders "Started" with a specific date if status is not AVAILABLE', () => {
Expand All @@ -547,8 +549,10 @@ describe('Task card', () => {
</Provider>,
{}
);
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 on:Apr 19, 2021 (3 years ago)'
); // Mocked date from moment
});
it('Should show the status of the task', () => {
renderWithRouter(
Expand Down
101 changes: 73 additions & 28 deletions src/components/tasks/card/card.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -54,7 +54,7 @@
}

.dateInfo {
margin-top: 0.8rem;
// margin-top: 0.8rem;
}

.cardTitle {
Expand All @@ -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) {
Expand All @@ -114,23 +131,28 @@
}
}

.formattedDate {
color: #6f6c6b;
}

.contributorImage {
img {
border-radius: 50%;
}
}

.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;
}

.overdueTaskTitle {
color: rgb(140, 28, 28);
}

.progressContainer {
Expand All @@ -139,6 +161,7 @@
flex-direction: column;
align-items: center;
padding-top: 0.5rem;
border: none;
}

.progressContainerUpdated {
Expand All @@ -150,8 +173,7 @@
.progressIndicator {
width: 100%;
height: 0.6rem;
background-color: $white;
border: 2px solid $black;
background-color: #e2d7d2;
border-radius: 1rem;
max-width: 9rem;
}
Expand Down Expand Up @@ -201,7 +223,7 @@
}

.progressRed {
background-color: $red;
background-color: $coral-red;
}

.progressYellow {
Expand All @@ -212,15 +234,6 @@
cursor: pointer;
}

.taskStatusAndDateContainer {
display: flex;
justify-content: space-between;
}

.taskStatusEditMode {
margin-top: 0.8rem;
}

.taskTagLevelWrapper {
display: flex;
padding-top: 0.5rem;
Expand All @@ -234,7 +247,6 @@

.taskTagLevelContainer {
display: flex;
gap: 0.25rem;
}

.taskTagLevel {
Expand Down Expand Up @@ -435,8 +447,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 {
Expand Down
Loading