From 54d9a12fe46010e42c8e79314ca1254327e71ef2 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Tue, 3 Aug 2021 11:45:30 -0300
Subject: [PATCH 1/8] Adding tab Storybook stories

---
 src/components/common/Tabs/Tabs.stories.tsx | 68 +++++++++++++++++++++
 src/components/common/Tabs/Tabs.tsx         |  3 +-
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/Tabs/Tabs.stories.tsx

diff --git a/src/components/common/Tabs/Tabs.stories.tsx b/src/components/common/Tabs/Tabs.stories.tsx
new file mode 100644
index 000000000..21f9e6d8b
--- /dev/null
+++ b/src/components/common/Tabs/Tabs.stories.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { Meta, Story } from '@storybook/react'
+import { GlobalStyles, NetworkDecorator, ThemeToggler } from 'storybook/decorators'
+
+import Tabs, { getTabTheme, Props as TabsProps } from './Tabs'
+import { DARK_COLOURS } from 'theme'
+
+export default {
+  title: 'Common/Tabs',
+  component: Tabs,
+  decorators: [GlobalStyles, NetworkDecorator, ThemeToggler],
+} as Meta
+
+const tabItems = [
+  {
+    id: 1,
+    tab: 'Tab one',
+    content: <h3>Tab One</h3>,
+  },
+  {
+    id: 2,
+    tab: 'Tab two',
+    content: <h3>Tab Two</h3>,
+  },
+  {
+    id: 3,
+    tab: 'Tab three',
+    content: <h3>Tab Three</h3>,
+  },
+]
+
+const tabDefaultThemeConfig = getTabTheme()
+
+const Template: Story<TabsProps> = (args) => <Tabs {...args} />
+
+export const DefaultTabs = Template.bind({})
+DefaultTabs.args = { tabItems, tabTheme: tabDefaultThemeConfig }
+
+const tabItemsWithoutChild = [
+  {
+    id: 1,
+    tab: 'Orders',
+    content: null,
+  },
+  {
+    id: 2,
+    tab: 'Trades',
+    content: null,
+  },
+]
+
+const tabCustomThemeConfig = getTabTheme({
+  activeBg: 'var(--color-transparent)',
+  activeBgAlt: 'initial',
+  inactiveBg: 'var(--color-transparent)',
+  activeText: DARK_COLOURS.textPrimary1,
+  inactiveText: 'var(--color-text-secondary2)',
+  activeBorder: DARK_COLOURS.orange,
+  inactiveBorder: 'none',
+  fontSize: 'var(--font-size-large)',
+  fontWeight: 'var(--font-weight-bold)',
+  letterSpacing: 'initial',
+  borderRadius: false,
+})
+
+export const CustomizedThemeTabs = Template.bind({})
+CustomizedThemeTabs.args = { tabItems: tabItemsWithoutChild, tabTheme: tabCustomThemeConfig }
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index d1951686a..d6eb5367d 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -26,7 +26,7 @@ export interface TabTheme {
   readonly fontSize: string
   readonly borderRadius: boolean
 }
