Community Grants section - Customize apply button and feedback depending on connected address

[Pabl0cks]

Fixes #66

A few notes to check:

• Changed warning and success color tones to match the design, since they were mostly used in Admin pages, that way don't need to define a new color manually for this. (Not sure if that's the right practice tho!)
• Created a new component just to leave all the "messy" conditions there.
• Created a "fake" button for non-bg members, and kept the <Link> for BG members, not sure if that's a good practice.
• At some point I thought it may be a good idea to fix the "Connect" header so you don't have to scroll up to connect, but then I thought that would not be the common use case, and discarded the idea. LMK if you think is needed! 🙌

Hope the code is not too messy, sorry just in case lol

https://www.loom.com/share/baf0788d88514003bc5c1513b2b50f1d?sid=aa38c661-61c3-44a5-8755-b1b2209860d7

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
grants-bg	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 18, 2024 2:09pm

[Pabl0cks]

Changed warning and success color tones to match the design, since they were mostly used in Admin pages, that way don't need to define a new color manually for this. (Not sure if that's the right practice tho!)

I think I'm going to revert that one, the green color looks really bad in some admin actions 😢

[technophile-04]

Tysm @Pabl0cks !! Working great ! Just pushed a couple commits :

1. Cleand / simplified it a bit: inlined the logic for ApplyButton and created FeedBackMessage component just to avoid lot ternaries in parent component itself
2. Centered the "Do you Qualify?" box on mobile
3. Allowed people to connect to wallet from Communtiy Grants sections itself and also added a loader while we are fetching buildersData to from backend to check for eligibility (The on local firebase instance was close to none but on prod there is very small delay)

Demo video :

Screen.Recording.2024-04-18.at.6.49.16.PM.mov

---

Also a small nitpick : Should we decrease padding a bit of left section so that it decrease the height of whole Community section ?

grants.buidlguidl.com/packages/nextjs/app/_components/CommunityGrant.tsx

Line 9 in b26c43b

<div className="my-4 lg:py-16 space-y-2 lg:max-w-[40%] flex flex-col items-center lg:items-start">

Because currently the patches in the right section (Who, Process, Amount etc) seems a bit apart from each other

But yeah maybe we could handle it in different PR 🙌

[carletex]

This is great! Thank you both <33

Pushed a couple of little things. One is to make this better:

Because currently the patches in the right section (Who, Process, Amount etc) seems a bit apart from each other

We can iterate in another PR (still some resolution around 1100 when the patches overlap)

[Pabl0cks]

Thanks @technophile-04 and @carletex for the review!! This one was tough, sorry you had to get your hands dirty!! 😢

Your implementation is much cleaner Shiv, love it!! ❤