Re: [Design update] Style guide for pgAdmin4

On Wed, May 3, 2017 at 4:27 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:

> Hi
>
> On Tue, May 2, 2017 at 8:47 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:
>
>> Hello!
>>
>> *Update on colors*
>> As of now, there are several greys are very similar, used across multiple
>> areas of pgAdmin with no overlaps on color.
>> [image: greys-in-pgAdmin.png]
>> Here are the greys organized by scale, with the narrowed down greys
>> underneath:
>> [image: v1- palette.png]
>>
>> The palette of 6 greys is flexible enough to be used across all the areas
>> within pgAdmin, and easier to map consistency.
>>
>
> OK.
>
>
>> [image: v1.png]
>> Here's what it looks like with the 6 greys
>>
>> *Dropdown menus*
>> Change from having white hover to dark grey, keeps text color the same
>> [image: Screen Shot 2017-05-02 at 11.35.54 AM.png]
>>
>
> That looks fine to me.
>
>
>>
>> *Query tool*
>> [image: greys-v2 (1).png]
>>
>
> I *really* don't like the dark gray on the grid header - it's too imposing
> and grabs the eye away from the data. How would it look if we used the
> lighter gray that is seen on the row headers (the first column)? Looking at
> Excel, it uses the same colour for both the row and the column headers,
> though it's more like the bluish colour we're using for alternate rows (not
> that we should use that - see below).
>

>
>
>> I think some interesting things with color contrast are introduced once
>> we look at the uneditable query editor as accessed through 'View all Data'.
>> [image: viewalldata-greys (2).png]
>>
> I'm not overly convinced about the gray used for the codemirror gutter. It
> looks a little blue. Regarding the inactive edit area, I don't think that
> looks wrong (unlike one of the earlier drafts where the info bar was the
> same colour). However, I'm not against changing it.
>
>
We can address this either by changing the greys in the results table, or
>> changing the grey in the query editor. As of now, I think changing the
>> query editor grey might work better to make sure that when columns are
>> selected in the 'Data Output' panel, they stand out with the blue.
>>
>> If we lighten the editor table and fade out the text in the editor, it
>> would look like this:
>> [image: viewalldata-lightgrey-opacity.png]
>>
>
> I could live with that (assuming the loss of focus/definition is an
> artefact of the mockup).
>
>
Yes, I've been editing colors within Chrome inspector and taking
screenshots.

> So to summarise:
>
> - I'm happy to see the number of grays reduced as proposed.
> - I don't like the dark gray column headers.
> - I think the column and row headers should be the same colour.
> - I think we should review the bluish-gray used for the codemirror gutter
> (though, it looks fine for the alternate rows)
> - We should use a light-gray for the disabled codemirror, with slightly
> faded text.
>
> What do you think?
>
>
Gotcha. Here's the query tool with the same grey as the row header.
[image: view results- same greys.png]
I quite like this grey as a header.

And in the 'View all Data'
[image: view all data- greys.png]
I made the codemirror and codemirror gutter the same color with a 50%
opacity on the text. It looks like its lighter in the 'View all data'
mockup, but that's because the codemirror being grey makes the gutter lose
contrast.

I'm not sure why it looks bluish grey for you, it's a neutral grey both
times (#f9f9f9). Perhaps try editing the color in Chrome Inspector to see
if it makes a difference?