Create / Stylize Explorer-UserDetails Tab component

[henrypalacios]

closes: #1043

• Create a new component that uses the Tabs as a Base and style it. (path taken)
  • Use theme Provider variables.
  • Ability to use some variants of the thickness of the tab indicator
  • Add an extra content to Tabs.

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[alfetopito]

Looking at the result with the custom theme, doesn't look too far off.

What is the problem you are having?

I have not been able to sync with @biocom yet, but maybe he has any input?

[henrypalacios]

@alfetopito I have create another component using Tabs as a base.

My concern is if I have to edit something to achieve in the future to use the space after the tabs for other components (as well as in design)

[fairlighteth]

@henrypalacios I think given we inherit the Tab component here, I think we need to edit the original component. Perhaps by having specifying different 'Tab' types? E.g. normal vs. special purpose. Remind me what was the design we are trying to implement?

[fairlighteth]

If it's to implement this ^, would the Tab component need to be edited at all? My thinking (correct me if I got the intent wrong):

<>
  <Tabs />
  <Search />
  <Pagination />
  <Filters />
</>

[henrypalacios]

Thanks for you point of view @biocom, Looking at your last comment with the drawing of the boxes, you have hit the point.

Following this:

<>
  <Tabs />
  <Search />
  <Pagination />
  <Filters />
</>

I could place the other components next to the tabs (green box), but I'm not sure if I can get the div with the content tab to stay underneath it at 100%. I will give it a try and keep you posted.

[alongoni]

I think it will work fine! I've made a quick test and looks good:

[henrypalacios]

@alongoni Maybe you can help me make this work.

[alongoni]

We should work on this in a new PR

[alfetopito]

Looking good to me.

Any comments @biocom ?

[fairlighteth]

Looks good based on https://pr561--gpui.review.gnosisdev.com/storybook/?path=/story/explorerapp-explorertabs--default-tabs

One comment is, what happens for mobile/responsive. E.g. the search/filters and tabs would need a solution for that.

One idea is to turn the tabs into a select list/dropdown for mobile. Then column wrap all the items. Example https://ant.design/components/tabs/

Another idea is to only have these items:

• Sticky 'dropdown/select menu' on top (when scrolling).
• Sticky/fixed FILTER button at the bottom -> On click opens search/filtering options (similar to what you see on e-commerce websites).

This would prioritize the initial order details on mobile, and only show the filters on request. I'd be in favor of the latter idea.

[henrypalacios]

Due to last comment, what do you suggest @alfetopito?
Should we keep it here or should I create another PR for this?

[alfetopito]

Due to last comment, what do you suggest @alfetopito?
Should we keep it here or should I create another PR for this?

New PR. Since the desktop version is good to go, I'll merge it.