Switched Zoom in/out button from +/- to Font Awesome icons (#1574)

Author: matt-dahlgren

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### ✨ New features/enhancements
 
+- Updated the Zoom In/Zoom Out buttons on the graph page to Awesome Icons from +/-
+
 ### 🐛 Bug fixes
 
 ### 🔧 Internal changes

js/components/graph/Graph.js

@@ -11,6 +11,11 @@ import InfoBox from "./InfoBox"
 import GraphDropdown from "./GraphDropdown"
 import Sidebar from "./Sidebar"
 import { parseAnd } from "../../util/util.js"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+  faMagnifyingGlassMinus,
+  faMagnifyingGlassPlus,
+} from "@fortawesome/free-solid-svg-icons"
 
 const ZOOM_INCREMENT = 0.01
 const KEYBOARD_PANNING_INCREMENT = 10
@@ -1659,17 +1664,19 @@ export class Graph extends React.Component {
           <div className="graph-button-group">
             <div className="button-group">
               <Button
-                text="+"
                 mouseDown={() => this.zoomViewbox(ZOOM_ENUM.ZOOM_IN)}
                 onMouseEnter={this.buttonMouseEnter}
                 onMouseLeave={this.buttonMouseLeave}
-              />
+              >
+                <FontAwesomeIcon icon={faMagnifyingGlassPlus} id="zoom-icon" />
+              </Button>
               <Button
-                text="&ndash;"
                 mouseDown={() => this.zoomViewbox(ZOOM_ENUM.ZOOM_OUT)}
                 onMouseEnter={this.buttonMouseEnter}
                 onMouseLeave={this.buttonMouseLeave}
-              />
+              >
+                <FontAwesomeIcon icon={faMagnifyingGlassMinus} id="zoom-icon" />
+              </Button>
             </div>
             <div className="button-group">
               <Button
@@ -1692,6 +1699,7 @@ export class Graph extends React.Component {
         <svg
           xmlns="http://www.w3.org/2000/svg"
           xmlnsXlink="http://www.w3.org/1999/xlink"
+          id="main-graph"
           {...svgAttrs}
           version="1.1"
           {...svgMouseEvents}

js/components/graph/__tests__/Graph.test.js

@@ -8,7 +8,7 @@ describe("Graph Navigation", () => {
   it("Should pan right when the right arrow key is pressed", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialX = parseInt(svg.getAttribute("viewBox").split(" ")[0])
     await user.keyboard("{ArrowRight}")
     const newX = parseInt(svg.getAttribute("viewBox").split(" ")[0])
@@ -19,7 +19,7 @@ describe("Graph Navigation", () => {
   it("Should pan left when the left arrow key is pressed", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialX = parseInt(svg.getAttribute("viewBox").split(" ")[0])
     await user.keyboard("{ArrowLeft}")
     const newX = parseInt(svg.getAttribute("viewBox").split(" ")[0])
@@ -30,7 +30,7 @@ describe("Graph Navigation", () => {
   it("Should pan down when the down arrow key is pressed", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialY = parseInt(svg.getAttribute("viewBox").split(" ")[1])
     await user.keyboard("{ArrowDown}")
     const newY = parseInt(svg.getAttribute("viewBox").split(" ")[1])
@@ -41,7 +41,7 @@ describe("Graph Navigation", () => {
   it("Should pan up when the up arrow key is pressed", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialY = parseInt(svg.getAttribute("viewBox").split(" ")[1])
     await user.keyboard("{ArrowUp}")
     const newY = parseInt(svg.getAttribute("viewBox").split(" ")[1])
@@ -52,7 +52,7 @@ describe("Graph Navigation", () => {
   it("Should zoom in when the user presses the + key", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialDims = svg
       .getAttribute("viewBox")
       .split(" ")
@@ -73,7 +73,7 @@ describe("Graph Navigation", () => {
   it("Should zoom out when the user presses the - key", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialDims = svg
       .getAttribute("viewBox")
       .split(" ")
@@ -94,7 +94,7 @@ describe("Graph Navigation", () => {
   it("Should pan when the user clicks and drags", async () => {
     const user = userEvent.setup()
     await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialX = parseInt(svg.getAttribute("viewBox").split(" ")[0])
     const initialY = parseInt(svg.getAttribute("viewBox").split(" ")[1])
 
@@ -115,7 +115,7 @@ describe("Graph Navigation", () => {
 
   it("Should zoom in when the mouse wheel is scrolled down", async () => {
     const graph = await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialDims = svg
       .getAttribute("viewBox")
       .split(" ")
@@ -135,7 +135,7 @@ describe("Graph Navigation", () => {
 
   it("Should zoom out when the mouse wheel is scrolled up", async () => {
     const graph = await TestGraph.build()
-    const svg = document.querySelector("svg")
+    const svg = document.querySelector("#main-graph")
     const initialDims = svg
       .getAttribute("viewBox")
       .split(" ")

style/app.scss

@@ -262,6 +262,16 @@ ol {
   color: #dedae5;
 }
 
+#zoom-icon {
+  width: 1.1rem;
+  height: 1.1rem;
+  padding-right: 0.2rem;
+}
+
+#zoom-icon path {
+  fill: #7a6a96;
+}
+
 #map-sidebar {
   overflow-y: auto;
   padding: 0;