Visual Improvements for Results page

[MaxStalker]

Description

Elements on results page had inconsistent design (font sizes, margins, padding, etc.) and in a lot of cases were using inline styles instead of classes.

Checklist

• Read and conforms to the contributor guidelines
• Read and conforms to the style guidelines
• Tests pass and code coverage has not decreased
• Changes don't break existing behavior
• Commit message follows commit guidelines
• Completed: Code review by core team and any requested changes

Affected core subsystem(s)

UI was slightly adjusted, but it's more of a styling changes - no new functionality

Refers/Fixes

Testing and Sign-off

I've launched local copy of web repository using docker as described in this article: https://docs.gitcoin.co/mk_setup/
Visually most of the blocks were working. Some were missing, probably because there were no data in local database. Though I've tested layout with static html (which was later removed) similar to the one on live site and it was working.

Contributor

• Read and followed the Contributor Guidelines
• Tested all changes locally
• Verified existing functionality
• Ran make test and everything passed!

Reviewer

• Affirm contributor guidelines have been followed and requested changes made
• CI tests and linting pass
• No conflicts (migrations, files, etc)
• Regression tested against staging or local deployment

Funder

• Validated requested changes were made to specification
• Bounty payout released to the contributor

[codecov]

Codecov Report

Merging #4167 into master will decrease coverage by 0.03%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #4167      +/-   ##
==========================================
- Coverage   30.22%   30.18%   -0.04%     
==========================================
  Files         209      209              
  Lines       16625    16625              
  Branches     2223     2223              
==========================================
- Hits         5025     5019       -6     
- Misses      11419    11425       +6     
  Partials      181      181

Impacted Files	Coverage Δ
app/dashboard/embed.py	28.16% <0%> (-3.45%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d8282aa...48f5352. Read the comment docs.

[thelostone-mc]

left a few comments.
could you also add screenshots/ recordings of the updated page on desktop + tablet + mobile (aka responsive )

LGTM otherwise ^_^

[owocki]

anyone got a screenshot of what this looks like? or can we put it up on stage?

[MaxStalker]

@thelostone-mc Got it, will update that CSS and prepare images/video capture
@owocki I will provide it together with updates mentioned by Aditya.

[MaxStalker]

Here you can checkout video of responsiveness:
https://www.loom.com/share/4838dd879922492c891263389849bb3f

[thelostone-mc]

^ the font-size comments need to be addressed but other than that looks solid 🙌
could you rebase + conflicts

[MaxStalker]

@thelostone-mc done and done :)

[thelostone-mc]

Ah this is a lil embarrasing ! mind resolving the conflcits one last time ?
we can get this in after that

LGTM

[thelostone-mc]

@MaxStalker ^ Any chance we can get this wrapped up in the next few days ?

[thelostone-mc]

@MaxStalker Ah i think something got messy during the merge with master! we've got 228 commits in this PR now :P

@owocki could use help some help testing this. Checked out only code 😅