Replace custom icons with font awesome

package-lock.json

@@ -911,6 +911,48 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
       "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+      "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+    },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
+      "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
+      "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@types/enzyme": "^3.9.4",
     "@types/jest": "^24.0.15",
     "@types/node": "^12.0.10",

src/index.css

@@ -6,11 +6,6 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .header-cmd { color: #c5c5c5 }
 
-.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
-.top-links li { float: left; }
-.top-links a { display: inline-block; padding: 10px 15px}
-.top-links .icon { margin-right: 5px; }
-
 .mono { font-family: monospace; font-size: 1.3em }
 .expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
 
@@ -51,19 +46,6 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .cur { color: lightgray; }
 
-.icon { width: 16px; height: 16px; display: inline-block; }
-.light .twitter { background: url('./img/twitter-light.png') }
-.dark .twitter { background: url('./img/twitter-dark.png') }
-.midnight .twitter { background: url('./img/twitter-dark.png') }
-
-.light .feedback { background: url('./img/feedback-light.png') }
-.dark .feedback { background: url('./img/feedback-dark.png') }
-.midnight .feedback { background: url('./img/feedback-dark.png') }
-
-.light .github { background: url('./img/github-light.png') }
-.dark .github { background: url('./img/github-dark.png') }
-.midnight .github { background: url('./img/github-dark.png') }
-
 /* Light */
 .light { background: #fafafa; }
 .light a, .light a:visited { color: #222; }

src/shell/components/AppRoot.tsx

@@ -6,6 +6,8 @@ import cmd from '../cmd';
 import log from 'loglevel';
 import Indicators from './Indicators';
 import hash from '../../core/hash';
+import TopLinks from './TopLinks';
+
 
 type AppRootProps = {
     appState: AppState,    
@@ -51,17 +53,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
                     <div className="header">
                         <h1>Bitwise<span className="header-cmd">Cmd</span>
                         </h1>
-                        <ul className="top-links">
-                            <li>
-                                <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a>
-                            </li>
-                            <li>
-                                <a href="https://twitter.com/BitwiseCmd"><i className="icon twitter">&nbsp;</i><span className="link-text">Twitter</span></a>
-                            </li>
-                            <li>
-                                <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i className="icon feedback">&nbsp;</i><span className="link-text">Send Feedback</span></a>
-                            </li>
-                        </ul>
+                       <TopLinks />
                     </div>
 
                     <div className="expressionInput-container">

src/shell/components/TopLinks.css

@@ -0,0 +1,5 @@
+
+.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
+.top-links li { float: left; }
+.top-links a { display: inline-block; padding: 10px 15px}
+.top-links .icon { margin-right: 5px; vertical-align: middle; }

src/shell/components/TopLinks.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { faTwitter, faGithub} from "@fortawesome/free-brands-svg-icons";
+import './TopLinks.css';
+
+function TopLinks() {
+    return <ul className="top-links">                
+                <li>
+                    <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faGithub} size="lg" />Project on GitHub</a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faTwitter} size="lg" /><span className="link-text">Twitter</span></a>
+                </li>
+                <li>
+                    <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><FontAwesomeIcon className="icon" icon={faEnvelope} size="lg" /><span className="link-text">Send Feedback</span></a>
+                </li>
+    </ul>;
+}
+
+export default TopLinks;