Change arrows/plus blue if valid, grey if not (#103)

src/assets/images/arrow-down-grey.svg

+<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.2981 -1.65714e-07L4.24041 -2.13061e-07L4.24041 7.91103L4.16486 7.91103L1.25623 4.9323L0.538514 5.66731L4.76926 10L9 5.66731L8.28228 4.9323L5.37365 7.91103L5.2981 7.91103L5.2981 -1.65714e-07Z" fill="#737373"/>
+</svg>

src/assets/images/plus-grey.svg

+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 6H6M11 6L6 6M6 1V6M6 6L6 11" stroke="#737373" stroke-linecap="round"/>
+</svg>

src/pages/Pool/AddLiquidity.js

@@ -8,7 +8,8 @@ import OversizedPanel from '../../components/OversizedPanel';
 import NavigationTabs from '../../components/NavigationTabs';
 import Modal from '../../components/Modal';
 import { selectors, addPendingTx } from '../../ducks/web3connect';
-import ArrowDown from '../../assets/images/plus-blue.svg';
+import PlusBlue from '../../assets/images/plus-blue.svg';
+import PlusGrey from '../../assets/images/plus-grey.svg';
 import DropdownBlue from "../../assets/images/dropdown-blue.svg";
 import DropupBlue from "../../assets/images/dropup-blue.svg";
 import ModeSelector from './ModeSelector';
@@ -573,7 +574,7 @@ class AddLiquidity extends Component {
         />
         <OversizedPanel>
           <div className="swap__down-arrow-background">
-            <img className="swap__down-arrow" src={ArrowDown} />
+            <img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} />
           </div>
         </OversizedPanel>
         <CurrencyInputPanel

src/pages/Pool/RemoveLiquidity.js

@@ -8,7 +8,8 @@ import ModeSelector from "./ModeSelector";
 import CurrencyInputPanel from "../../components/CurrencyInputPanel";
 import { selectors, addPendingTx } from '../../ducks/web3connect';
 import OversizedPanel from "../../components/OversizedPanel";
-import ArrowPlus from "../../assets/images/arrow-down-blue.svg";
+import ArrowDownBlue from "../../assets/images/arrow-down-blue.svg";
+import ArrowDownGrey from "../../assets/images/arrow-down-grey.svg";
 import EXCHANGE_ABI from "../../abi/exchange";
 import promisify from "../../helpers/web3-promisfy";
 import ReactGA from "react-ga";
@@ -277,7 +278,7 @@ class RemoveLiquidity extends Component {
         />
         <OversizedPanel>
           <div className="swap__down-arrow-background">
-            <img className="swap__down-arrow" src={ArrowPlus} />
+            <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
           </div>
         </OversizedPanel>
         { this.renderOutput() }

src/pages/Send/index.js

@@ -13,7 +13,8 @@ import Modal from '../../components/Modal';
 import OversizedPanel from '../../components/OversizedPanel';
 import DropdownBlue from "../../assets/images/dropdown-blue.svg";
 import DropupBlue from "../../assets/images/dropup-blue.svg";
-import ArrowDown from '../../assets/images/arrow-down-blue.svg';
+import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg';
+import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg';
 import EXCHANGE_ABI from '../../abi/exchange';
 
 import "./send.scss";
@@ -769,7 +770,7 @@ class Send extends Component {
           />
           <OversizedPanel>
             <div className="swap__down-arrow-background">
-              <img className="swap__down-arrow" src={ArrowDown} />
+              <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
             </div>
           </OversizedPanel>
           <CurrencyInputPanel
@@ -789,7 +790,7 @@ class Send extends Component {
           />
           <OversizedPanel>
             <div className="swap__down-arrow-background">
-              <img className="swap__down-arrow" src={ArrowDown} />
+              <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
             </div>
           </OversizedPanel>
           <AddressInputPanel

src/pages/Swap/index.js

@@ -14,7 +14,8 @@ import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import OversizedPanel from '../../components/OversizedPanel';
 import DropdownBlue from "../../assets/images/dropdown-blue.svg";
 import DropupBlue from "../../assets/images/dropup-blue.svg";
-import ArrowDown from '../../assets/images/arrow-down-blue.svg';
+import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg';
+import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg';
 import EXCHANGE_ABI from '../../abi/exchange';
 
 import "./swap.scss";
@@ -748,7 +749,7 @@ class Swap extends Component {
           />
           <OversizedPanel>
             <div className="swap__down-arrow-background">
-              <img className="swap__down-arrow" src={ArrowDown} />
+              <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
             </div>
           </OversizedPanel>
           <CurrencyInputPanel