Typography, colors, and layout polishes

[vic-tian]

There are some things to fix on the listing.

• wrong use of "Roboto-Bold" font instead of "Roboto" and font-weight — tags

• wrong sizing of tags; they must be 20px tall;
  Desired CSS:
  

• Change the padding between prize and status columns to 20px; currently it is too big;

• Change the prize label from "total prize" to "purse"; add text-wrap: no-wrap so content will never break into 2 lines;
  

• User correct colors - on several places I saw #999 instead of the correct gray;

• Font-weights reduction:

  • Current phase (medium → normal);
  • Track code (bold → medium);
  • Time left (medium → normal);Change color to $tc-gray-50
  • Number of users/submissions (medium → normal);

• Track progress in stalled/paused/delayed: from red to green; change the time remaining label to display the error. Too much red will create negative impact on the viewers

• Try to investigate if Chrome is rendering text with geometricPrecision, as the fonts doesn't look as they should. We might have a big problem with font loading from AWS, so please have someone look on what's the best way to serve our own web fonts from AWS. This one is pretty important as lack of rendering of fonts would result in bad UI.

Screenshots:

Expected

Current

[ajefts]

@ThomasKranitsas Another one if you want to grab it

[ThomasKranitsas]

@ajefts I don't have much time for this one. Sorry :)

[tladendo]

I'll get someone on this

[tladendo]

This is in progress and nearly done, just need to resolve some conflicts

[tladendo]

@vic-topcoder I've deployed what's been submitted, can you take a look in dev?

[vic-tian]

Yes, looks good so far. When can we expect the rest of the fixes?