Improve the tab design

[TomasEng]

Description

I would like to suggest a way to improve the tab design to make it more clear and intuitive for the users.

This is the current design:

There are some details that I find problematic with this:

• The tabs are not clearly, visually tabs. They are just some text over some line, with nothing idicating that it is a tab view with selectable content, apart from the somewhat descreet blue line.
• The active tab is not visually connected to the content, making it difficult to understand that the two elements belong together.
• There is no separation between the content and whatever is around it. When the component is surrounded by other things on a website, it is difficult to understand what makes part of the tab panel. There should be some border, shadow or background to indicate where the tab panel ends.

Here is a draft I made to illustrate how I think we could address all of these issues:

Such a design more closely resembles real-life tabs, making it easier to understand, particularly for users that don't have much experience with digital tools.

Alternatively we could gather inspiration from other tools that solve this nicely, like Chrome or Github:

Additional Information

No response

[Febakke]

Thanks @TomasEng 👏

We agree that in some cases our tabs might not be the best design. I would think that also would be true for a more "tablike" design. We wont prioritize this now, but will look into if we can support more variants or do some design changes to make our tabs better for all cases after version 1 is released 😊

[mrosvik]

Autorisasjon also need to show the tab with a border instead of line. We should consider both designs.

Example: Github also has to variants of tab, one with line, one with border:

Closing #2032 as it is a duplicate of this one.