Web: Unify Modal Designs

[PixelantDesign]

As a user I want a consistent modal across the Gitcoin app, so that I have consistent understanding and expectations on how to interact with them.

Description

Standardize all modals/lightboxes.
Standardize how we communicate that information is being processed. Leverage Tips lightbox background but use new UI style defined in the attached.

Definition of Done

• All modals and waiting states are using Muli Font
• Screens 3 is updated with the look and feel from screenshot 2
• A consistent message is used on how we communicate information processing for fund and issue and for sending tips (screen 1 & 2).
• No major functional changes

Reference Materials

Screenshot 1

Screenshot 2

Screenshot 3

Reviewers

@PixelantDesign

[sethmcleod]

I'll take this one on @PixelantDesign

[gitcoinbot]

__This issue now has a funding of 0.1 ETH (61.94 USD @ $619.39/ETH) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $3419.33 more Funded OSS Work Available at: https://gitcoin.co/explorer

[gitcoinbot]

__Work has been started on the 0.1 ETH (42.23 USD @ $422.33/ETH) funding by__:

1. @sethmcleod

__Please work together__ and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $4442.26 more Funded OSS Work Available at: https://gitcoin.co/explorer

[owocki]

pls disregard the commnetes from gitcoinbot. they were about a 2nd, duplicate, bounty, that i accidently posted

[mkosowsk]

HAS IT GONE ROGUE!??!

[sethmcleod]

I should be able to knock this out today or tomorrow. Was hoping to get to it last week but I've been battling a fever since Thursday and these past few days have been pretty rough.

[mkosowsk]

@sethmcleod feel better!!! 👍

[owocki]

@sethmcleod feel better!

[sethmcleod]

Thank you both! Feeling much better today.

I finally have a chance to knock some of this out; just need some clarity on one of the acceptance criteria. What exactly is expected here @PixelantDesign?

A consistent message is used on how we communicate information processing for fund and issue and for sending tips (screen 1 & 2).

Also, is this what you meant for the second criteria?

Screens 3 is updated with the look and feel from screenshot 2

[sethmcleod]

Here is what the tip screen looks like with the Muli font. I updated some of the text weights and toned down the letter-spacing, which was a bit excessive.

[PixelantDesign]

@sethmcleod looking good!

• On both modals, could we use default button styles from the UI Kit?
• Could we make Send Tip a little smaller? Also looks off centered.
• On screen 3 could we use the same background (apply transparency if needed)?
• Could you also the apply UI Kit font color? It all looks a little light right now
• Remove : after I AM A

Thanks!

[sethmcleod]

Thanks for the feedback @PixelantDesign, here are some comments:

• Sure, I'll update the button styles
• It is actually centered, I guess the emoji width is making it look off. I'll make that text a bit smaller
• I believe we can do that if we make _/get-started_ a separate page vs a modal. Even though the tip page is built to look like a modal, those fancy background styles are being applied to the body element. Are there any objections to using yge to make a similar page feel?
• I'll update the font color
• You got it 👍

After realizing I was a bit behind from master, I went ahead and merged the latest code into my fork. Now I'm running into an error inside my docker container: ModuleNotFoundError: No module named 'environ' even though I see django-environ==0.4.4 in the base requirements file. Any idea why this might be happening? cc @mkosowsk

[mbeacom]

@sethmcleod You need to periodically update the docker image. docker-compose down; docker-compose up -d --build.

[sethmcleod]

Ahh that --build flag is what I was missing. Thanks @mbeacom!

[sethmcleod]

Apologies guys it's been a busy past week for me with client work. I'll push out an update for this asap.

[sethmcleod]

Made some good progress on this today; should have it ready for review before the end of the week.

During the process I spent some time cleaning up the CSS files since I was working with fonts and such. That work turned out to be a lot more than expected, so I've submitted it as a separate PR: https://github.com/gitcoinco/web/pull/775

[sethmcleod]

Here is the updated modal UI based on your feedback @PixelantDesign

• Updated button styles across _yge_ to match UI kit
• Updated heading and body font colors to match UI kit
• Slightly reduced text size of h1 elements
• Reduced extra width on emoji characters

Now in order to finish converting the Get Started modal styles, I need to make a new page that uses the _yge_ assets, similar to /tip. Assuming I have a new template like app/dashboard/templates/yge/get-started.html with the proper markup, how would I setup the rendering of that page? Would I add a section to the file at app/dashboard/views.py, similar to the block on line 64?

Still trying to wrap my head around how Django handles page rendering. Any help is appreciated, thanks!

PR is up for the work done so far, though it's still a work in progress. Feel free to move the technical discussion there: https://github.com/gitcoinco/web/pull/809

[PixelantDesign]

Thanks Seth! @mbeacom @thelostone-mc @owocki Can you all advise on Seth's questions?

[thelostone-mc]

@sethmcleod Yup!! You've got it right

We start with the

• index.html .
  This redirects to /get upon being clicked
• Next we have to define the route /get in url.py where we specify where to template linking would be done retail.views.get_gitcoin
• We link link what to load on that url via TemplateResponse in view.py which is basically this page

^You'd have to create a similar flow. Does this help ? ^_^

[ noob question : @mbeacom how do you render it as a popup ? Didn't find anything there 😅 ]

[owocki]

easiest example to copy would be the addition of the gitcoin.co/gas page ( https://github.com/gitcoinco/web/commit/a946f5c593ae534dc225c626a33c498363c5def0#diff-de5f9bc675b8fd88763d438d8a86b210 )

[sethmcleod]

That's really helpful, thank you both 👍