Component: Donation payment buttons

[CatherineKiiru]

Description

In the donate landing section, there are three buttons we need as reusable components design.

Components needed

• [ ] Donate with PayPal button
• [ ] Use a Debit/Credit card button
• [ ] Make a Bank Transfer button

Good Practice

• Ensure accessibility in elements & images - read more here on how to improve accessibility in your project
• Include type safety where necessary
• Should be mobile responsive
• Write tests (We're using React Testing Library & Vitest)

[jimthedev]

I worked on this a bit on a fork. A few questions / things I noticed:

1. Just wanted to confirm: Is the desire for no rounded borders on the donation buttons as in the mockup?
2. In the mock ups, the font for the entire page looks like a much lower weight than is currently in the codebase (which appears bolder, generally). Does anyone know if that is intentional? If so, would that font change be handled in a future PR?
3. I could not find an svg for omprakash so will probably need to use a .png file.
4. It looks like the colors for the page are changed? I am seeing #DFCDE8 in the mockups but in the codebase currently I am seeing "bg-rosemary-50" being used which is #f2ecf5. Again, I just didn't want to make any changes to colors if that was going to be made in another PR / code change.

Thanks!

[jtfairbank]

hey @jimthedev sorry for missing these questions!

For some general context- we've ported code over from our old site which used Gatsby / Tailwind. The new site uses NextJS and Radix UI as the primary style library, with some tailwind sprinkled ontop if necessary. Going for progress and code clarity over pixel perfection.

1. Yes! I'd recommend following the designs as best you can while keeping the code simple. In this case, the radius property on Radix's Button component should do the trick.
2. This is likely due to the changover on style libraries. The new designs are all based on Radix, would recommend making an issue to tackle this wholistically in a future PR, likely using a high-level Radix Theme component in a template file to set sitewide defaults.
3. Sounds good! I can ask them for an svg, but let's make that an issue to tackle later if the png works for now?
4. Yes, we did update our colors as part of this site relaunch. You can see the updated colors in these stylesheets. You can set those colors generally using Radix's Theme component (which can be layered in at any level of the code, not just top level). Many components also have a color attribute. Finally, if necessary you might need to use Tailwind or directly set the colors for complex use cases, but I'd try to avoid this as much as possible. See the donate page's Campaign Card component for an example of this. It's also ok to break with the designs to keep the code simple and we can re-evaluate in an iteration if necessary.