WIP: Alters grants details page to match the new design

[gdixon]

Description

This PR implements the Grants Details page redesign, it is not yet complete - but all of the design is implemented and functional. I do however need some guidance on the following:

• Where does the "Latest Contributions > View all" link take us? Is that a new page which needs to be produced?
• Is the CLR graph an image or should it be a chart? If it is a chart, how can I calculate the trend?

@PixelantDesign / @willsputra

Refers/Fixes

Refers: #8449

Testing

• Grant which has 0 Contributions & 0 Related Grants

• Grant which has both Contributions & Related Grants - signed in as the Owner

• Mobile view of the same Grant

[willsputra]

@gdixon

Where does the "Latest Contributions > View all" link take us? Is that a new page which needs to be produced?

Yes a new page that shows all contributions. But if it's a high lift, a "Load More" button at the bottom that loads more contributions work too!

Is the CLR graph an image or should it be a chart? If it is a chart, how can I calculate the trend?

The chart shape will be the same for every grant, but the numbers will be our existing "$1 contribution -> $X match" and "$100 contribution -> $Y match"

[thelostone-mc]

@gdixon Yo just listing out scenarios

• grant is not part of an CLR // this means the grant_clrs fks is empty
• grant is not eligible for CLR // toggled via admin
• grant is not active // aka it cannot accept contributions. toggled via admin
• ETH grants show eth address with logo, CELO grants show celo address with logo // cross chain functionality
• grant is active CLR

[thelostone-mc]

Closing this out cause we have wrapped this up 🙌