feat(openchallenges): add temporal information to challenge card

[vpchung]

Fixes #2240

Changelog

• add logic for calculating time difference in units of years, months, weeks, days, and hours
• display time until start date OR time until end date (depending on status), using the largest non-zero time unit
• due to limited space in the footer: re-arrange the card layout, switching placements of status and platform
• update "Incentives" icon to something more obvious (trophy)
• add fixed heights for status and headline divs; that way, cards stay uniformed in height no matter the contents

Preview

Footer icons using the same color:

OR one footer icon uses the blue color from our logo and one icon uses the other:

Alternatively, we can forgo displaying the platform altogether (something Addison mentioned as potentially not helpful information):

[vpchung]

Latest iteration:

[tschaffter]

@vpchung "Completed" in red could be reminiscent of errors to users. What about using the default (black) color for completed challenges?

[tschaffter]

Another suggestion would be to hide time information for challenges that have no longer been "recently" completed (3 mo ago?). When I see "10 years ago" I may think to "last updated 10 years ago". This does not have a positive connotation.

[vpchung]

Black color for completed status; show all timeSince info

Black color for completed status; hide timeSince info older than 3 months

Colorized completed status; hide timeSince info older than 3 months

[vpchung]

I'm not a big fan of the default color for the Completed status, but I can also see your point about red = error. What do you think about using our primary color (blue) instead?

[tschaffter]

@vpchung Why are you not a fan of the default color for completed challenges?

[vpchung]

For me, it lacks consistency - either all statuses should be a different color from the default text color, or they should all be the same.

[tschaffter]

@vpchung Thanks for the insight. I understand this viewpoint. I gave some thought about this and I think that the new status style capture more the attention that previously. The two reasons are that this information is now at the center of the card and that it's more colorful compared to the solution with the colored dot. With the proposed design, I think that I'm looking first at the status, then at the title. I think that this may disrupt the flow of reading that should be from top to bottom - or at least the title should be read first? Maybe my eyes are attracted to the status first because it's the topic of this PR...

Could we ask Adam to review the current proposal for the card?

@vpchung What do you think about hiding the platform information from the card? Did you mention on Friday that Addison suggested this too? The two reasons that prompt me to suggest this change are: 1) we know that the challenge ecosystem and information are fragmented by benchmarking communities and platforms. Removing this information from the card could be a way for us to "mend" this fragmentation to some extend if that makes sense. 2) enable the user to read more challenge cards by removing some information from the card.

[vpchung]

With the proposed design, I think that I'm looking first at the status, then at the title... this may disrupt the flow of reading that should be from top to bottom

Ah yes, I can see that. I can try going back to the bullet design.

What do you think about hiding the platform information from the card? Did you mention on Friday that Addison suggested this too?

Yes! A design proposal for this is given in the original comment here (third screenshot). I can continue working off of that iteration.

[vpchung]

Latest iteration

Original bullet size

Slightly bigger bullet size

Extra big bullet size 😆

[tschaffter]

I like the "Slightly bigger bullet size" design.

[vpchung]

PR is now ready for (re-)review.

[vpchung]

Thank you, @rrchai , for pointing out the inconsistency of the status colors during the standup. I have addressed the issue with the following design options:

Complete as red

Profile	Card

Complete as blue

Profile	Card

Note that above, I changed the status color on the profile pages from black to red/blue. The original design is black text, i.e.

[vpchung]

Moving forward with blue for "Completed" status. As a safe measure, I also simulated the updated status colors with Coblis and WebAIM to verify that this change is still accessible to users with color-blindness (they passed, according to the simulators).

Challenge card

Challenge profile

[rrchai]

LGTM with one small suggestion. Since the status has a circle before the text, align-center might not perfectly align the status box with "ends/starts ..." box in center. Adding some margin-left on status box to move a bit toward left can make alignment better in my oppinion.

Before

After moving status box to left by 8px