Re: [Design update] Style guide for pgAdmin4

On Wed, Apr 26, 2017 at 4:14 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:

> Hi!
>
> On Tue, Apr 25, 2017 at 9:33 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:
>
>> 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.
>>
>
> Nice!
>
>
>>
>> *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.
>>
>
> Agreed. I like the change - though I prefer the version in Figma (below):
>
> [image: Screen Shot 2017-04-26 at 09.10.37.png]
>
> I think it looks more attractive, and is more obviously a "transient
> element" (for want of a better term) - i.e. something that will go away
> again. I think we also need to style the error highlighting on the actual
> field to use the same shades of red.
>

Cool. Agree with those points. Let's do that.

Another thing, I was checking if the success and error messages are be
differentiable for people who have Deuteranopia (red-green color
blindness), and it's pretty difficult.

Example:
[image: Screen Shot 2017-04-26 at 10.53.50 AM.png]

I think the addition of icons and some copy would help:
[image: Screen Shot 2017-04-26 at 11.28.41 AM.png][image: Screen Shot
2017-04-26 at 11.28.51 AM.png][image: runquery-success.png]
[image: Screen Shot 2017-04-26 at 11.42.30 AM.png]
[image: run query- fail.png]
[image: Screen Shot 2017-04-26 at 11.42.41 AM.png]
[image: Screen Shot 2017-04-26 at 11.39.05 AM.png]