style(Tiers): Add back to exchange/profile page

blockchain · Dec 13, 2018 · cf38755 · cf38755
1 parent e862e4c
commit cf38755
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/index.js b/packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/index.js
@@ -5,7 +5,6 @@ import { head, path, propEq, toLower } from 'ramda'
 import { connect } from 'react-redux'
 
 import { actions } from 'data'
-import { LinkContainer } from 'react-router-bootstrap'
 import { Button, Text, TextGroup, Icon } from 'blockchain-info-components'
 import media from 'services/ResponsiveService'
 import { Exchange } from 'blockchain-wallet-v4/src'
@@ -27,6 +26,9 @@ const Wrapper = styled.div`
   }
   ${media.laptop`
     width: 100%;
+    &.column {
+      width: 100%;
+    }
   `};
 `
 const Container = styled.div`
@@ -45,7 +47,7 @@ const Header = styled(Text)`
   width: 50%;
   ${Wrapper}.column & {
     width: 100%;
-    justify-content: flex-center;
+    justify-content: center;
   }
 `
 const Row = styled.div`
@@ -144,29 +146,18 @@ export const TierCard = ({ userData, userTiers, tier, ...rest }) => {
             </Column>
           </Row>
         </Content>
-        {path([tier, 'isActive'], TIERS)(userData) ? (
-          <LinkContainer to={'/exchange'}>
-            <ActionButton jumbo fullwidth nature='empty-secondary'>
-              <FormattedMessage
-                id='components.identityverification.tiercard.makeaswap'
-                defaultMessage='Make a Swap'
-              />
-            </ActionButton>
-          </LinkContainer>
-        ) : (
-          tierData.state !== 'pending' && (
-            <ActionButton
-              jumbo
-              fullwidth
-              nature='primary'
-              onClick={verifyIdentity}
-            >
-              <FormattedMessage
-                id='components.identityverification.tiercard.getstarted'
-                defaultMessage='Get Started'
-              />
-            </ActionButton>
-          )
+        {tierData.state === 'none' && (
+          <ActionButton
+            jumbo
+            fullwidth
+            nature='primary'
+            onClick={verifyIdentity}
+          >
+            <FormattedMessage
+              id='components.identityverification.tiercard.getstarted'
+              defaultMessage='Get Started'
+            />
+          </ActionButton>
         )}
       </Container>
     </Wrapper>

diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/ExchangeProfile/IdentityVerification/index.js b/...es/blockchain-wallet-v4-frontend/src/scenes/ExchangeProfile/IdentityVerification/index.js
@@ -12,6 +12,7 @@ import {
   TooltipHost,
   TooltipIcon
 } from 'blockchain-info-components'
+import { LinkContainer } from 'react-router-bootstrap'
 import TierCard from 'components/IdentityVerification/TierCard'
 import media from 'services/ResponsiveService'
 
@@ -20,6 +21,7 @@ const Wrapper = styled.div`
   flex-direction: column;
   width: 100%;
   height: auto;
+  position: relative;
   box-sizing: border-box;
 `
 const Container = styled.div`
@@ -101,10 +103,35 @@ const SecurityColumn = styled(Column)`
   margin: 0 auto;
   text-align: center;
 `
+const GoBackLink = styled.div`
+  border: 1px solid ${props => props.theme['gray-1']};
+  border-radius: 5px;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 20px;
+  left: 0;
+  top: 0;
+  box-shadow: 0px;
+  transition: box-shadow 0.3s;
+  span {
+    transform: rotate(90deg);
+  }
+  &:hover {
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.21);
+  }
+`
 
 const IdentityVerification = ({ userData, userTiers }) => {
   return (
     <Wrapper>
+      <GoBackLink>
+        <LinkContainer to='/exchange'>
+          <Icon name='down-arrow-filled' color='brand-secondary' />
+        </LinkContainer>
+      </GoBackLink>
       <Container>
         <Row>
           <Column>