Create "Fund Grant" Page - Design

[captnseagraves]

User Story

As a Grant funder, I want to contribute funds to a grant so I can support projects that are important to me.

Why Is this Needed

The "Fund Grant" page is needed to allow users to contribute fund on a chosen recurring cycle

Description

Type: Feature

Definition of Done

• Page has an input field for the amount the user wishes to contribute per period.
• Page has an input field for the frequency of their contribution. This defines the "period" of the user's contribution. Should expect a numbered input measured in days.
• Page has a "Contribute" button
• Page displays a Withdrawal History of previous withdrawal activity in the grant_
• Page has standard Gitcoin header and footer
• Design must be on brand, see creative repo for brand guide

Additional Information

To be reviewed with @PixelantDesign @mbeacom @captnseagraves

Existing assets can be found at this PR: #674
More information about the Dev Grants project can be found here: #1469

Please allow the core team a few rounds of revisions.

[captnseagraves]

Assigning @justpixel

[justpixel]

For the "frequency of their contribution" Do you think it will work better a select with day, week, month?

[captnseagraves]

@justpixel I think weekly or monthly would be best.

As addressed on the team call this morning, it probably makes more sense for this view to be a page instead of a modal. Could you iterate on this idea, please?

Also, I think it might more sense for the user to type in the amount they are will to contribute, instead of having the slider. @PixelantDesign thoughts?

[captnseagraves]

Another thought, does this page need a withdrawal history. I'm not sure it does, that might have been a copy/paste error from the withdraw page issue.

[owocki]

per meeting yesterday, we decide to move this to a page instead of modal. other than that, LGTM

[PixelantDesign]

Sliders are cool but it will be frustrating to move it around, trying to get an exact value. Standard input field would be best there.

[justpixel]

The slider has also an text input, but if you think is not necessary I've removed it.
Page updated:

[PixelantDesign]

Looks good!

[justpixel]

Design:

[captnseagraves]

I wonder if we should have the amount of value and the denomination should be in separate fields. How would I choose DAI, ETH, or OMG? This might also be selected by the grant creator. i.e. "I will only accept donations in DAI." Might be a v2 feature. @PixelantDesign @owocki