NTP Refinement

[rossmoody]

fixes brave/brave-browser#2504
fixes brave/brave-browser#1779
fixes brave/brave-browser#494
fixes brave/brave-browser#1034
fixes brave/brave-browser#341
fixes brave/brave-browser#1593
fixes brave/brave-browser#1876

This started as a PR to replace NTP background images only but I noticed lots of small polish items that needed addressed. A mockup of all 16 new images is below as well as a before and after of changes + updated responsive behavior.

Most of these changes are still not optimal but I imagine the NTP is slated for a larger refactor in correlation with Brave UI workflow when time allows. This is just to fix things that feel outright wrong and distance the image selection from Muon.

Updates

• Replaced all 20 Muon images on the NTP page with 16 new images. Since there was issues with compression and image size, I removed 4 images from the batch in order to allow the remaining 16 to be slightly higher quality. At @petemill's suggestion, the format was switched from JPG to webp to save an additional 25% percent file size.
• Most images gathered this round (and future rounds) didn't have a title so it was omitted from the photo credit. IME the titles lead to typos and mistakes that need constantly maintained and really elongate the time to upload new images so we can bring it back but it makes changing images much more time consuming.
• Swapped the star icon for a bookmark icon in the top sites tiles to be inline with toolbar
• updated the icons in the bottom right corner. also updated hover behavior and sizing to fix some issues that reverted resulting in icons turning grey on hover
• top site tile styling was updated to be a little more rounded and subtle while interacting
• top site tiles was moved to align left. this is for multiple reasons but the biggest are for a better experience when resizing the window since most people resize from the bottom right. the other is that the top site tiles were populating from the middle of the page and so very often (especially in the beginning of using Brave) the tiles would just float in the middle of the screen without an anchor
• updated some breakpoint functionality to stop odd behavior and format a little nicer as it scales down
• deprecated the use of fontawesome icons for our own

[petemill]

Initial code review pass looks great - thanks for putting all that painstaking work in to tweak everything @rossmoody!

As discussed we'll let the code format changes to non-changed code slide since it's hard to undo, but now we know for future that it makes it more difficult to review when unrelated blocks of code changes.

I'll need to get a build going to take a 2nd pass.

I left some comments on cleaning up dead code, and more usefully seeing if we can remove font-awesome by putting in 2 svg files (ours or theirs). I can help on the hopefully minor css changes that that may necessitate. If it's a pain, we can certainly do that as a follow-up.

Also I wanted to ask - are the licenses for these 16 new images permissive for us to bundle and use like this? Do we need to check with someone that knows these things better than I do?

[rossmoody]

@petemill Changes updated including the icon swaps from fontawesome. Omitted dead code and made a few additional updates to facilitate the new icons.

We are good to go on the imagery rights front. These are pulled from Unsplash, Pexel, and SpaceX Flickr which all grant commercial licenses(spacex is public domain). 3 other images are from a photographer (Will Christiansen) that reached out through business dev and granted us license to use with credit (which we do anyway).

[cezaraugusto]

++ lots of bugs fixed! great job on this one, Ross. NTP is looking 👌

[cezaraugusto]

we are so cool with webp

feedback addressed by the author

[cezaraugusto]

master b10ed21