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

Add UI updates on Campaign cards and Inline Donation component #1500

Merged
merged 8 commits into from
Jul 20, 2023

Conversation

ani-kalpachka
Copy link
Member

@ani-kalpachka ani-kalpachka commented Jul 18, 2023

  • Updated progress bar:
Before After
image image
  • Made the whole campaign card a link (currently on prod only the image is a link to campaign details).

  • Added hover effect on the card.

  • Aligned Donate button.

  • Add space above active campaigns.

  • Updated campaign cards' spacings.

  • Fixed console error caused by button tag inside a button tag:
    image

  • Removed unnecessary white space above campaigns title:
    image

  • Separated money unit from money fraction in InlineDonation component:

Before After
image image

TODO: Add "лв' currency for BG locale.

The changes are discussed with the design team.

@ani-kalpachka ani-kalpachka changed the title Update campaign cards Update Campaign cards Jul 18, 2023
@ani-kalpachka ani-kalpachka marked this pull request as ready for review July 18, 2023 19:51
@ani-kalpachka ani-kalpachka changed the title Update Campaign cards Add UI updates on Campaign cards and Inline Donation component Jul 18, 2023
@@ -38,6 +38,7 @@
"@mui/x-date-pickers": "^6.5.0",
"@next/font": "^13.0.5",
"@paypal/react-paypal-js": "^7.8.1",
"@ramonak/react-progress-bar": "^5.0.3",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is a new progress bar package needed?

Copy link
Member Author

@ani-kalpachka ani-kalpachka Jul 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sashko9807
I was not able to achieve this effect:
image

with the Progress bar provided from MUI (https://mui.com/material-ui/react-progress/).

Probably there is a way to do it but it would overcomplicate the logic.
If you think we should avoid the library, please share alternative ideas.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had the same question but, now that we have the answer - all good. Later we can remove it if we find a way to do it without separate library.

@igoychev igoychev merged commit b591c28 into master Jul 20, 2023
@igoychev igoychev deleted the update-campaign-cards branch July 20, 2023 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants