Re: [Design update] Style guide for pgAdmin4

One more thing: there are two very close greens between notifiers and
toggle buttons in preferences menus

[image: notifications_switches.png]

I recommend documenting the green for switches (#5cb85c), which would
change notifiers from this:

[image: Notifiers.png]

to this:
[image: Screen Shot 2017-04-20 at 5.28.55 PM.png]
On Fri, Apr 21, 2017 at 2:27 PM Shirley Wang <swang(at)pivotal(dot)io> wrote:

> Hello
>
>
>>>>> Please feel free to edit the Sketch file- my only ask is new versions
>>>>> hare named accordingly.
>>>>>
>>>>
>>>> Is this the app you used? https://www.sketchapp.com/
>>>>
>>>
>>> Yes. Also, I recognize it's probably not the best tool, given that
>>> there's a 30 day free trial and then you need to purchase a license. I'm
>>> looking into other programs that are free.
>>>
>>
>> FYI, we use LucidCharts internally. It's a pretty good Google Apps
>> integrated version of Microsoft Visio.
>>
>
> Ah ok. Do you have any files related to pgAdmin you can share (or put into
> Google drive folder)?
>
>
>>
>>
>>>
>>>
>>>
>>>> Some initial thoughts on the inventory:
>>>>
>>>> - Wow, that's a lot of colours. I didn't realise we had so many. I
>>>> think we need to work that down to a set of a dozen or less primary colours.
>>>>
>>>
>>> Me neither! I'm not so concerned with the number of different colors,
>>> but with the number of similar shades of each color.
>>>
>>> I can distill those down and send another email shortly.
>>>
>>>
>>>>
>>>>
>>> - I wouldn't worry about the button colour borders and gradients too
>>>> much. Those are standard bootstrap colours, so we should document them in
>>>> terms of bootstrap styles, not colour components.
>>>>
>>>
>>> Ok. But are they appropriate for this app?
>>>
>>
>> Personally I think they're fine.
>>
>
> They seem ok for buttons (cancel, save, reset, toolbar). I found the
> gradient is also on alerts when you click Dependencies, Dependents while
> selecting Server in the browser.
>
> I think those alerts should not have a gradient to match with the other
> types of alerts (notifiers and error messages). Since these specific alerts
> are not success / fail messages, the blue works because it's a neutral
> color.
>
> [image: highlight_selection color.png]
> Here is what the updated colors would look like in the app.
>
> *Focus on text field in nodes*
> [image: Screen Shot 2017-04-21 at 12.13.53 PM.png]
>
> *Browser*
>
> *[image: Screen Shot 2017-04-21 at 12.14.55 PM.png]*
>
> *Highlight in dropdown menu*
>
> *[image: Screen Shot 2017-04-21 at 12.19.51 PM.png]*
>
> *Alerts* [image: Screen Shot 2017-04-21 at 11.29.11 AM.png]
> If this is ok, we will add these changes to our backlog as style changes.
>