Browse Source

feature(crypto-icons): add multi-currency icon support for form

renovate/lint-staged-8.x
Jack Mallers 8 years ago
parent
commit
a42c671b81
  1. 6
      app/components/CryptoIcon/CryptoIcon.js
  2. 11
      app/routes/app/components/components/Form/Form.js
  3. 14
      app/routes/app/components/components/Form/Form.scss
  4. 2
      app/routes/app/components/components/Nav.scss

6
app/components/CryptoIcon/CryptoIcon.js

@ -7,12 +7,10 @@ import Isvg from 'react-inlinesvg'
const CryptoIcon = ({ currency }) => { const CryptoIcon = ({ currency }) => {
switch(currency) { switch(currency) {
case 'btc': case 'btc':
return (<FaBitcoin />) return <FaBitcoin />
break break
case 'ltc': case 'ltc':
return ( return <Isvg src={path.join(__dirname, '..', 'resources/litecoin.svg')}></Isvg>
<Isvg src={path.join(__dirname, '..', 'resources/litecoin.svg')}></Isvg>
)
break break
default: default:
return <span></span> return <span></span>

11
app/routes/app/components/components/Form/Form.js

@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { FaDollar, FaBitcoin } from 'react-icons/lib/fa' import { FaDollar, FaBitcoin } from 'react-icons/lib/fa'
import { MdClose } from 'react-icons/lib/md' import { MdClose } from 'react-icons/lib/md'
import CryptoIcon from 'components/CryptoIcon'
import { btc } from '../../../../../utils' import { btc } from '../../../../../utils'
import styles from './Form.scss' import styles from './Form.scss'
@ -10,7 +11,7 @@ const Form = ({
setAmount, setAmount,
setMessage, setMessage,
setPaymentRequest, setPaymentRequest,
ticker: { currency }, ticker: { currency, crypto },
isOpen, isOpen,
close, close,
createInvoice, createInvoice,
@ -46,10 +47,10 @@ const Form = ({
<section className={styles.amountContainer}> <section className={styles.amountContainer}>
<label htmlFor='amount'> <label htmlFor='amount'>
{ {
currency === 'btc' ? currency === 'usd' ?
<FaBitcoin />
:
<FaDollar /> <FaDollar />
:
<CryptoIcon currency={crypto} />
} }
</label> </label>
<input <input
@ -57,7 +58,7 @@ const Form = ({
size='' size=''
style={ style={
formType === 'pay' ? formType === 'pay' ?
{ width: '75%', fontSize: '100px' } { width: '75%', fontSize: '85px' }
: :
{ width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` } { width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }
} }

14
app/routes/app/components/components/Form/Form.scss

@ -73,9 +73,17 @@
label { label {
svg { svg {
width: 100px; width: 85px;
height: 100px; height: 85px;
} }
svg[data-icon='ltc'] {
margin-right: 10px;
g {
transform: scale(1.75) translate(-5px, -5px);
}
}
} }
input[type=text] { input[type=text] {

2
app/routes/app/components/components/Nav.scss

@ -36,7 +36,7 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
svg { svg[data-icon='ltc'] {
width: 24px; width: 24px;
height: 28px; height: 28px;

Loading…
Cancel
Save