UI/sidebar_widget: Improved hierarchy between UI elements in settings sidebar

[ugtthis]

Modified elements:
-No circle/background around "x"
-"x" slightly bigger, and bolder
-Spacing is added below close_btn instead of above
-Only 1 element is white IF pressed versus the "x" and current menu text
-Text is aligned left
-Menu text added left padding to align with "x" close_btn

comparing-sidebar-changes.mp4

Noise in sidebar

To much is grabbing for attention in sidebar when settings is opened up. There is a circle emphasizing the "x" and also the color white making the X stand out while also using that color white to show your active tab/section.
Over using a color to differentiate makes the emphasis less impactful. Ideally one element should be highlighted in white to mark as the "pressed" element. Making it white and with a circle behind it is overkill and adds more noise to the UI.

Why place close_btn top left?

Placing the close_btn in the top left corner is more familiar for users and is where most back/close buttons are found on mobile and web apps making it easier to interact with.

Why left-align text matters for vertical menus?

Aligning menu items to the left helps users eyes scan rapidly in a straight downward motion versus a zigzag motion when using right-aligned text in vertical menus. Link below talks deeper about it. Not a huge deal on its own , but the little things of experiences add up.

https://www.nngroup.com/articles/right-justified-navigation-menus/

New sidebar UI

Old sidebar UI

[github-actions]

It looks like you didn't use one of the Pull Request templates. Please check the contributing docs. Also make sure that you didn't modify any of the checkboxes or headings within the template.

[adeebshihadeh]

Thanks for the PR, but closing as this falls under https://github.com/commaai/openpilot/blob/master/docs/CONTRIBUTING.md#what-doesnt-get-merged

[ugtthis]

Thanks for considering it and checking it out!