-interface Props {
+export interface Props {
   readonly tabItems: TabItemInterface[]
   readonly tabTheme: TabTheme
   readonly defaultTab?: TabId
@@ -45,7 +45,6 @@ const Wrapper = styled.div`
     width: 100%;
   }
 `
-
 export const DEFAULT_TAB_THEME: TabTheme = {
   activeBg: 'var(--color-transparent)',
   activeBgAlt: 'initial',

From 2b7936aeae68150f8b03acffb0664d59f1ef76e6 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Tue, 3 Aug 2021 18:10:07 -0300
Subject: [PATCH 2/8] Add ExplorerTabs Component to Explorer App

---
 .../common/ExplorerTabs/ExplorerTab.tsx       | 59 +++++++++++++++++++
 .../ExplorerTabs/ExplorerTabs.stories.tsx     | 32 ++++++++++
 src/components/common/Tabs/TabContent.tsx     |  2 +-
 src/components/common/Tabs/Tabs.stories.tsx   |  6 +-
 4 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
 create mode 100644 src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx

diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
new file mode 100644
index 000000000..e5e4a6332
--- /dev/null
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import Tabs, { getTabTheme, Props as TabsProps } from 'components/common/Tabs/Tabs'
+import { DARK_COLOURS } from 'theme'
+
+const StyledTabs = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 0;
+  border: 1px solid rgba(151, 151, 184, 0.3);
+  border-radius: 4px;
+
+  > div > div.tablist {
+    justify-content: flex-start;
+    border-bottom: 1px solid rgba(151, 151, 184, 0.3);
+    box-sizing: border-box;
+  }
+
+  > div > div.tablist > button {
+    flex: 0 0 auto;
+    min-width: 96px;
+    padding: 12px 0.8rem;
+    line-height: 2;
+    height: auto;
+    font-family: var(--font-default);
+  }
+
+  > div > div:last-of-type {
+    height: 100%;
+  }
+
+  > div > div.tab-content {
+    padding: 20px 16px;
+  }
+`
+const tabCustomThemeConfig = getTabTheme({
+  activeBg: 'var(--color-transparent)',
+  activeBgAlt: 'initial',
+  inactiveBg: 'var(--color-transparent)',
+  activeText: DARK_COLOURS.textPrimary1,
+  inactiveText: 'var(--color-text-secondary2)',
+  activeBorder: DARK_COLOURS.orange,
+  inactiveBorder: 'none',
+  fontSize: 'var(--font-size-large)',
+  fontWeight: 'var(--font-weight-bold)',
+  letterSpacing: 'initial',
+  borderRadius: false,
+})
+
+const ExplorerTabs: React.FC<Omit<TabsProps, 'tabTheme'>> = (props) => {
+  return (
+    <StyledTabs>
+      <Tabs tabTheme={tabCustomThemeConfig} {...props} />
+    </StyledTabs>
+  )
+}
+
+export default ExplorerTabs
diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
new file mode 100644
index 000000000..0a9d5a4e7
--- /dev/null
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Meta, Story } from '@storybook/react/types-6-0'
+import { GlobalStyles, ThemeToggler } from 'storybook/decorators'
+
+import StyledTabs from './ExplorerTab'
+import { Props as TabsProps } from '../../../../../components/common/Tabs/Tabs'
+
+export default {
+  title: 'ExplorerApp/ExplorerTabs',
+  component: StyledTabs,
+  decorators: [GlobalStyles, ThemeToggler],
+} as Meta
+
+const tabItems = [
+  {
+    id: 1,
+    tab: 'Orders',
+    content: <h2>Orders Content</h2>,
+  },
+  {
+    id: 2,
+    tab: 'Trades',
+    content: <h2>Trades Content</h2>,
+  },
+]
+
+const Template: Story<TabsProps> = (args) => <StyledTabs {...args} />
+
+export const DefaultTabs = Template.bind({})
+DefaultTabs.args = { tabItems }
diff --git a/src/components/common/Tabs/TabContent.tsx b/src/components/common/Tabs/TabContent.tsx
index 36aaded4a..a7f9ab57e 100644
--- a/src/components/common/Tabs/TabContent.tsx
+++ b/src/components/common/Tabs/TabContent.tsx
@@ -12,7 +12,7 @@ const TabContent: React.FC<Props> = (props) => {
 
   if (!displayTab) return null
 
-  return <div>{displayTab.content}</div>
+  return <div className="tab-content">{displayTab.content}</div>
 }
 
 export default TabContent
diff --git a/src/components/common/Tabs/Tabs.stories.tsx b/src/components/common/Tabs/Tabs.stories.tsx
index 21f9e6d8b..094ea3603 100644
--- a/src/components/common/Tabs/Tabs.stories.tsx
+++ b/src/components/common/Tabs/Tabs.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Meta, Story } from '@storybook/react'
-import { GlobalStyles, NetworkDecorator, ThemeToggler } from 'storybook/decorators'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import { GlobalStyles, ThemeToggler } from 'storybook/decorators'
 
 import Tabs, { getTabTheme, Props as TabsProps } from './Tabs'
 import { DARK_COLOURS } from 'theme'
@@ -9,7 +9,7 @@ import { DARK_COLOURS } from 'theme'
 export default {
   title: 'Common/Tabs',
   component: Tabs,
-  decorators: [GlobalStyles, NetworkDecorator, ThemeToggler],
+  decorators: [GlobalStyles, ThemeToggler],
 } as Meta
 
 const tabItems = [

From b0a11a0876ed9e9ec54d383fa012d4818f602614 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 4 Aug 2021 15:44:50 -0300
Subject: [PATCH 3/8] Add variants of the Tabs indicator thickness

---
 .../common/ExplorerTabs/ExplorerTab.tsx       |  7 ++++--
 .../ExplorerTabs/ExplorerTabs.stories.tsx     | 25 +++++++++++++++++--
 src/components/common/Tabs/TabItem.tsx        |  2 +-
 src/components/common/Tabs/Tabs.tsx           |  7 ++++++
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
index e5e4a6332..84e842681 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import Tabs, { getTabTheme, Props as TabsProps } from 'components/common/Tabs/Tabs'
+import Tabs, { getTabTheme, Props as TabsProps, IndicatorTabSize } from 'components/common/Tabs/Tabs'
 import { DARK_COLOURS } from 'theme'
 
 const StyledTabs = styled.div`
@@ -46,9 +46,12 @@ const tabCustomThemeConfig = getTabTheme({
   fontWeight: 'var(--font-weight-bold)',
   letterSpacing: 'initial',
   borderRadius: false,
+  indicatorTabSize: IndicatorTabSize.big,
 })
 
-const ExplorerTabs: React.FC<Omit<TabsProps, 'tabTheme'>> = (props) => {
+type ExplorerTabsProps = Omit<TabsProps, 'tabTheme'>
+
+const ExplorerTabs: React.FC<ExplorerTabsProps> = (props) => {
   return (
     <StyledTabs>
       <Tabs tabTheme={tabCustomThemeConfig} {...props} />
diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
index 0a9d5a4e7..24b4d4f2b 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
@@ -17,12 +17,33 @@ const tabItems = [
   {
     id: 1,
     tab: 'Orders',
-    content: <h2>Orders Content</h2>,
+    content: (
+      <div>
+        <h2>Orders Content</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum a orci ac, congue commodo
+          quam. Fusce ac accumsan diam. Nulla facilisi. Pellentesque ullamcorper ullamcorper metus, at viverra turpis
+          tristique vulputate. Ut dictum ac elit sit amet ultricies. Aliquam ultricies ante arcu, maximus malesuada leo
+          dignissim vitae. Nulla facilisi. Quisque sit amet arcu sed nulla hendrerit euismod. Donec gravida sollicitudin
+          libero, a auctor tortor convallis non. Nullam malesuada enim eu sollicitudin sodales. Nullam accumsan, nunc
+          sed ultrices elementum, lorem diam vulputate turpis, a ultrices tortor mauris id mauris. Pellentesque a
+          commodo libero, et convallis leo. Aenean facilisis arcu id magna scelerisque feugiat. Sed accumsan arcu vel
+          consequat lobortis. Proin gravida lacinia massa eu fringilla. Nulla venenatis sodales tempus. Nam convallis
+          justo vitae sollicitudin iaculis. Ut vehicula enim vel interdum varius. Aliquam erat volutpat. Pellentesque
+          sed tellus in dui pulvinar blandit et et elit. Quisque nec metus fringilla, laoreet orci id, scelerisque
+          velit.
+        </p>
+      </div>
+    ),
   },
   {
     id: 2,
     tab: 'Trades',
-    content: <h2>Trades Content</h2>,
+    content: (
+      <>
+        <h2>Trades Content</h2>
+      </>
+    ),
   },
 ]
 
diff --git a/src/components/common/Tabs/TabItem.tsx b/src/components/common/Tabs/TabItem.tsx
index d3b159aa7..e79c09448 100644
--- a/src/components/common/Tabs/TabItem.tsx
+++ b/src/components/common/Tabs/TabItem.tsx
@@ -38,7 +38,7 @@ const TabItemWrapper = styled(TabItemBase)<TabItemWrapperProps>`
   letter-spacing: ${({ tabTheme }): string => tabTheme.letterSpacing};
 
   border-bottom: ${({ isActive, tabTheme }): string =>
-    `.1rem solid ${isActive ? tabTheme.activeBorder : tabTheme.inactiveBorder}`};
+    `${tabTheme.indicatorTabSize}rem solid ${isActive ? tabTheme.activeBorder : tabTheme.inactiveBorder}`};
 
   /* TODO: Provide alternative :focus styling because of using outline: 0; */
 
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index d6eb5367d..1a38ec9cd 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -6,6 +6,10 @@ import TabItem from 'components/common/Tabs/TabItem'
 import TabContent from 'components/common/Tabs/TabContent'
 
 type TabId = number
+export enum IndicatorTabSize {
+  small = 0.1,
+  big = 0.2,
+}
 
 export interface TabItemInterface {
   readonly tab: React.ReactNode
@@ -25,6 +29,7 @@ export interface TabTheme {
   readonly fontWeight: string
   readonly fontSize: string
   readonly borderRadius: boolean
+  readonly indicatorTabSize: IndicatorTabSize
 }
 export interface Props {
   readonly tabItems: TabItemInterface[]
@@ -45,6 +50,7 @@ const Wrapper = styled.div`
     width: 100%;
   }
 `
+
 export const DEFAULT_TAB_THEME: TabTheme = {
   activeBg: 'var(--color-transparent)',
   activeBgAlt: 'initial',
@@ -57,6 +63,7 @@ export const DEFAULT_TAB_THEME: TabTheme = {
   fontWeight: 'var(--font-weight-normal)',
   letterSpacing: 'initial',
   borderRadius: false,
+  indicatorTabSize: IndicatorTabSize.small,
 }
 
 const Tabs: React.FC<Props> = (props) => {

From cb2a9769f45450169a2ed37b9d6a8a667651ab76 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Thu, 5 Aug 2021 00:56:10 -0300
Subject: [PATCH 4/8] Add tabBarExtraContent to Tabs Component

---
 .../common/ExplorerTabs/ExplorerTab.tsx       |  4 +--
 .../ExplorerTabs/ExplorerTabs.stories.tsx     | 31 ++++++++++++++++++-
 src/components/common/Tabs/Tabs.tsx           | 16 +++++++++-
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
index 84e842681..ae2c725d1 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
@@ -8,12 +8,12 @@ const StyledTabs = styled.div`
   display: flex;
   width: 100%;
   padding: 0;
-  border: 1px solid rgba(151, 151, 184, 0.3);
+  border: ${({ theme }): string => `1px solid ${theme.borderPrimary}`};
   border-radius: 4px;
 
   > div > div.tablist {
     justify-content: flex-start;
-    border-bottom: 1px solid rgba(151, 151, 184, 0.3);
+    border-bottom: ${({ theme }): string => `1px solid ${theme.borderPrimary}`};
     box-sizing: border-box;
   }
 
diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
index 24b4d4f2b..752131e25 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import styled from 'styled-components'
 
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Meta, Story } from '@storybook/react/types-6-0'
@@ -47,7 +48,35 @@ const tabItems = [
   },
 ]
 
+const Wrapper = styled.div`
+  width: 500px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px dashed darkorange;
+
+  .tab-extra-content {
+    width: 100%;
+    display: flex;
+  }
+`
+
+interface SProps {
+  text: string
+}
+const SimpleComponent: React.FC<SProps> = (props) => {
+  return <h2>{props.text}</h2>
+}
+
+const ExtraComponentNode: React.ReactNode = (
+  <Wrapper>
+    <SimpleComponent text="ExtraComponent_1" />
+    <SimpleComponent text="ExtraComponent_2" />
+  </Wrapper>
+)
+
 const Template: Story<TabsProps> = (args) => <StyledTabs {...args} />
 
 export const DefaultTabs = Template.bind({})
-DefaultTabs.args = { tabItems }
+DefaultTabs.args = { tabItems, extra: ExtraComponentNode }
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index 1a38ec9cd..36b13c61a 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -10,6 +10,7 @@ export enum IndicatorTabSize {
   small = 0.1,
   big = 0.2,
 }
+export type TabBarExtraContent = React.ReactNode
 
 export interface TabItemInterface {
   readonly tab: React.ReactNode
@@ -35,6 +36,7 @@ export interface Props {
   readonly tabItems: TabItemInterface[]
   readonly tabTheme: TabTheme
   readonly defaultTab?: TabId
+  readonly extra?: TabBarExtraContent
 }
 
 const Wrapper = styled.div`
@@ -66,8 +68,19 @@ export const DEFAULT_TAB_THEME: TabTheme = {
   indicatorTabSize: IndicatorTabSize.small,
 }
 
+interface ExtraContentProps {
+  extra?: TabBarExtraContent
+}
+
+const ExtraContent = ({ extra }: ExtraContentProps): JSX.Element | null => {
+  if (!extra) return null
+
+  console.log('ExtraContent', extra)
+  return <div className="tab-extra-content">{extra}</div>
+}
+
 const Tabs: React.FC<Props> = (props) => {
-  const { tabTheme = DEFAULT_TAB_THEME, tabItems, defaultTab = 1 } = props
+  const { tabTheme = DEFAULT_TAB_THEME, tabItems, defaultTab = 1, extra: tabBarExtraContent } = props
 
   const [activeTab, setActiveTab] = useState(defaultTab)
 
@@ -84,6 +97,7 @@ const Tabs: React.FC<Props> = (props) => {
             tabTheme={tabTheme}
           />
         ))}
+        <ExtraContent extra={tabBarExtraContent} />
       </div>
       <TabContent tabItems={tabItems} activeTab={activeTab} />
     </Wrapper>

From 979847ff5754ce239f9fbb8957e9ee9f234d9133 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 5 Aug 2021 10:31:22 -0300
Subject: [PATCH 5/8] fix extra-content width

---
 .../common/ExplorerTabs/ExplorerTabs.stories.tsx          | 7 -------
 src/components/common/Tabs/Tabs.tsx                       | 8 ++++++++
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
index 752131e25..116af53ff 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTabs.stories.tsx
@@ -49,17 +49,10 @@ const tabItems = [
 ]
 
 const Wrapper = styled.div`
-  width: 500px;
   padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: 1px dashed darkorange;
-
-  .tab-extra-content {
-    width: 100%;
-    display: flex;
-  }
 `
 
 interface SProps {
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index 36b13c61a..e5da901ed 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -51,6 +51,14 @@ const Wrapper = styled.div`
     justify-content: space-between;
     width: 100%;
   }
+  .tab-extra-content {
+    width: 100%;
+
+    @media ${MEDIA.mobile} {
+      font-size: 1.4rem;
+      min-height: 20rem;
+    }
+  }
 `
 
 export const DEFAULT_TAB_THEME: TabTheme = {

From a1eb9805fd5b340506e9bc518616a0489633a4f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 5 Aug 2021 10:33:19 -0300
Subject: [PATCH 6/8] add mobile basic css

---
 src/components/common/Tabs/Tabs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index e5da901ed..b3fc10ce6 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
+import { MEDIA } from 'const'
 
 // Components
 import TabItem from 'components/common/Tabs/TabItem'
@@ -55,8 +56,7 @@ const Wrapper = styled.div`
     width: 100%;
 
     @media ${MEDIA.mobile} {
-      font-size: 1.4rem;
-      min-height: 20rem;
+      color: red; /* mobile css here */
     }
   }
 `

From fff2798f8068e3675828cda316a8835fbb94effa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 5 Aug 2021 11:58:57 -0300
Subject: [PATCH 7/8] move extra-content css

---
 .../components/common/ExplorerTabs/ExplorerTab.tsx       | 9 +++++++++
 src/components/common/Tabs/Tabs.tsx                      | 8 --------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
index ae2c725d1..1e1f1e1ae 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import Tabs, { getTabTheme, Props as TabsProps, IndicatorTabSize } from 'components/common/Tabs/Tabs'
 import { DARK_COLOURS } from 'theme'
+import { MEDIA } from 'const'
 
 const StyledTabs = styled.div`
   display: flex;
@@ -33,6 +34,14 @@ const StyledTabs = styled.div`
   > div > div.tab-content {
     padding: 20px 16px;
   }
+
+  .tab-extra-content {
+    width: 100%;
+
+    @media ${MEDIA.mobile} {
+      display: none; /* for now we can hide the extra-content on mobiles */
+    }
+  }
 `
 const tabCustomThemeConfig = getTabTheme({
   activeBg: 'var(--color-transparent)',
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index b3fc10ce6..36b13c61a 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { MEDIA } from 'const'
 
 // Components
 import TabItem from 'components/common/Tabs/TabItem'
@@ -52,13 +51,6 @@ const Wrapper = styled.div`
     justify-content: space-between;
     width: 100%;
   }
-  .tab-extra-content {
-    width: 100%;
-
-    @media ${MEDIA.mobile} {
-      color: red; /* mobile css here */
-    }
-  }
 `
 
 export const DEFAULT_TAB_THEME: TabTheme = {

From 2861b4618b4ac472be45b4db52bae82b9513ac87 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Thu, 12 Aug 2021 09:41:19 -0300
Subject: [PATCH 8/8] Remove unnoticed console.log

---
 src/components/common/Tabs/Tabs.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index 36b13c61a..1dc3cec54 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -75,7 +75,6 @@ interface ExtraContentProps {
 const ExtraContent = ({ extra }: ExtraContentProps): JSX.Element | null => {
   if (!extra) return null
 
-  console.log('ExtraContent', extra)
   return <div className="tab-extra-content">{extra}</div>
 }