Feature/preferences ui tab styling

[kenneth-marut-work]

What it does

Fixes #7768

This PR addresses issue #7768 to only show the preferences tabbar shadow when the editor is scrolled, and also provides some additional styling improvements to the preferences tab bar to be more in-line with VSCode including:

• Moving tab highlight to bottom of tab
• Adding a dividing line below tab bar
• Removing residual 'focus' behavior when the 'folders' tab is selected using a mouse click in a multiroot workspace
  
  

How to test

• Pull changes and open preferences UI in a multi root workspace
• Browse preferences and observe drop shadow behavior tab bar styling improvements when scrolling

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

[kenneth-marut-work]

Known issues:
If preference item in preference tree is selected and preferences UI is closed and reopened, editor scroll location is not preserved and is automatically scrolled to top while tree state is preserved (this will cause the shadow to show even though the editor is scrolled to top). This is related to #7746

[vince-fugnitto]

@kenneth-marut-work do you mind rebasing and squashing your commits before we proceed with the review?

[kenneth-marut-work]

@vince-fugnitto
My mistake! Should be good to go now

[vince-fugnitto]

I verified the changes they look very nice 👍
I see that:

• active tab is properly highlighted
• active tab is now highlighted at the bottom (hover works nicely as well)
• the shadow-border is correctly visible only when scrolling
• verified using multiple themes (light + dark)

[vince-fugnitto]

Merging! Thank you for your contribution @kenneth-marut-work 👍

[kenneth-marut-work]

@vince-fugnitto you're welcome, thanks for the review + merge!