use font awesome chevrons instead of inline svg

nextstrain · Apr 8, 2020 · 398ed05 · 398ed05
1 parent 4402d58
commit 398ed05
Showing 1 changed file with 5 additions and 8 deletions.
diff --git 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>
     );
   }