From 398ed05f07bc49c9ba3c40e70e47adf52b87434d Mon Sep 17 00:00:00 2001
From: joachimschmidt557 <joachim.schmidt557@outlook.com>
Date: Fri, 3 Apr 2020 19:01:19 +0200
Subject: [PATCH 1/3] use font awesome chevrons instead of inline svg

---
 src/components/narrative/index.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
index 25f6906f3..ff6046a29 100644
--- a/src/components/narrative/index.js
+++ b/src/components/narrative/index.js
@@ -96,26 +96,23 @@ class Narrative extends React.Component {
     Mousetrap.bind(['right', 'down'], this.goToNextSlide);
   }
   renderChevron(pointUp) {
-    const dims = {w: 30, h: 30};
+    const width = 30;
     const style = {
       zIndex: 200,
       position: "absolute",
       cursor: "pointer",
-      left: `${this.props.width/2 - dims.w/2}px`
+      left: `${this.props.width/2 - width/2}px`,
+      fontSize: `${width/2}px`,
     };
     if (pointUp) style.top = narrativeNavBarHeight + progressHeight;
     else style.bottom = 0;
-    const svgPathD = pointUp ?
-      "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" :
-      "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z";
+    const iconClass = pointUp ? "fa fa-chevron-up fa-2x" : "fa fa-chevron-down fa-2x";
     return (
       <div id={`hand${pointUp?"Up":"Down"}`}
         style={style}
         onClick={pointUp ? this.goToPreviousSlide : this.goToNextSlide}
       >
-        <svg width={`${dims.w}px`} height={`${dims.h}px`} viewBox="0 0 448 512">
-          <path d={svgPathD} fill="black"/>
-        </svg>
+        <i className={iconClass}></i>
       </div>
     );
   }

From 5562785d76c4a2f063eeac5cce14f79dd33acb7f Mon Sep 17 00:00:00 2001
From: joachimschmidt557 <joachim.schmidt557@outlook.com>
Date: Wed, 8 Apr 2020 18:08:50 +0200
Subject: [PATCH 2/3] Fix lint & bottom padding

---
 src/components/narrative/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
index ff6046a29..a97d377e7 100644
--- a/src/components/narrative/index.js
+++ b/src/components/narrative/index.js
@@ -102,17 +102,18 @@ class Narrative extends React.Component {
       position: "absolute",
       cursor: "pointer",
       left: `${this.props.width/2 - width/2}px`,
-      fontSize: `${width/2}px`,
+      fontSize: `${width}px`
     };
     if (pointUp) style.top = narrativeNavBarHeight + progressHeight;
+    if (!pointUp) style.bottom = "5px";
     else style.bottom = 0;
-    const iconClass = pointUp ? "fa fa-chevron-up fa-2x" : "fa fa-chevron-down fa-2x";
+    const iconClass = pointUp ? "fa fa-chevron-up" : "fa fa-chevron-down";
     return (
       <div id={`hand${pointUp?"Up":"Down"}`}
         style={style}
         onClick={pointUp ? this.goToPreviousSlide : this.goToNextSlide}
       >
-        <i className={iconClass}></i>
+        <i className={iconClass} />
       </div>
     );
   }

From 1d94f8d929ddc0456965aeee89a5a53bd789cd27 Mon Sep 17 00:00:00 2001
From: joachimschmidt557 <joachim.schmidt557@outlook.com>
Date: Fri, 10 Apr 2020 14:37:49 +0200
Subject: [PATCH 3/3] Use react-icons for chevrons

---
 package.json                      | 1 +
 src/components/narrative/index.js | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9bdde19b0..a356ababe 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "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",
     "json-loader": "^0.5.1",
diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
index a97d377e7..f7689f9c9 100644
--- a/src/components/narrative/index.js
+++ b/src/components/narrative/index.js
@@ -16,6 +16,7 @@ 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;
@@ -107,13 +108,13 @@ class Narrative extends React.Component {
     if (pointUp) style.top = narrativeNavBarHeight + progressHeight;
     if (!pointUp) style.bottom = "5px";
     else style.bottom = 0;
-    const iconClass = pointUp ? "fa fa-chevron-up" : "fa fa-chevron-down";
+    const icon = pointUp ? <FaChevronUp /> : <FaChevronDown />;
     return (
       <div id={`hand${pointUp?"Up":"Down"}`}
         style={style}
         onClick={pointUp ? this.goToPreviousSlide : this.goToNextSlide}
       >
-        <i className={iconClass} />
+        {icon}
       </div>
     );
   }