feat: 51 - add icon library

package.json

@@ -19,6 +19,9 @@
     "@cosmjs/proto-signing": "^0.27.1",
     "@cosmjs/stargate": "^0.27.1",
     "@floating-ui/react-dom": "^0.6.3",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@reach/dialog": "^0.17.0",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",

src/components/Dialog/Dialog.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { DialogContent, DialogOverlay } from '@reach/dialog';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+
 import ScrollableArea from '../ScrollableArea';
 
 import '@reach/dialog/styles.css';
@@ -42,21 +45,7 @@ export default function Dialog({
                 className="dialog-header-close-button"
                 onClick={onDismiss}
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="feather feather-x"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18"></line>
-                  <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
+                <FontAwesomeIcon icon={faXmark}></FontAwesomeIcon>
               </button>
             </div>
             <ScrollableArea className="dialog-body">{children}</ScrollableArea>

src/pages/Pool/Pool.tsx

@@ -1,4 +1,9 @@
 import { useEffect, useState, useCallback } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowLeftLong,
+  faArrowRightLong,
+} from '@fortawesome/free-solid-svg-icons';
 
 import TokenPicker from '../../components/TokenPicker';
 import TokenInputGroup from '../../components/TokenInputGroup';
@@ -81,8 +86,13 @@ export default function Pool() {
         tokenList={tokenList}
         exclusion={tokenB}
       />
-      <button className="mx-2 py-1 px-3" onClick={swapTokens}>
-        {'<->'}
+      <button
+        className="mx-2 py-1 px-3"
+        onClick={swapTokens}
+        style={{ display: 'inline-flex', flexDirection: 'column' }}
+      >
+        <FontAwesomeIcon icon={faArrowLeftLong}></FontAwesomeIcon>
+        <FontAwesomeIcon icon={faArrowRightLong}></FontAwesomeIcon>
       </button>
       <TokenPicker
         value={tokenB}

src/pages/Swap/Swap.tsx

@@ -1,4 +1,9 @@
 import React, { useState, useCallback } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowUpLong,
+  faArrowDownLong,
+} from '@fortawesome/free-solid-svg-icons';
 
 import TokenInputGroup from '../../components/TokenInputGroup';
 import {
@@ -124,6 +129,8 @@ export default function Swap() {
         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-auto block"
         onClick={swapTokens}
       >
+        <FontAwesomeIcon icon={faArrowUpLong}></FontAwesomeIcon>
+        <FontAwesomeIcon icon={faArrowDownLong}></FontAwesomeIcon>
         &#8693;
       </button>
       <TokenInputGroup