UI issues on project details page.

[mosaeedi]

UI Adjustments

1. There is a 24px gap between each row.
   Right now, we have different gap between each row, all of them should be just 24px.

2. Please reduce this gap to 8px.

3. Please remove the "Learn more about donating on Giveth > " from this card.

4.1. The "SHARE" button should be in camel-case "Share".
4.2. The bookmark icon should use Gray/700 as color.

5. Instead of listing the eligible network in text, please change it to icons,
   Please note: By default, all network icons appear in grayscale, and just when the user hovers over them, they should turn into the colorful version.
   Please note: the icons by default should have a 40% opacity, and just on hover the opacity should increase to 100%.
   Please let me know if we can use CSS to turn them into grayscale, or if I have to provide two versions!

6. The project banner should have a 430px height, right now it's about 510px!

Design asset is here

Link to Figma

[laurenluz]

Hey @divine-comedian - since Cherik is on vacation, who can we pass this too?

[divine-comedian]

@mosaeedi

for the boost button we should consider variations of this button that we show under certain conditions, consider this for example:

We recently had to change the fixed width of this because the text is obviously much longer than the "Boost" one

[mosaeedi]

Where does this one come from? can you share the link to Figma with me?

[divine-comedian]

@mosaeedi no Figma - we needed to change the copy from this issue
#4597

[mosaeedi]

@divine-comedian These UI issues are important to fix! Can we do it sooner?

[divine-comedian]

@divine-comedian These UI issues are important to fix! Can we do it sooner?

Can you please update your issue to remove the fixed width for the boost button. This will prevent Developers from mistakenly reverting the change we made.

[divine-comedian]

@lovelgeorge99 do you have bandwidth to check into this?

[lovelgeorge99]

@divine-comedian Yes, I will try to finish it by tomorrow

[mosaeedi]

@divine-comedian Yes, I will try to finish it by tomorrow

Please let me know when you made any changes I can quickly do the design QA.
Thanks.

[lovelgeorge99]

@divine-comedian Yes, I will try to finish it by tomorrow

Please let me know when you made any changes I can quickly do the design QA. Thanks.

I have made changes for 1,2,3,4 and 6...and pushed the PR for review ...will fix 5 by today

[lovelgeorge99]

@mosaeedi for the logo's of supported networks can u provide the size of each logo..as i cannot see in figma

[mosaeedi]

Hey @lovelgeorge99 , The size of each icon is 24px X 24px

@RamRamez already developed this piece for the Donation page, maybe we can reuse the same component over here! the design is shared between the project details and the donation page.

[lovelgeorge99]

Hey @lovelgeorge99 , The size of each icon is 24px X 24px

@RamRamez already developed this piece for the Donation page, maybe we can reuse the same component over here! the design is shared between the project details and the donation page.

ok thank you

[RamRamez]

Yes, we have that component, @lovelgeorge99 you can check QFEligibleNetworks component on donate page.
It will be shown on donate page only when project is in the current QF round.