GiveWP front-end tweaks

[kaylima]

Go to: https://inn.org/donation-form-2-0/

1. RESULT:

Something wonky is happening with the "State" field where it's not tall enough.

EXPECT: have the field height match the field next to it so you can see the "state" label.

2. RESULT: Button style = bold font and lots of padding EXPECT: Button font = regular weight and 10px padding all around.

2. RESULT: Donation amount at top of the form is on it's own line EXPECT: If possible, ombine onto the same line as donation level or put them side-by-side buttons to save space. For example, this would be the right side:

Let me know if you run into any issues with this or want to strategize how it looks! Thanks.

[joshdarby]

Something wonky is happening with the "State" field where it's not tall enough.

@kaylima What browser/width do you see that happening on? It might be because the state field is a dropdown instead of a text input

[joshdarby]

2. RESULT: Donation amount at top of the form is on it's own line EXPECT: If possible, ombine onto the same line as donation level or put them side-by-side buttons to save space. For example, this would be the right side:

@kaylima Same question as above: what screen size and browser are you seeing that on? I see the custom amount button on the same line as the others from 886px and up

[kaylima]

@joshdarby the state issue is happening on my laptop on Chrome. Maybe it's a bug? we can screenshare if needed to figure that out...

re: the donation items. the image I sent you was an example of what could be created so that the amount would be on the left. I don't know what size I grabbed it at, but it was likely mobile size....

It's on 1 line most of the time for me, too.

[joshdarby]

the state issue is happening on my laptop on Chrome. Maybe it's a bug? we can screenshare if needed to figure that out...

@kaylima Yea, screensharing might be a good idea here to save time.

[kaylima]

Next round of front-end updates:

1. New reverse widget styling:

#sidebar .widget.rev {
padding: 24px;
border: 8px solid #0089bb;
font-family: "Merriweather", georgia, serif;
font-weight: 300;
}

2. Update the Give buttons for our new donate page

• Make the padding 12px for all Give buttons.

• Make the "DONATE NOW" button at the bottom of the form orange (#ff8b4d), it's currently blue.

• The donation levels at the top of the form can stay blue!

3. Go to inn.org and look at the donate/subscribe buttons in top right, orange. RESULT:

EXPECT: "DONATE" - same orange color "SUBSCRIBE TO OUR NEWSLETTERS" - blue (make the button plural, right now it says "newsletter", singular)

Let me know if you have any Qs!

[benlk]

1: widget styles

For the reverse widget styling, I'm guessing that you'll want to change the background color and font colors to match the new blue border?

2:

https://github.com/INN/inn/pull/128 has been deployed to staging, with a recreation of the live form now available for review at https://inndev.staging.wpengine.com/?page_id=862706&preview=true

3: header buttons

Now on https://inndev.staging.wpengine.com; I'm assuming that we do not want to have mismatched button heights. Should this be solved by making the shorter button taller, or by changing the text on the buttons?

[benlk]

Now :deployed: with https://github.com/INN/umbrella-inndev/commit/0928f09592d4f90dc6ff6926b90550051ad8c4e2