fix - exchange menu => sticks to the top and does not scroll with the…

… content / left alignment
blockchain · May 29, 2018 · 001db3e · 001db3e
1 parent f963d93
commit 001db3e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 36 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Exchange/MenuTop/index.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Exchange/MenuTop/index.js
@@ -11,10 +11,12 @@ const Wrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 5px 30px;
+  padding: 0 30px;
   box-sizing: border-box;
   background-color: ${props => props.theme['white-blue']};
   border-bottom: 1px solid ${props => props.theme['gray-1']};
+
+  > div > span:first-child { padding-left: 0px; }
 `
 const Shapeshift = styled(TextGroup)`
   display: flex;

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js
@@ -14,6 +14,8 @@ import BtcMenu from '../../scenes/Transactions/Bitcoin/Menu'
 import BchMenu from '../../scenes/Transactions/Bch/Menu'
 import EthMenu from '../../scenes/Transactions/Ether/Menu'
 import AddrMenu from '../../scenes/Settings/Addresses/Menu'
+import ExchangeMenu from '..//Exchange'
+import Exchange from '../../scenes/Exchange';
 
 const Wrapper = styled.div`
   display: flex;
@@ -92,6 +94,8 @@ const WalletLayout = props => {
           { location.pathname === '/eth/transactions' && <EthMenu /> }
           { location.pathname === '/settings/addresses' && <AddrMenu /> }
           { location.pathname === '/settings/addresses/bch' && <AddrMenu /> }
+          { location.pathname === '/exchange' && <ExchangeMenu /> }
+          { location.pathname === '/exchange/history' && <ExchangeMenu /> }
           <Page>
             {children}
           </Page>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import ExchangeLayout from 'layouts/Exchange'
 import Shapeshift from './Shapeshift'
 import Info from './Info'
 import Support from './Support'
@@ -44,17 +43,15 @@ const ColumnRight = styled(Column)`
   }
 `
 const Exchange = () => (
-  <ExchangeLayout>
-    <Wrapper>
-      <ColumnLeft>
-        <Shapeshift />
-        <Support />
-      </ColumnLeft>
-      <ColumnRight>
-        <Info />
-      </ColumnRight>
-    </Wrapper>
-  </ExchangeLayout>
+  <Wrapper>
+    <ColumnLeft>
+      <Shapeshift />
+      <Support />
+    </ColumnLeft>
+    <ColumnRight>
+      <Info />
+    </ColumnRight>
+  </Wrapper>
 )
 
 export default Exchange
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/template.error.js b/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/template.error.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import ExchangeLayout from 'layouts/Exchange'
 import { Text } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
@@ -15,11 +14,9 @@ const Wrapper = styled.div`
 `
 
 export default (props) => (
-  <ExchangeLayout>
-    <Wrapper>
-      <Text size='12px' weight={300} color='red'>
-        {props.children}
-      </Text>
-    </Wrapper>
-  </ExchangeLayout>
+  <Wrapper>
+    <Text size='12px' weight={300} color='red'>
+      {props.children}
+    </Text>
+  </Wrapper>
 )
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/template.loading.js b/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/template.loading.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import ExchangeLayout from 'layouts/Exchange'
 import { BlockchainLoader } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
@@ -15,9 +14,7 @@ const Wrapper = styled.div`
 `
 
 export default (props) => (
-  <ExchangeLayout>
-    <Wrapper>
-      <BlockchainLoader width='200px' height='200px' />
-    </Wrapper>
-  </ExchangeLayout>
+  <Wrapper>
+    <BlockchainLoader width='200px' height='200px' />
+  </Wrapper>
 )
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/template.success.js b/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/template.success.js
@@ -1,21 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import ExchangeLayout from 'layouts/Exchange'
 import Empty from './Empty'
 import List from './List'
 
 const Success = props => {
   const { complete, incomplete, showComplete, showIncomplete } = props.trades
 
-  return (
-    <ExchangeLayout>
-      { !showComplete && !showIncomplete
-        ? <Empty />
-        : <List complete={complete} incomplete={incomplete} showComplete={showComplete} showIncomplete={showIncomplete} />
-      }
-    </ExchangeLayout>
-  )
+  return !showComplete && !showIncomplete
+    ? <Empty />
+    : <List complete={complete} incomplete={incomplete} showComplete={showComplete} showIncomplete={showIncomplete} />
 }
 
 Success.propTypes = {