From b0edfbd71b7d62ad476d256e5738846cf7d6a41c Mon Sep 17 00:00:00 2001
From: NL <natalie.lockhart5@gmail.com>
Date: Thu, 21 Oct 2021 20:16:23 -0600
Subject: [PATCH] Updating react version and image sources

Changing image sources from inline require statements to import
statements
---
 package-lock.json          | 9 ++++-----
 package.json               | 2 +-
 src/components/InfoPane.js | 6 ++++--
 src/components/Settings.js | 3 ++-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9704371..6cce3cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10505,13 +10505,12 @@
       }
     },
     "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "object-assign": "^4.1.1"
       }
     },
     "react-app-polyfill": {
diff --git a/package.json b/package.json
index 77f2240..0e0a7a2 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
     "recoil": "^0.0.10",
diff --git a/src/components/InfoPane.js b/src/components/InfoPane.js
index 6fc263a..683dab1 100644
--- a/src/components/InfoPane.js
+++ b/src/components/InfoPane.js
@@ -6,6 +6,8 @@ import { highlightAtom } from "../context/GlobalState";
 import { isMobile } from "../helpers/utility";
 import { useWindowSize } from "../hooks/useWindowSize";
 import { GithubMetrics } from "./GithubMetrics";
+import logoImage from "../assets/logo.png";
+import dayAndNight from "../assets/day-and-night.svg";
 
 const InfoPane = () => {
   const mode = useContext(ThemeContext);
@@ -22,12 +24,12 @@ const InfoPane = () => {
     <div className={`InfoPane ${themeClass} ${isMobile && "mobileInfoPane"}`}>
       <div className="header">
         <h1>
-          <img src={require("../assets/logo.png")} alt="React-Builder-Logo" />{" "}
+          <img src={logoImage} alt="React-Builder-Logo" />{" "}
           React Builder
         </h1>
         <img
           className={`toggleTheme ${themeClass}`}
-          src={require("../assets/day-and-night.svg")}
+          src={dayAndNight}
           alt="Theme-Toggle-Button"
           onClick={mode.toggleTheme}
         ></img>
diff --git a/src/components/Settings.js b/src/components/Settings.js
index cc768b8..ba99a9c 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from "recoil";
 import { DARK } from "../constants/constants";
 import createAppHelper from "../helpers/createAppHelper";
 import { ReactComponent as DeleteIcon } from "../assets/trash.svg";
+import gear from "../assets/gear.png";
 
 //State
 import {
@@ -159,7 +160,7 @@ const Settings = () => {
           <div>
             <h1 className="setup-app">
               <img
-                src={require("../assets/gear.png")}
+                src={gear}
                 className="gearIcon"
                 alt="gear icon"
               />{" "}