Add Spoiler component & use it in send modal

src/components/base/CheckBox/index.js

@@ -16,6 +16,7 @@ const Base = styled(Tabbable).attrs({
   height: 24px;
   border-radius: 16px;
   transition: 250ms linear background-color;
+  cursor: pointer;
   &:focus {
     box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px;
     outline: none;

src/components/base/Input/index.js

@@ -2,7 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
-import { fontSize } from 'styled-system'
+import { fontSize, space } from 'styled-system'
 
 import noop from 'lodash/noop'
 
@@ -38,6 +38,26 @@ const Base = styled.input.attrs({
   }
 `
 
+export const Textarea = styled.textarea.attrs({
+  p: 2,
+  fontSize: 4,
+  ff: p => p.ff || 'Open Sans|SemiBold',
+})`
+  ${space};
+  ${fontFamily};
+  ${fontSize};
+  min-height: 80px;
+  color: ${p => p.theme.colors.dark};
+  background: ${p => p.theme.colors.white};
+  border-radius: 3px;
+  border: 1px solid ${p => p.theme.colors.fog};
+  box-shadow: none;
+  &:focus {
+    box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
+    outline: none;
+  }
+`
+
 type Props = {
   keepEvent?: boolean,
   onBlur: Function,

src/components/base/Spoiler/index.js

@@ -0,0 +1,60 @@
+// @flow
+
+import React, { PureComponent, Fragment } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+import IconChevronRight from 'icons/ChevronRight'
+
+type Props = {
+  children: any,
+  title: string,
+}
+
+type State = {
+  isOpened: boolean,
+}
+
+const Title = styled(Text).attrs({
+  ff: 'Museo Sans|Bold',
+  fontSize: 2,
+  color: 'dark',
+  tabIndex: 0,
+})`
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  cursor: pointer;
+  outline: none;
+`
+
+const IconContainer = styled(Box)`
+  transform: rotate(${p => (p.isOpened ? '90' : '0')}deg);
+  transition: 150ms linear transform;
+`
+
+class Spoiler extends PureComponent<Props, State> {
+  state = {
+    isOpened: false,
+  }
+
+  toggle = () => this.setState({ isOpened: !this.state.isOpened })
+
+  render() {
+    const { title, children } = this.props
+    const { isOpened } = this.state
+    return (
+      <Fragment>
+        <Box horizontal flow={1} color="dark" align="center">
+          <IconContainer isOpened={isOpened}>
+            <IconChevronRight width={12} height={12} />
+          </IconContainer>
+          <Title onClick={this.toggle}>{title}</Title>
+        </Box>
+        {isOpened && children}
+      </Fragment>
+    )
+  }
+}
+
+export default Spoiler

src/components/modals/Send/01-step-amount.js

@@ -12,25 +12,35 @@ import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
 import RecipientAddress from 'components/RecipientAddress'
 import RequestAmount from 'components/RequestAmount'
 import Select from 'components/base/Select'
-import Input from 'components/base/Input'
+import Input, { Textarea } from 'components/base/Input'
+import Spoiler from 'components/base/Spoiler'
+import CheckBox from 'components/base/CheckBox'
 
 type Props = {
   account: Account | null,
   onChange: Function,
   recipientAddress: string,
   amount: DoubleVal,
+  isRBF: boolean,
   t: T,
 }
 
 function StepAmount(props: Props) {
-  const { onChange, account, recipientAddress, t, amount } = props
+  const { onChange, account, recipientAddress, t, amount, isRBF } = props
 
   return (
     <Box flow={4}>
+      {/*                                                                    */}
+      {/*                      ACCOUNT SELECTION                             */}
+      {/*                                                                    */}
       <Box flow={1}>
         <Label>{t('send:steps.amount.selectAccountDebit')}</Label>
         <SelectAccount onChange={onChange('account')} value={account} />
       </Box>
+
+      {/*                                                                    */}
+      {/*                      RECIPIENT ADDRESS                             */}
+      {/*                                                                    */}
       <Box flow={1}>
         <Label>
           <span>{t('send:steps.amount.recipientAddress')}</span>
@@ -42,12 +52,20 @@ function StepAmount(props: Props) {
           onChange={onChange('recipientAddress')}
         />
       </Box>
+
       {account && (
         <Fragment>
+          {/*                                                                */}
+          {/*                        AMOUNT                                  */}
+          {/*                                                                */}
           <Box flow={1}>
             <Label>{t('send:steps.amount.amount')}</Label>
             <RequestAmount account={account} onChange={onChange('amount')} value={amount} />
           </Box>
+
+          {/*                                                                */}
+          {/*                         FEES                                   */}
+          {/*                                                                */}
           <Box flow={1}>
             <Label>
               <span>{t('send:steps.amount.fees')}</span>
@@ -55,7 +73,7 @@ function StepAmount(props: Props) {
             </Label>
             <Box horizontal flow={5}>
               <Select
-                placeholder="Choose a chess player..."
+                style={{ width: 200 }}
                 items={[{ key: 'custom', name: 'Custom' }]}
                 value={{ key: 'custom', name: 'Custom' }}
                 renderSelected={item => item.name}
@@ -64,6 +82,40 @@ function StepAmount(props: Props) {
               <Input containerProps={{ grow: true }} />
             </Box>
           </Box>
+
+          {/*                                                                */}
+          {/*                  ADVANCED OPTIONS                              */}
+          {/*                                                                */}
+          <Spoiler title="Advanced options">
+            {/*                 */}
+            {/* RBF transaction */}
+            {/*                 */}
+            <Box horizontal align="center" flow={5}>
+              <Box style={{ width: 200 }}>
+                <Label>
+                  <span>{t('send:steps.amount.useRBF')}</span>
+                  <LabelInfoTooltip ml={1} text={t('send:steps.amount.useRBF')} />
+                </Label>
+              </Box>
+              <Box grow>
+                <CheckBox isChecked={isRBF} onChange={onChange('isRBF')} />
+              </Box>
+            </Box>
+
+            {/*         */}
+            {/* Message */}
+            {/*         */}
+            <Box horizontal align="flex-start" flow={5}>
+              <Box style={{ width: 200 }}>
+                <Label>
+                  <span>{t('send:steps.amount.message')}</span>
+                </Label>
+              </Box>
+              <Box grow>
+                <Textarea />
+              </Box>
+            </Box>
+          </Spoiler>
         </Fragment>
       )}
     </Box>

src/components/modals/Send/index.js

@@ -42,6 +42,7 @@ type State = {
   account: Account | null,
   recipientAddress: string,
   fees: number,
+  isRBF: boolean,
 }
 
 const GET_STEPS = t => [
@@ -67,6 +68,7 @@ const INITIAL_STATE = {
     },
   },
   fees: 0,
+  isRBF: false,
 }
 
 class SendModal extends PureComponent<Props, State> {
@@ -132,7 +134,7 @@ class SendModal extends PureComponent<Props, State> {
           const acc = account || get(data, 'account', null)
           const canNext = this.canNext(acc)
           return (
-            <ModalBody onClose={onClose} deferHeight={acc ? 595 : 355}>
+            <ModalBody onClose={onClose} deferHeight={acc ? 630 : 355}>
               <ModalTitle>{t('send:title')}</ModalTitle>
               <ModalContent>
                 <Breadcrumb mb={6} mt={2} currentStep={stepIndex} items={this._steps} />

src/icons/ChevronRight.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+  <svg viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M10.869 8.266L6.28 12.89a.375.375 0 0 1-.531 0l-.619-.62a.375.375 0 0 1 0-.53L8.834 8 5.131 4.26a.375.375 0 0 1 0-.532l.619-.619a.375.375 0 0 1 .531 0l4.588 4.625a.375.375 0 0 1 0 .532z"
+    />
+  </svg>
+)

src/styles/global.js

@@ -5,7 +5,7 @@
 import { injectGlobal } from 'styled-components'
 import omitBy from 'lodash/omitBy'
 
-import { fontFace } from 'styles/helpers'
+import { fontFace, rgba } from 'styles/helpers'
 import { radii, colors } from 'styles/theme'
 import reset from './reset'
 
@@ -102,4 +102,8 @@ injectGlobal`
   .tippy-popper .tippy-roundarrow {
     fill: ${colors.dark};
   }
+
+  ::selection {
+    background: ${rgba(colors.wallet, 0.1)};
+  }
 `

static/i18n/en/send.yml

@@ -9,6 +9,8 @@ steps:
     max: Max
     fees: Fees
     advancedOptions: Advanced options
+    useRBF: Use the RBF transaction
+    message: Leave a message (140)
   connectDevice:
     title: Connect device
   verification: