UI - update tabs view

[AsmaaNabilBakr]

Closes #3918

What changed?

• update tabs view style to be consistent with the design

Before:

After:

[joshri]

It looks like there wasn't a design for this in Dark Mode, but imo the double underline doesn't look quite right @mmoulian @alfaris I want to make sure this is design approved

There's an unused import of Spacer in SubRouterTabs that needs to be deleted for CI to pass

[alfaris]

@joshri the double line in new tabs is approved
you could check this issue #3918

[joshri]

@alfaris I looked at the issue as well as the figma doc before reviewing, and there is no reference to what the colors should be in dark mode. Please add so we can reference in reviews in the future. Glad to hear it's approved

[mmoulian]

@alfaris and @joshri The double line in Dark mode is also strange to me. I think that we can review it

I want to give design the chance to edit what this looks like in dark mode - let's not merge this just yet

[TheGostKasper]

@mmoulian @joshri any concerns to merge !?

[joshri]

@mmoulian @joshri any concerns to merge !?

Yes we are waiting on a design update on this

[mmoulian]

I think that this option has more votes:

Design link: https://www.figma.com/file/IVHnM9iyeFWpd11evtY8ux/Weave-GitOps?type=design&node-id=19761%3A1314&mode=design&t=OpngzkBWT6aapjtm-1

[TheGostKasper]

@alfaris @mmoulian just to make sure that tab container will have a border bottom and each tab item will also has a border line of maybe 2px , Doesn't it feels weird ?

[alfaris]

@alfaris @mmoulian just to make sure that tab container will have a border bottom and each tab item will also has a border line of maybe 2px , Doesn't it feels weird ?

We can make every tab have 1px gray bottom line and only the active one have it 2px colored with our primary color whether it's light or dark mode

[AsmaaNabilBakr]

@alfaris @mmoulian @joshri I updated the PR with the new screenshots, kindly confirm.