Tweak desktop settings page design in preparation for upcoming changes

Background / User story

We want to make various changes to the design of the settings page to make it more consistent with the rest of our UI. While that takes some planning and time to get done, we can already make some small tweaks to make the existing design more appealing. Therefore Naser and I agreed on the below changes.

What to change

• Design: N/A
• Research: N/A
• Spec: N/A
• Development:
  • In desktop settings page:
    • Add border-radius of 4px to tabs, tab containers and buttons.
    • Use blue color from bubble UI (i.e. #0797E1).
    • Remove separator lines in sidebar.
    • Add hover effect to non-active tabs (using #EAEAEA).
    • Indent lines that separate the individual sections in the tab content on both sides to align them with the headlines.

Hints for testers

• Icons, text and buttons should use a consistent blue in their default state (i.e. states such as during hover have not been adapted yet) across the following UI pages:
  • Desktop settings page (incl. social icons in Help tab for Chinese users)
  • Issue reporter
  • First-run page
  • Icon popup
• Styles should be correctly applied also for RTL locales.

Hints for translators

N/A

Integration notes

N/A