Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI issues on project details page. #4726

Closed
mosaeedi opened this issue Sep 11, 2024 · 14 comments
Closed

UI issues on project details page. #4726

mosaeedi opened this issue Sep 11, 2024 · 14 comments
Assignees

Comments

@mosaeedi
Copy link
Collaborator

mosaeedi commented Sep 11, 2024

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.
Screenshot 2024-09-11 at 8 28 20 PM
  1. Please reduce this gap to 8px.
Screenshot 2024-09-11 at 8 29 19 PM
  1. Please remove the "Learn more about donating on Giveth > " from this card.
Screenshot 2024-09-11 at 8 31 54 PM

4.1. The "SHARE" button should be in camel-case "Share".
4.2. The bookmark icon should use Gray/700 as color.
Screenshot 2024-09-11 at 8 32 58 PM

  1. 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!
Screenshot 2024-09-11 at 8 35 29 PM
  1. The project banner should have a 430px height, right now it's about 510px!
Screenshot 2024-09-11 at 8 46 22 PM

Design asset is here

Link to Figma

@laurenluz
Copy link
Member

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

@divine-comedian
Copy link
Contributor

@mosaeedi

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

image

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

@divine-comedian divine-comedian moved this from New Issues to Design in All-Devs Sep 12, 2024
@mosaeedi
Copy link
Collaborator Author

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

@divine-comedian
Copy link
Contributor

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

@mosaeedi
Copy link
Collaborator Author

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

@divine-comedian
Copy link
Contributor

@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
Copy link
Contributor

@lovelgeorge99 do you have bandwidth to check into this?

@divine-comedian divine-comedian moved this from Design to Product Backlog in All-Devs Sep 22, 2024
@lovelgeorge99
Copy link
Collaborator

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

@mosaeedi
Copy link
Collaborator Author

@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
Copy link
Collaborator

@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
Copy link
Collaborator

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

@mosaeedi
Copy link
Collaborator Author

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
Copy link
Collaborator

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
Copy link
Collaborator

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.

@kkatusic kkatusic moved this from Product Backlog to QA in All-Devs Oct 28, 2024
@maryjaf maryjaf moved this from QA to Done in All-Devs Nov 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

No branches or pull requests

6 participants