From a42c671b812a466e283c5131421b7e0c9c30821f Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 28 Aug 2017 19:25:19 -0500
Subject: [PATCH] feature(crypto-icons): add multi-currency icon support for
 form

---
 app/components/CryptoIcon/CryptoIcon.js            |  6 ++----
 app/routes/app/components/components/Form/Form.js  | 11 ++++++-----
 .../app/components/components/Form/Form.scss       | 14 +++++++++++---
 app/routes/app/components/components/Nav.scss      |  2 +-
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/components/CryptoIcon/CryptoIcon.js b/app/components/CryptoIcon/CryptoIcon.js
index 5fbcfc12..b0ed9bda 100644
--- a/app/components/CryptoIcon/CryptoIcon.js
+++ b/app/components/CryptoIcon/CryptoIcon.js
@@ -7,12 +7,10 @@ import Isvg from 'react-inlinesvg'
 const CryptoIcon = ({ currency }) => {
   switch(currency) {
     case 'btc':
-      return (<FaBitcoin />)
+      return <FaBitcoin />
       break
     case 'ltc':
-      return (
-        <Isvg src={path.join(__dirname, '..', 'resources/litecoin.svg')}></Isvg>
-      )
+      return <Isvg src={path.join(__dirname, '..', 'resources/litecoin.svg')}></Isvg>
       break
     default:
       return <span></span>
diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js
index 226f41c6..df3bd946 100644
--- a/app/routes/app/components/components/Form/Form.js
+++ b/app/routes/app/components/components/Form/Form.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FaDollar, FaBitcoin } from 'react-icons/lib/fa'
 import { MdClose } from 'react-icons/lib/md'
+import CryptoIcon from 'components/CryptoIcon'
 import { btc } from '../../../../../utils'
 import styles from './Form.scss'
 
@@ -10,7 +11,7 @@ const Form = ({
   setAmount,
   setMessage,
   setPaymentRequest,
-  ticker: { currency },
+  ticker: { currency, crypto },
   isOpen,
   close,
   createInvoice,
@@ -46,10 +47,10 @@ const Form = ({
           <section className={styles.amountContainer}>
             <label htmlFor='amount'>
               {
-                currency === 'btc' ?
-                  <FaBitcoin />
-                  :
+                currency === 'usd' ?
                   <FaDollar />
+                  :
+                  <CryptoIcon currency={crypto} />
               }
             </label>
             <input
@@ -57,7 +58,7 @@ const Form = ({
               size=''
               style={
                 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` }
               }
diff --git a/app/routes/app/components/components/Form/Form.scss b/app/routes/app/components/components/Form/Form.scss
index e8f2bf8f..282d0686 100644
--- a/app/routes/app/components/components/Form/Form.scss
+++ b/app/routes/app/components/components/Form/Form.scss
@@ -73,9 +73,17 @@
 
 		label {
 			svg {
-				width: 100px;
-				height: 100px;
-			}	
+				width: 85px;
+				height: 85px;
+			}
+
+			svg[data-icon='ltc'] {
+				margin-right: 10px;
+
+				g {
+					transform: scale(1.75) translate(-5px, -5px);
+				}
+			}
 		}
 		
 		input[type=text] {
diff --git a/app/routes/app/components/components/Nav.scss b/app/routes/app/components/components/Nav.scss
index 873b8e86..0770d7a5 100644
--- a/app/routes/app/components/components/Nav.scss
+++ b/app/routes/app/components/components/Nav.scss
@@ -36,7 +36,7 @@
 		display: inline-block;
 		vertical-align: middle;
 
-		svg {
+		svg[data-icon='ltc'] {
 			width: 24px;
 			height: 28px;