Browser-laptop: Update styles for Bookmark Manager

[bsclifton]

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

Describe the issue you encountered:
The bookmark manager looks bland. Using the history page as an example, it could use some styling updates.

Expected behavior:
about:bookmarks should look and feel nicer

• Platform (Win7, 8, 10? macOS? Linux distro?):
  All
• Brave Version:
  All
• Screenshot if needed:
• Any related issues:
  https://github.com/brave/browser-laptop/issues/1005

[bsclifton]

Current WIP screenshot...

cc: @bradleyrichter

[neeklamy]

That’s a lot of vertical space going to waste. Some thoughts:

• Why is “Bookmark Manager” being repeated on the page? It’s already in the title bar and tab.
• Why does the “Import browser data” button have such prominence? It will likely be used once, and being positioned next to the search bar makes it look like it’s somehow related too.
• Why are there headings? “Folders” and “Organize”, it should be self-explanatory without.

Here’s my modest proposal for a tighter fit (there’s a whole lot people using smaller 12" portables these days with very little vertical screen estate):

[bradleyrichter]

It does need some adjustment from it's parent - about:history.

I'm still working on the design but for now, let's keep the title for consistency, just making the header much shorter. The title is helpful when you have the tab on the far right by chance, or when getting a mouse-hover preview.

[bsclifton]

Updated WIP screenshot :smile: Will have this wrapped up today

[bradleyrichter]

@bsclifton Here is a condensed version to reduce the top height and eliminate the need for the orange area labels.

The icons in the column headers are shortcut buttons for creating a new folder, import bookmarks, or add a new bookmark within the selected folder.

Other changes/additions:

• smaller title
• shorter header
• top labels go away and folder column gets a list header
• import button becomes an icon button in the folder list header
• search box moves to align-right
• selection color for folder is light grey
• selected folder text style is bold
• selected folder icon is open
• folder list line spacing is tighter
• new-folder and new-bookmark icons are nested in headers