Customizer screen options toggle icon isn't aligned and scaled with the info/question mark icon

[paulwilde]

The screen options toggle icon isn't aligned or scaled to look like it was designed to go alongside the question mark icon and as a result it looks a little out of place.

For reference its current state is the top option in my attachment.

I see there being a few ways of going about this:

1. Vertically center the icon (See the second option in my attachment).
2. Vertically center the icon and reduce its size to be the same dimensions as the question mark icon (See the third option in my attachment).
3. Create an alternative smaller gear/advanced icon that's designed specifically to go alongside the question mark icon with the same dimensions.

[paulwilde]

I'm unable to edit my ticket's description, but a 4th option would be to scale up the question mark icon and leave the gear icon as is.

[paulwilde]

folletto actually shared a concept in #core-customize a while back of an alternative icon which works a lot better against the question mark icon.

[afercia]

Comparing some dashicons sizes in icomoon, looks like the question mark one is a bit too small compared also to similar icons:

[celloexpressions]

We can't change the size of the icon with font-size here safely, since it's designed to the 20px grid (until it's reworked to use SVG instead). So I think the only viable option here is to change the icon in dashicons, or just live with the slight size difference and slightly tweak the vertical positioning. It's only off by maybe a pixel or two.

[afercia]

Replying to celloexpressions:

We can't change the size of the icon with font-size here safely, since it's designed to the 20px grid

Agreed, as you can see in the screenshot I've set the icomoon app with a 20px grid. The best option would probably be re-factoring the existing icon or creating an alternative icon.

[celloexpressions]

Calling in @melchoyce and @empireoflight here too.

[valendesigns]

I vote we get the info icon reworked slightly so it's the same size as the other solid round icons.

[EmpireOfLight]

I would just use css for now. Going forward, any recommendations for icon sizing/positioning should show icons in context; i.e., how they are seen in the wp-admin. [edit] i now see the context in @paulwilde fileedit Dashicons are sized explicitly for their context, and when lined up next to eachother may look misaligned or poorly scaled. The ? mark was likely designed for a context where it had to be that small, but I'm not sure. If we make it bigger, we should make sure it doesn't look too big in other places.

[ocean90]

#32930 was marked as a duplicate.

[helen]

I prefer the unobtrusiveness of scaling the gear icon down (for now) - these are things that are accessed maybe once or twice as you're getting going. How small does that make the tap target?

[ocean90]

Replying to helen:

How small does that make the tap target?

Speaking of tap target, they are currently overlapping, see 32733-focus-overlap.png​.

[celloexpressions]

The overlapping tap target was intentional - we would've needed to add much more spacing between the icons to maintain that wide of a target while keeping it center so the focus styling looked okay. But it could certainly be improved.

Is someone interested in making a patch to address some of the issues mentioned here? I don't personally see a huge issue with how the sizing/alignment looks in @ocean90's screenshot, but it could probably be improved slightly.

[hugobaeta]

I agree with @valentedesigns - it makes the most sense to make the info icon the same size as the other round shapes in the icon set.

[hugobaeta]

Following up on a question from @helen, I think the best solution for now (since we can't change the icon font for this release) is to reduce the size of the cog, like experimented in a attachment:

[obenland]

In 33336:

Customize: Align screen options toggle with info icon.

Fixes #32733.

[paulwilde]

The vertical alignment still seems off for me after that commit, though in those screenshots they seem fine. I cannot imagine this having anything to do with the fact that I'm on a HiDPI display.

Changing .customize-screen-options-toggle from top: 4px to top: 2px fixes it for me.

[dipesh.kakadiya]

Fixed vertical alignment

[obenland]

In 33410:

Menus: Account for browsers that set a default margin for buttons.

Fixes #32733.

[afercia]

Not sure why, maybe different operating systems font rendering, but on Windows the Screen Options toggle icon looks a bit too small, see on the left. Increasing the font size to 18px and adjusting the position makes things a bit better. Sorry can't test on a Mac.
Probably not a big deal, reopening just to let you know, close at your will.

[dipesh.kakadiya]

fixed size issue

[obenland]

In 33444:

Menus: Readjust screen options toggle icon.

Third revision. This will let the icon appear slightly bigger than the help
icon on Macs and just slightly smaller on Windows machines. It's a compromise
in every way.

Fixes #32733. Again.

[ryan]

Related vizrec: ​https://make.wordpress.org/flow/2015/06/04/menu-customizer-iphone-6/