Browser-laptop: Refine the Brave button (look, positioning, feel) on Windows

[bsclifton]

Did you search for similar issues before submitting this one?
Yes

Describe the issue you encountered:
The Brave button (the lion icon) feels awkward on Windows (compared to the macOS version)

Expected behavior:
Solution should match this mockup by @bradleyrichter:

Notice:

• the caption buttons are vertically centered
• lion icon has an additional separator to the right

Related:
Similar to https://github.com/brave/browser-laptop/issues/4591

[bsclifton]

@bradleyrichter When implementing, I discovered an issue with this design:

The caption buttons have their vertical centering throw off on resize ☹️

For a demo, I tried putting the menu UNDER the navigation bar. This looks and feels pretty decent 😄

This is consistent w/ IE behavior too:

What do you all think? (cc: Windows users- @srirambv @jonathansampson). The styles can be updated to look halfway decent (matching Bookmarks Toolbar)

[srirambv]

@bsclifton The file menu popping under the URL bar looks good. +1 for this to go with Windows build.

If this behavior is implemented then I would suggest to disable Always show menu bar.

[bsclifton]

Moving this to 0.12.8; I know @bradleyrichter is still finalizing the placement- I like it under the menus too :smile: It would be good to see what the public thinks

[bsclifton]

Moving to 0.12.9. We did talk over Slack and have worked out an ideal scenario:

• screenshots in original post is accurate
• menu will NOT move beneath the nav bar (this is not standard)
• Brave logo and extensions will go under the caption buttons if menu is being shown

[bsclifton]

Here are some WIP screenshots, cc: @bradleyrichter

no menu w/ magic titlebar

menu w/ magic titlebar

no menu w/ URL bar

menu w/ URL bar

[bsclifton]

Re-opening after testing on Windows 7 (see screenshot)

Working on a fix now...