style(Swap): clean up confirm modal

blockchain · Mar 25, 2019 · 0ce4c2b · 0ce4c2b
1 parent 46510ea
commit 0ce4c2b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Exchange/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Exchange/index.js
@@ -4,6 +4,7 @@ import { Text, Button } from 'blockchain-info-components'
 export const Wrapper = styled.div`
   padding: 32px;
   max-width: 440px;
+  box-sizing: border-box;
   border: 1px solid ${props => props.theme['gray-1']}};
   border-radius: 8px;
   display: flex;

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/index.js
@@ -29,14 +29,25 @@ const Header = styled(ModalHeader)`
   border-bottom: 0px;
 `
 class ExchangeConfirmContainer extends React.PureComponent {
+  state = {
+    showOrderInfo: false
+  }
+
+  toggleShowOrderInfo = () => {
+    this.setState({ showOrderInfo: !this.state.showOrderInfo })
+  }
+
   render () {
+    const { showOrderInfo } = this.state
     const { data, actions, close, position, total } = this.props
     const ConfirmCata = data.cata({
       Success: value => (
         <ExchangeConfirm
           {...value}
           close={close}
           onSubmit={actions.confirmExchange}
+          showOrderInfo={showOrderInfo}
+          toggleShowOrderInfo={this.toggleShowOrderInfo}
         />
       ),
       Failure: message => <DataError message={message} />,

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/Exchange/ExchangeConfirm/template.js
@@ -78,6 +78,39 @@ const FromToIcon = styled(Icon)`
   justify-content: center;
   font-size: 24px;
 `
+const OrderInfoBox = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid ${props => props.theme['gray-1']};
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 10px 16px;
+  cursor: pointer;
+  width: 100%;
+  > * {
+    transition: color 0.1s, transform 0.1s;
+  }
+  ${props =>
+    props.showOrderInfo &&
+    `
+    border-radius: 4px 4px 0px 0px;
+    border-bottom: 0px;
+    margin-bottom: 0px;
+    > span:last-child {
+      transform: rotate(180deg);
+    }
+    & + div {
+      border-radius: 0px 0px 4px 4px;
+    }
+  `}
+  &:hover {
+    * {
+      color: ${props => props.theme['brand-secondary']};
+    }
+  }
+`
 const ConfirmForm = styled(Form)`
   padding: 0px;
 `
@@ -101,6 +134,8 @@ const ExchangeConfirm = ({
   fiatCurrencySymbol,
   submitting,
   handleSubmit,
+  showOrderInfo,
+  toggleShowOrderInfo,
   close
 }) => (
   <ConfirmForm onSubmit={handleSubmit}>
@@ -139,11 +174,22 @@ const ExchangeConfirm = ({
           {`${targetAmount} ${targetCoin}`}
         </CoinButton>
       </Row>
-      <Summary
-        sourceCoin={sourceCoin}
-        targetCoin={targetCoin}
-        currency={currency}
-      />
+      <OrderInfoBox onClick={toggleShowOrderInfo} showOrderInfo={showOrderInfo}>
+        <Text size='14px' weight={300}>
+          <FormattedMessage
+            id='scenes.exchange.confirm.orderinfo'
+            defaultMessage='Order Info'
+          />
+        </Text>
+        <Icon name='down-arrow' weight={600} size='14px' color='gray-3' />
+      </OrderInfoBox>
+      {showOrderInfo && (
+        <Summary
+          sourceCoin={sourceCoin}
+          targetCoin={targetCoin}
+          currency={currency}
+        />
+      )}
       {!error && (
         <Buttons>
           <ExchangeButton