Giveth / giveth-dapps-v2

This project is the aggregation of GIVeconomy and Giveth.io DApps in a single repo

https://staging.giveth.io

GNU General Public License v3.0

61 stars 34 forks source link

UI issues on project details page. #4726

Open mosaeedi opened 2 weeks ago

mosaeedi commented 2 weeks ago

UI Adjustments

There is a 24px gap between each row. Right now, we have different gap between each row, all of them should be just 24px.
Please reduce this gap to 8px.

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.

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!

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

Design asset is here

Link to Figma

laurenluz commented 2 weeks ago

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

divine-comedian commented 2 weeks ago

@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 commented 1 week ago

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

divine-comedian commented 1 week ago

@mosaeedi no Figma - we needed to change the copy from this issue https://github.com/Giveth/giveth-dapps-v2/issues/4597

mosaeedi commented 1 week ago

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

divine-comedian commented 1 week ago

@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 commented 1 week ago

@lovelgeorge99 do you have bandwidth to check into this?

lovelgeorge99 commented 1 week ago

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

mosaeedi commented 6 days ago

@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 commented 6 days ago

@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 commented 5 days ago

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

mosaeedi commented 10 hours ago

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 commented 9 hours ago

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 commented 9 hours ago

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.