Adding a donate button to the banner

[manics]

Attempting to add a donate button (#2156)

This is based on the launch button but white on yellow isn't very visible (which is perhaps also a problem for the launch button!)

[betatim]

What do you think about making the call to action "donate .." or something else that makes it clear this isn't about "supporting" in the many ways that is possible with open-source projects but only about money? My thinking was that in the context of an open-source project my first thought isn't "financial donation" when I see a "support this project" link. Instead I expect it to contain information about PRs, bugs, forum, how to contribute, etc and maybe info about donations. This made me think shouldd we make the label of the button super obviously about "helping with cash", so that those who are looking for a button like that know to click it? The main goal would be to make it easier to find the button if you are looking for it.

[minrk]

btn btn-primary has better contrast, if you want to try that

[minrk]

Maybe the link should be to @choldgraf's new support My Binder page?

[choldgraf]

re: colors, we could try Binder's tertiary color (the pinkish reddish color) - that may stand out a bit more?

I also agree we should add a little icon to it, like a heart or a "pray" emoji or something like that.

I'm 50/50 on whether it's better to direct to the "support binder" page in our docs, vs. just going straight to a donation page. On one hand, the support binder page has more context and might be able to draw in different kinds of support. On the other, the more clicks we require before a person actually donates, the less likely they'll be to do it...

[choldgraf]

Question: Should we list "supporters of mybinder.org" on this home page, or use our support page for this?

[manics]

I tried @choldgraf's suggestion of using the other mybinder colours
#e66581 I quite like this one!

#579aca For comparison

With a slight darkening onmouseover (difficult to see side by side, but obvious when it changes under your cursor):

Not sure either about whether to go straight to the donation page or to go to the about pages...
However is there any chance we could update https://numfocus.salsalabs.org/donate-to-binder/index.html with a link back to https://mybinder.readthedocs.io/en/latest/about/support.html, and also replace the low-res PNG logo with the SVG from https://mybinder.org/static/logo.svg ?

Also I've update the text as @betatim suggested

[choldgraf]

Nice! Thanks for these updates - a few quick thoughts:

• I like the red, I think it's more noticeable.
• I think two hearts might be a bit much - maybe just the heart to the left?
• One idea: we could try a button background of #579aca and a heart color of #e66581
• I like the idea of linking to the donation page directly, and that page having some of our own text that explains what donations are used for, and links back to support.
• I've asked Lisa @ NumFocus how we can update that text + the logo, will get back w/ a response

[manics]

Here's a few colour combinations:

I think the pink background with white heart, and blue background with pink heart, are both good.

[choldgraf]

I agree with your assessment (also, thanks so much for putting them all together).

I think in the name of simplicity, my vote would be for pink with white heart

[choldgraf]

I'll also update the binder docs with a button of the same style once we finalize something, so we can have some consistency

[minrk]

👍 to pink with white

[manics]

This should be ready now! Unless we want to try and implement this by overriding a template (jupyterhub/binderhub#1472). It would be much cleaner since we could hopefully use CSS classes, including the :hover selector instead of javascript onmouse* handlers.

[choldgraf]

This looks good to me - we can iterate later to improve things as well, IMO (e.g., when we add a below-the-fold list of supporters?)

If there's a "better" implementation and you'd like to do that instead of this one, I'm fine with that too now that we know the look-and-feel of the button that we'd like, but don't want to block progress just because there's a slightly better way to do it :-)

[manics]

I don't know exactly how to convert this to a template override in the Helm chart.... if no-one else can quickly convert it then probably best to leave it for the future?

[choldgraf]

Hmmm - I didn't realize that the button was flush with the top of the screen...I feel like it would be better if it were centered with the other banner content. I'm not sure how to do this with BinderHub CSS, but I think these are the rules we'd need:

#banner-container {
    padding: 8px;  /* To prevent the container from being much bigger */
}

#banner-container > div {
    align-items: center;  /* Center all items in the div vertically */
}

#banner-container .btn {
    margin-top: unset;  /* to cause centering via the flexbox rather than manually specifying.
}

[manics]

@choldgraf That was intentional, the default header css has padding: 16px
https://github.com/jupyterhub/binderhub/blob/0b49d3aa9e8e59cc1d8904a505cb0eb98b8510ab/binderhub/static/index.css#L56
so adding the image without reducing the top padding leads to a header bar which tkes up too much vertical space:

We can't override the parent container CSS using a style in banner_message since it's rendered inside the banner-container div, there are some hacky ways we could do it but I think we're better off investing time in overriding the whole template using jupyterhub/binderhub#1472 (assuming we can!)

[manics]

Actually another option could be a new c.BinderHub.css_overrides configurable that gets inserted into the template <head> after https://github.com/jupyterhub/binderhub/blob/0b49d3aa9e8e59cc1d8904a505cb0eb98b8510ab/binderhub/templates/page.html#L17