Tweak admin redesign 2

[rolf-yoast]

Context

• Ran through the admin restyling with Kai and Rolf, made tweaks where we seemed fit
• Fixed a couple of issues along the way, missing copy, wrongly styled notifications and a lot of spacing

This is linked to Yoast/javascript#751

Todo

Design

• Content types
  • All setting labels to "hide/show"
  • Archives to separate collapsibles
• Width of the content
  • Increase for larger screens
• Search appearance -> Categories
  • Convert Category URLs to a collapsible box
• Tools page
  • Introduce tabs instead of the list
  • Transform the current tabs into collapsibles
• Labels
  • Labels color #444 needs to be #303030
• Buttons
  • Yellow buy buttons font-weight --> 400 (currently 300)
• General feedback
  • Fix WordPress general alerts alignment
  • Fix toggle labels: “hide/show” instead of “yes/no”
  • Inconsistent font sizes: “you have 1 hidden problem” is on 1.4em, and “you have 1 hidden notification” is on 16px.
  • General > Features > “Upgrade to premium”, should be “Upgrade to Premium”
• Every option page
  • Settings saved layout
• Twitter card
  • Convert to radio buttons
• Schema person/company
  • Convert to radio buttons
• Toggles
  • Make the labels clickable (Yes/No)
• Features page
  • Move the "upsell button" inside the paper

Mobile design

• Walk through and fix tweaking implications

General finishing up

• Documentation on this PR: Specify what has been fixed/changed

Summary

This PR can be summarized in the following changelog entry:

• Visual tweaks to the admin-settings pages

Relevant technical choices:

• N/A

Test instructions

This PR can be tested by following these steps:

• Use yarn link-monorepo and check out the branch of that PR
• Use grunt build:js build:css in the Plugin to build the assets after linking and checking out the branch on the monorepo.
• Walk through all settings pages and check if they are good enough.
• Note: Notification center styling is off; needs to be fixed

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Documentation

• I have written documentation for this change.

Quality assurance

• I have tested this code to the best of my abilities
• I have added unittests to verify the code works as intended

Fixes #

[moorscode]

The added styling currently breaks the layout of the collapsibles:

[moorscode]

Also for Archives there is no padding.
Use the Test Helper to enabled these books/movies and their archives.

[moorscode]

The upsell looks good 👍

[moorscode]

Looks good 👍