From a517b2aae52f66f6c4f4f8f7b47a6ed88a5567cf Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Thu, 26 Mar 2020 22:01:05 -0700
Subject: [PATCH 1/4] Installed react-svg-loader for webpack. Updated webpack
 config.

---
 package.json      |  1 +
 webpack.config.js | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ff47112dd..53ff31a92 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "file-loader": "^4.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.12.0",
+    "react-svg-loader": "^3.0.3",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.41.2",
diff --git a/webpack.config.js b/webpack.config.js
index 5bb7a7078..ae5bcf673 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -49,11 +49,25 @@ module.exports = {
         ],
       },
       {
-        test: /\.(png|svg|jpg|gif)$/,
+        test: /\.(png|jpg|gif)$/,
         use: [
           'file-loader',
         ],
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+          {
+            loader: 'react-svg-loader',
+            options: {
+              jsx: true,
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [

From 1700157edbf045aad209079c12d7162eec4b6883 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Thu, 26 Mar 2020 22:01:33 -0700
Subject: [PATCH 2/4] Renamed svgs for the About page.

---
 src/assets/{dataserver.svg => aboutdataserver.svg}     | 0
 src/assets/{datavisualization.svg => aboutdatavis.svg} | 0
 src/assets/{growth.svg => aboutgrowth.svg}             | 0
 src/assets/{mobile.svg => aboutmobile.svg}             | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename src/assets/{dataserver.svg => aboutdataserver.svg} (100%)
 rename src/assets/{datavisualization.svg => aboutdatavis.svg} (100%)
 rename src/assets/{growth.svg => aboutgrowth.svg} (100%)
 rename src/assets/{mobile.svg => aboutmobile.svg} (100%)

diff --git a/src/assets/dataserver.svg b/src/assets/aboutdataserver.svg
similarity index 100%
rename from src/assets/dataserver.svg
rename to src/assets/aboutdataserver.svg
diff --git a/src/assets/datavisualization.svg b/src/assets/aboutdatavis.svg
similarity index 100%
rename from src/assets/datavisualization.svg
rename to src/assets/aboutdatavis.svg
diff --git a/src/assets/growth.svg b/src/assets/aboutgrowth.svg
similarity index 100%
rename from src/assets/growth.svg
rename to src/assets/aboutgrowth.svg
diff --git a/src/assets/mobile.svg b/src/assets/aboutmobile.svg
similarity index 100%
rename from src/assets/mobile.svg
rename to src/assets/aboutmobile.svg

From feca14ae6ea345bf6e2ad8456dc5d510513320e1 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Thu, 26 Mar 2020 22:10:08 -0700
Subject: [PATCH 3/4] Updated About page HowItWorks component to use inline
 svgs instead of img.

---
 src/components/about/HowItWorks.jsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/about/HowItWorks.jsx b/src/components/about/HowItWorks.jsx
index d58d0c383..288d20ccc 100644
--- a/src/components/about/HowItWorks.jsx
+++ b/src/components/about/HowItWorks.jsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import mobile from '@assets/mobile.svg';
-import dataserver from '@assets/dataserver.svg';
-import growth from '@assets/growth.svg';
-import datavisualization from '@assets/datavisualization.svg';
+// React-svg-loader for Webpack bundles SVGs and makes them available as
+// React components which simply return the imported SVG paths.
+import MobileSVG from '@assets/aboutmobile.svg';
+import DataServerSVG from '@assets/aboutdataserver.svg';
+import GrowthSVG from '@assets/aboutgrowth.svg';
+import DataVizSVG from '@assets/aboutdatavis.svg';
 
 const HowItWorks = () => (
   <div className="how-it-works">
     <h1>How It Works</h1>
     <div className="grid-container">
-      <img src={mobile} alt="" />
-      <img src={dataserver} alt="" />
-      <img src={datavisualization} alt="" />
-      <img src={growth} alt="" />
+      <MobileSVG />
+      <DataServerSVG />
+      <GrowthSVG />
+      <DataVizSVG />
       <p>Community members post reports via the City&apos;s easy-to-use mobile application.</p>
       <p>
         Reports are consolidated and entered into a central database and requests are

From 0b4a3d192f0eaf73c80a2595df42269234a7fcfc Mon Sep 17 00:00:00 2001
From: Joshua Marx <marx.joshua@gmail.com>
Date: Fri, 27 Mar 2020 10:24:17 -0700
Subject: [PATCH 4/4] Spelling error

Props spelling error :(
---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 782d31ea9..541c7ed09 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,7 +18,7 @@ const App = () => {
 
   return (
     <Router
-      baseURL={process.env.BASE_URL || '/'}
+      basename={process.env.BASE_URL || '/'}
     >
       <Header />
       <Routes />