feture: add Send view side information

app/views/send.js

@@ -6,9 +6,19 @@ import { InputLabelComponent } from '../components/input-label';
 import { InputComponent } from '../components/input';
 import { TextComponent } from '../components/text';
 import { SelectComponent } from '../components/select';
+import { RowComponent } from '../components/row';
+import { ColumnComponent } from '../components/column';
+import { Divider } from '../components/divider';
+import { Button } from '../components/button';
 
-const Wrapper = styled.div`
+const FormWrapper = styled.div`
   margin-top: ${props => props.theme.layoutContentPaddingTop};
+  width: 80%;
+`;
+
+const SendWrapper = styled(ColumnComponent)`
+  margin-top: 60px;
+  width: 15%;
 `;
 
 const ShowFeeButton = styled.button`
@@ -24,6 +34,42 @@ const ShowFeeButton = styled.button`
   }
 `;
 
+const InfoCard = styled.div`
+  width: 100%;
+  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  border-radius: ${props => props.theme.boxBorderRadius};
+`;
+
+const InfoContent = styled.div`
+  padding: 15px;
+`;
+
+const InfoCardLabel = styled(TextComponent)`
+  opacity: 0.5;
+  margin-bottom: 10px;
+`;
+
+const InfoCardUSD = styled(TextComponent)`
+  opacity: 0.5;
+  margin-top: 2.5px;
+`;
+
+const FormButton = styled(Button)`
+  margin: 10px 0;
+  border-color: ${props => (props.focused
+    ? props.theme.colors.activeItem
+    : props.theme.colors.inactiveItem)};
+
+  &:hover {
+    border-color: ${props => (props.focused
+    ? props.theme.colors.activeItem
+    : props.theme.colors.inactiveItem)};
+    background-color: ${props => (props.focused
+    ? props.theme.colors.activeItem
+    : props.theme.colors.inactiveItem)};
+  }
+`;
+
 type Props = {};
 type State = {
   showFee: boolean,
@@ -56,7 +102,8 @@ export class SendView extends PureComponent<Props, State> {
     } = this.state;
 
     return (
-      <Wrapper>
+      <RowComponent justifyContent='space-between'>
+        <FormWrapper>
           <InputLabelComponent value='From' />
           <SelectComponent
             onChange={this.handleChange('from')}
@@ -91,18 +138,18 @@ export class SendView extends PureComponent<Props, State> {
             onChange={this.handleChange('memo')}
             value={memo}
             inputType='textarea'
-          placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
+            placeholder='Enter a text here'
           />
 
           <ShowFeeButton
-          onClick={() => this.setState(state => ({ showFee: !state.showFee }))}
+            onClick={() => this.setState(state => ({ showFee: !state.showFee }))
+            }
           >
             <TextComponent
               value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
               align='right'
             />
           </ShowFeeButton>
-
           {showFee && (
             <Fragment>
               <InputLabelComponent value='Fee' />
@@ -114,7 +161,25 @@ export class SendView extends PureComponent<Props, State> {
               />
             </Fragment>
           )}
-      </Wrapper>
+        </FormWrapper>
+        <SendWrapper>
+          <InfoCard>
+            <InfoContent>
+              <InfoCardLabel value='Available Funds:' />
+              <TextComponent value='ZEC 2.235' size={1.125} isBold />
+              <InfoCardUSD value='USD $25.000,00' />
+            </InfoContent>
+            <Divider opacity={0.5} />
+            <InfoContent>
+              <InfoCardLabel value='Sending' />
+              <TextComponent value='ZEC 0' size={1.125} isBold />
+              <InfoCardUSD value='USD $0.00' />
+            </InfoContent>
+          </InfoCard>
+          <FormButton label='Send' variant='secondary' focused />
+          <FormButton label='Cancel' variant='secondary' />
+        </SendWrapper>
+      </RowComponent>
     );
   }
 }