Re: [Design update] Style guide for pgAdmin4

Hello!

*Update on alerts*
Here are mockups of error and update alert styles, as modeled by bootstrap.

Success messages appear
- after running a query
- adding a database (database connected)

Error messages appear
- after running query
- missing info in dialogs

Let me know if I'm missing any areas that have different styling.

*Running a query*
*[image: success-query.png]*
[image: error-query.png]
I've added rounded corners - it doesn't seem like there are any other areas
where sharp corners are used so I think these should be round.

*Dialog messages*

*[image: database-error.png]*

*[image: connectserver-error.png]*

A note about 'connect to server' message. Currently the error appears above
where you enter a password. I think all messages should live at the bottom
of the dialog, above the buttons.
(below is current error message)
[image: Screen Shot 2017-04-25 at 10.30.57 AM.png]

*Update on tools*
I played around with Lucidcharts and it seems like the only units available
for drawing out shapes are inches or centimeters, neither of which is
particularly useful for specifying sizes of buttons, menus etc.

I found Figma, which is a fairly feature robust web app, similar to Sketch
and designed for collaboration (it's also free!). Other pros:
- saved asset library for projects (perfect for mocking up future pgAdmin
screens w/o the need to recreate assets)
- version control
- link for public access
- generates some CSS from the image

Here's the link to the project.
https://www.figma.com/file/UjGekp34w6iBizjlGu2D4ccp/4.21pgAdmin-styles-Page-1

Let me know what you think.

Shirley