From 9941a912038f44bd8d26ab15c3ed419c07a44760 Mon Sep 17 00:00:00 2001
From: joachimschmidt557 <joachim.schmidt557@outlook.com>
Date: Wed, 15 Apr 2020 20:39:54 +0200
Subject: [PATCH] Remove font-awesome and use react-icons

---
 package-lock.json                           | 59 ++++++++++++++-------
 package.json                                |  1 -
 src/components/framework/footer.js          |  3 +-
 src/components/framework/sidebar-chevron.js |  3 +-
 src/components/framework/sidebar-toggle.js  | 13 ++---
 src/components/narrative/index.js           |  2 +-
 src/index.js                                |  1 -
 7 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index adb3de070..c8c74449e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "auspice",
-  "version": "2.11.4",
+  "version": "2.12.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4954,11 +4954,6 @@
         "readable-stream": "^2.3.6"
       }
     },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
-    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -5070,7 +5065,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": false,
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5091,12 +5087,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": false,
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5111,17 +5109,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5238,7 +5239,8 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": false,
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5250,6 +5252,7 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5264,6 +5267,7 @@
           "version": "3.0.4",
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5271,12 +5275,14 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": false,
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5295,6 +5301,7 @@
           "version": "0.5.1",
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5375,7 +5382,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "resolved": false,
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5387,6 +5395,7 @@
           "version": "1.4.0",
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5439,7 +5448,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "resolved": "",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
           }
@@ -5471,7 +5481,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": false,
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5507,6 +5518,7 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5526,6 +5538,7 @@
           "version": "3.0.1",
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5569,12 +5582,14 @@
         "wrappy": {
           "version": "1.0.2",
           "resolved": false,
-          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": false,
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
+          "optional": true
         }
       }
     },
@@ -11712,6 +11727,14 @@
         "html-parse-stringify2": "2.0.1"
       }
     },
+    "react-icons": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.9.0.tgz",
+      "integrity": "sha512-gKbYKR+4QsD3PmIHLAM9TDDpnaTsr3XZeK1NTAb6WQQ+gxEdJ0xuCgLq0pxXdS7Utg2AIpcVhM1ut/jlDhcyNg==",
+      "requires": {
+        "camelcase": "^5.0.0"
+      }
+    },
     "react-input-autosize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
diff --git a/package.json b/package.json
index a356ababe..39c72bc28 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,6 @@
     "express-naked-redirect": "^0.1.2",
     "express-static-gzip": "^0.2.2",
     "file-loader": "^1.1.11",
-    "font-awesome": "^4.7.0",
     "react-icons": "^3.9.0",
     "i18next": "^19.3.2",
     "i18next-resource-store-loader": "^0.1.2",
diff --git a/src/components/framework/footer.js b/src/components/framework/footer.js
index 430ac2fba..d2f29aaac 100644
--- a/src/components/framework/footer.js
+++ b/src/components/framework/footer.js
@@ -4,6 +4,7 @@ import marked from "marked";
 import dompurify from "dompurify";
 import styled from 'styled-components';
 import { withTranslation } from "react-i18next";
+import { FaDownload } from "react-icons/fa";
 import { dataFont, medGrey, materialButton } from "../../globalStyles";
 import { TRIGGER_DOWNLOAD_MODAL } from "../../actions/types";
 import Flex from "./flex";
@@ -325,7 +326,7 @@ class Footer extends React.Component {
         style={Object.assign({}, materialButton, {backgroundColor: "rgba(0,0,0,0)", color: medGrey, margin: 0, padding: 0})}
         onClick={() => { this.props.dispatch({ type: TRIGGER_DOWNLOAD_MODAL }); }}
       >
-        <i className="fa fa-download" aria-hidden="true"/>
+        <FaDownload />
         <span style={{position: "relative"}}>{" "+t("Download data")}</span>
       </button>
     );
diff --git a/src/components/framework/sidebar-chevron.js b/src/components/framework/sidebar-chevron.js
index 5895fc204..2fbc2c79e 100644
--- a/src/components/framework/sidebar-chevron.js
+++ b/src/components/framework/sidebar-chevron.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { FaChevronLeft } from "react-icons/fa";
 
 const SidebarChevron = ({navHeight, navWidth, display, onClick}) => {
   const chevronStyle = {
@@ -19,7 +20,7 @@ const SidebarChevron = ({navHeight, navWidth, display, onClick}) => {
 
   return (
     <div style={chevronStyle} onClick={onClick}>
-      <i className="fa fa-chevron-left" aria-hidden="true"/>
+      <FaChevronLeft />
     </div>
   );
 };
diff --git a/src/components/framework/sidebar-toggle.js b/src/components/framework/sidebar-toggle.js
index b9a5a0818..1c8d912a3 100644
--- a/src/components/framework/sidebar-toggle.js
+++ b/src/components/framework/sidebar-toggle.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { FaTimes, FaChevronRight, FaChevronLeft, FaSlidersH } from "react-icons/fa";
 import { goColor, sidebarColor } from "../../globalStyles";
 
 /*
@@ -44,20 +45,20 @@ const SidebarToggle = ({sidebarOpen, mobileDisplay, handler}) => {
     fontSize: mobileDisplay ? 26 : 12
   };
 
-  let iconClass = "fa fa-close";
+  let icon = <FaTimes />;
   if (sidebarOpen && !mobileDisplay) {
-    iconClass = "fa fa-chevron-left";
+    icon = <FaChevronLeft />;
   } else if (!sidebarOpen && !mobileDisplay) {
-    iconClass = "fa fa-chevron-right";
+    icon = <FaChevronRight />;
   } else if (sidebarOpen && mobileDisplay) {
-    iconClass = "fa fa-close";
+    icon = <FaTimes />;
   } else if (!sidebarOpen && mobileDisplay) {
-    iconClass = "fa fa-sliders";
+    icon = <FaSlidersH />;
   }
 
   return (
     <div style={containerStyle} onClick={handler}>
-      <div style={iconStyle}><i className={iconClass} aria-hidden="true"/></div>
+      <div style={iconStyle}>{icon}</div>
     </div>
   );
 };
diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
index ac9f98abf..3f00c67a9 100644
--- a/src/components/narrative/index.js
+++ b/src/components/narrative/index.js
@@ -4,6 +4,7 @@ import React from "react";
 import { connect } from "react-redux";
 import queryString from "query-string";
 import Mousetrap from "mousetrap";
+import { FaChevronUp, FaChevronDown } from "react-icons/fa";
 import {
   NarrativeStyles,
   linkStyles,
@@ -16,7 +17,6 @@ import ReactPageScroller from "./ReactPageScroller";
 import { changePage, EXPERIMENTAL_showMainDisplayMarkdown } from "../../actions/navigation";
 import { CHANGE_URL_QUERY_BUT_NOT_REDUX_STATE } from "../../actions/types";
 import { narrativeNavBarHeight } from "../../util/globals";
-import { FaChevronUp, FaChevronDown } from "react-icons/fa";
 
 /* regarding refs: https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components */
 const progressHeight = 25;
diff --git a/src/index.js b/src/index.js
index cbbcdf57b..51445c3f0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,6 @@ import configureStore from "./store";
 import { initialiseGoogleAnalyticsIfRequired } from "./util/googleAnalytics";
 import Root from "./root";
 /* S T Y L E S H E E T S */
-import "font-awesome/css/font-awesome.css";
 import "leaflet/dist/leaflet.css";
 import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";
 import "./css/global.css";