Re: [pgadmin-hackers] [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

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

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.

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.