fix - added mobile optimiations to exchange page;

blockchain · Jul 2, 2018 · b51259c · b51259c
1 parent 581159a
commit b51259c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/FirstStep/template.success.js b/...lockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/FirstStep/template.success.js
@@ -10,6 +10,7 @@ import MinimumAmountLink from './MinimumAmountLink'
 import MaximumAmountLink from './MaximumAmountLink'
 import SelectBox from './SelectBox'
 import { AboveRegulationLimitMessage, MaximumAmountMessage, MinimumAmountMessage, InsufficientAmountMessage, InvalidAmountMessage } from './validationMessages'
+import media from 'services/ResponsiveService'
 
 const Wrapper = styled.div`
   display: flex;
@@ -20,6 +21,11 @@ const Wrapper = styled.div`
   padding: 20px 30px 10px 30px;
   box-sizing: border-box;
   border: 1px solid ${props => props.theme['gray-2']};
+
+  ${media.mobile`
+    border: 0px;
+    padding: 0;
+  `}
 `
 const Row = styled.div`
   display: flex;

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,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
+import media from 'services/ResponsiveService'
 import Shapeshift from './Shapeshift'
 import Info from './Info'
 
@@ -13,6 +14,11 @@ const Wrapper = styled.section`
   padding: 30px;
   box-sizing: border-box;
   @media(min-width: 992px) { flex-direction: row; }
+
+  ${media.mobile`
+    align-items: center;
+    padding: 10px;
+  `}
 `
 const Column = styled.div`
   display: flex;
@@ -23,21 +29,21 @@ const Column = styled.div`
 `
 const ColumnLeft = styled(Column)`
   align-items: flex-end;
-  order: 2;
   margin-right: 10px;
   & > :first-child { margin-bottom: 10px; }
   @media(min-width: 992px) {
-    order: 1;
     width: 60%;
   }
+
+  ${media.mobile`
+    margin-right: 0;
+  `}
 `
 const ColumnRight = styled(Column)`
-  order: 1;
   padding: 0;
   margin-bottom: 10px;
   box-sizing: border-box;
   @media(min-width: 992px) {
-    order: 2;
     width: 40%;
   }
 `

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/Empty/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/Empty/index.js
@@ -17,20 +17,24 @@ const Transactions = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items : center;
-  margin-top: 50px;
+  margin: 50px 10px 0 10px;
 `
 const ExchangeIcon = styled(Icon)`
   justify-content: center;
 `
 
+const CenteredTextGroup = styled(TextGroup)`
+  text-align: center;
+`
+
 const Empty = () => (
   <Wrapper>
     <Transactions>
       <Text size='24px' weight={200} capitalize>
         <ExchangeIcon name='exchange' size='24px' />
         <FormattedMessage id='scenes.exchangehistory.empty.history' defaultMessage='Your order history' />
       </Text>
-      <TextGroup inline>
+      <CenteredTextGroup inline>
         <Text size='13px' weight={500}>
           <FormattedMessage id='scenes.exchangehistory.empty.exchange' defaultMessage="You haven't made any exchanges yet," />
         </Text>
@@ -39,7 +43,7 @@ const Empty = () => (
             <FormattedMessage id='scenes.exchangehistory.empty.start' defaultMessage='click here to start.' />
           </Link>
         </LinkContainer>
-      </TextGroup>
+      </CenteredTextGroup>
       <Separator />
     </Transactions>
   </Wrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/List/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/ExchangeHistory/List/template.js
@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl'
 import { Table, TableCell, TableHeader, Text } from 'blockchain-info-components'
 import { spacing } from 'services/StyleService'
 import TradeItem from './TradeItem'
+import media from 'services/ResponsiveService'
 
 const Wrapper = styled.div`
   display: flex;
@@ -17,6 +18,10 @@ const Wrapper = styled.div`
   box-sizing: border-box;
 
   & > :first-child { margin-bottom: 20px; }
+
+  ${media.mobile`
+    padding: 10px
+  `}
 `
 const Container = styled.div`
   width: 100%;