From 2ec8b3ec60acb453b89a2175ad34c37f4badf9ed Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Wed, 5 Sep 2018 17:10:06 +0200
Subject: [PATCH] Adding flex basis to Header's provider

---
 src/components/Header/component/Layout.stories.js         | 8 ++++----
 src/components/Header/component/Provider.jsx              | 3 ++-
 .../Header/component/ProviderDisconnected/index.jsx       | 6 +++---
 src/components/Header/component/ProviderInfo/index.jsx    | 1 +
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/component/Layout.stories.js b/src/components/Header/component/Layout.stories.js
index b3196d93..f4772e30 100644
--- a/src/components/Header/component/Layout.stories.js
+++ b/src/components/Header/component/Layout.stories.js
@@ -14,10 +14,10 @@ const FrameDecorator = story => (
   </div>
 )
 
-storiesOf('Components', module)
+storiesOf('Components /Header', module)
   .addDecorator(FrameDecorator)
-  .add('Connected Header', () => {
-    const provider = 'METAMASK'
+  .add('Connected', () => {
+    const provider = 'Metamask'
     const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
     const network = 'RINKEBY'
     const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected />
@@ -25,7 +25,7 @@ storiesOf('Components', module)
 
     return <Layout providerInfo={info} providerDetails={details} />
   })
-  .add('Disconnected Header', () => {
+  .add('Disconnected', () => {
     const info = <ProviderDisconnected />
     const details = <ConnectDetails />
 
diff --git a/src/components/Header/component/Provider.jsx b/src/components/Header/component/Provider.jsx
index 9abad16b..ca18ae35 100644
--- a/src/components/Header/component/Provider.jsx
+++ b/src/components/Header/component/Provider.jsx
@@ -20,11 +20,12 @@ const styles = () => ({
     height: '100%',
     display: 'flex',
     alignItems: 'center',
+    flexBasis: '250px',
   },
   provider: {
     padding: `${sm} ${md}`,
     alignItems: 'center',
-    flex: '0 1 auto',
+    flex: '1 1 auto',
     display: 'flex',
     cursor: 'pointer',
   },
diff --git a/src/components/Header/component/ProviderDisconnected/index.jsx b/src/components/Header/component/ProviderDisconnected/index.jsx
index afa81d48..9c3bc715 100644
--- a/src/components/Header/component/ProviderDisconnected/index.jsx
+++ b/src/components/Header/component/ProviderDisconnected/index.jsx
@@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import { type Open } from '~/components/hoc/OpenHoc'
-import { sm, md } from '~/theme/variables'
+import { md } from '~/theme/variables'
 
 const connectWallet = require('../../assets/connect-wallet.svg')
 
@@ -19,11 +19,11 @@ const styles = () => ({
     fontFamily: 'Montserrat, sans-serif',
   },
   account: {
-    paddingRight: md,
-    paddingLeft: sm,
+    padding: `0 ${md}`,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
+    flexGrow: 1,
   },
   connect: {
     letterSpacing: '-0.5px',
diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx
index 2961bfb9..42504f7d 100644
--- a/src/components/Header/component/ProviderInfo/index.jsx
+++ b/src/components/Header/component/ProviderInfo/index.jsx
@@ -32,6 +32,7 @@ const styles = () => ({
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
+    flexGrow: 1,
   },
   address: {
     letterSpacing: '-0.5px',