From 84bb16708cc4610b1fe74d582ca015404765fa86 Mon Sep 17 00:00:00 2001
From: Rachel Prather <rachelprather1@gmail.com>
Date: Thu, 28 Dec 2023 17:55:43 -0800
Subject: [PATCH] Style error page for wrong urls

---
 src/components/App/App.js        |  5 +++--
 src/components/Error/Error.js    | 13 +++++++++++++
 src/components/Error/_Error.scss | 13 +++++++++++++
 src/styles/input.scss            |  4 ++--
 src/styles/output.css            | 14 ++++++++++++++
 src/styles/output.css.map        |  2 +-
 6 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Error/Error.js
 create mode 100644 src/components/Error/_Error.scss

diff --git a/src/components/App/App.js b/src/components/App/App.js
index b24a795..31c59c4 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -7,13 +7,14 @@ import About from '../About/About';
 import Contact from '../Contact/Contact';
 import Portfolio from '../Portfolio/Portfolio';
 import Footer from '../Footer/Footer';
+import Error from '../Error/Error';
 
 const App = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div className='app'>
-        {isOpen ?
+      {isOpen ?
         <Menu isOpen={isOpen} setIsOpen={setIsOpen} />
         :
         <>
@@ -25,7 +26,7 @@ const App = () => {
                 <Route path='/about' element={<About />} />
                 <Route path='/contact' element={<Contact />} />
                 <Route path='/portfolio' element={<Portfolio />} />
-                <Route path='/error' />
+                <Route path='/*' element={<Error />} />
               </Routes>
             </div>
           </main>
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
new file mode 100644
index 0000000..fb1855c
--- /dev/null
+++ b/src/components/Error/Error.js
@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+
+const Error = () => {
+  return (
+    <div className='contact'>
+      <h1 className='page-header'>Sorry...</h1>
+      <p>The page you are looking for does not exist.</p>
+      <Link to='/' className='redirect'>Go Home</Link>
+    </div>
+  )
+}
+
+export default Error;
\ No newline at end of file
diff --git a/src/components/Error/_Error.scss b/src/components/Error/_Error.scss
new file mode 100644
index 0000000..548468d
--- /dev/null
+++ b/src/components/Error/_Error.scss
@@ -0,0 +1,13 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.redirect {
+  color: $primary-accent-color;
+  @include body-font;
+  margin: 3rem;
+  text-decoration: none;
+}
+
+.redirect:hover {
+  @include inline-link-hover;
+}
\ No newline at end of file
diff --git a/src/styles/input.scss b/src/styles/input.scss
index c29e944..c0cfab9 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -3,8 +3,8 @@
 @use '../components/Contact/Contact';
 @use '../components/Home/Home';
 @use '../components/Nav/Nav';
-@use '../components/BurgerNav/BurgerNav';
 @use '../components/TopNav/TopNav';
 @use '../components/Portfolio/Portfolio';
 @use '../components/Project/Project';
-@use '../components/Footer/Footer';
\ No newline at end of file
+@use '../components/Footer/Footer';
+@use '../components/Error/Error';
\ No newline at end of file
diff --git a/src/styles/output.css b/src/styles/output.css
index 161be02..864243e 100644
--- a/src/styles/output.css
+++ b/src/styles/output.css
@@ -584,5 +584,19 @@ article {
     margin: 0.5rem;
   }
 }
+.redirect {
+  color: #47725d;
+  font-family: "Inter", sans-serif;
+  color: #424242;
+  font-size: 2rem;
+  font-weight: 300;
+  margin: 3rem;
+  text-decoration: none;
+}
+
+.redirect:hover {
+  text-decoration: underline;
+  text-decoration-color: #47725d;
+}
 
 /*# sourceMappingURL=output.css.map */
diff --git a/src/styles/output.css.map b/src/styles/output.css.map
index 2908387..9289b8c 100644
--- a/src/styles/output.css.map
+++ b/src/styles/output.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../components/About/_About.scss","_mixins.scss","_variables.scss","../components/App/_App.scss","../components/Contact/_Contact.scss","../components/Home/_Home.scss","../components/Nav/_Nav.scss","../components/Portfolio/_Portfolio.scss","../components/Project/_Project.scss","../components/Footer/_Footer.scss"],"names":[],"mappings":"AAGA;ECQE;EACA;EACA;EDRA;;;AAGF;EACE;ECQA;EACA;EDPA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE,OE3BqB;EF4BrB;;;AAGF;ECiDE;EACA,uBCjFqB;;;AFwCvB;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AGhDJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;;AAGF;EACE;EACA,kBDfyB;;;ACkB3B;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EFJE,aClBY;EDmBZ,OCvBmB;EDwBnB;EACA;EACA;EACA;;;AEGF;EACE;;;AAGF;EFHE,aCzBU;ED0BV,OChCmB;EDiCnB;EACA;EEEA;;;AAGF;EFAE,aClCY;EDmCZ;EACA;EACA;EAIA;EACA;EACA;EACA;EACA,YC1CW;ECkCX;;;AAGF;EFSE,kBC1DqB;ED2DrB,OCtDqB;;;ACgDvB;EACE;EFeA,kBCnEuB;EDoEvB;EACA,OCjEoB;;;ACoDtB;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE,ODrEqB;ECsErB;;;AAGF;EACE;IFLA,kBCnEuB;IDoEvB;IACA,OCjEoB;;;AELtB;EHQE;EACA;EACA;EGRA;;AACA;EACE;EACA;EACA;;AAEF;EACE,OFVmB;EEWnB;;AAEF;EHmEA;EACA,uBCjFqB;;AEgBrB;EHDA;EACA;EGEE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EHiDA;EACA;;;AG7CF;EAEI;IACE;;;AAKN;EACE;IH/BA;IACA;IACA;;;AIVF;EACE;EACA;EACA;;;AAGF;EACE;EJLA;EACA;EACA;;AIKA;EACE;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AAEF;EJ6CF;EACA;;;AIxCF;EACE;;AACA;EACE;EACA;EACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAGJ;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;IJ1EF;IACA;IACA;;EI2EA;IACE;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;IJxFF;IACA;IACA;;;AI4FF;EACE;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAGJ;IJnGA;IACA;IACA;;EImGE;IACE;;;AC9GN;EACE,kBJJyB;EIKzB;EACA;EACA;EACA;;;AAGF;ELWE;EACA;EKVA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;ELmBA,aClCY;EDmCZ;EACA;EACA;EKpBE;EACA,OJrBkB;EIsBlB;;AAEF;AAAA;EAEE;;AAEF;ELyCA;EACA;;;AKrCF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;ACvDJ;EACE;ENOA;EACA;EACA;;AMPA;ENWA;EACA;EMVE;EACA;EACA;EACA;;;ACRJ;EACE;EACA,YNSW;EDHX;EACA;EACA;EONA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EPwBA,aClCY;EDmCZ;EACA;EACA;EOzBE;;AAEF;EPYA,aCzBU;ED0BV,OChCmB;EDiCnB;EACA;EObE;EACA;;AAEF;EACE;EPdF;EACA;EOeE;EACA;;AAEF;EPzBA;EACA;EACA;EOyBE;EACA;;AAEF;EACE;EACA;;AAEF;EPAA,aClCY;EDmCZ;EACA;EACA;EODE;EACA;EACA;;AAEF;EACE;EACA;EACA;EPrCF;EACA;;;AOyCF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EACA;IACE;;;AChIN;EACE,kBPEmB;EODnB;ERMA;EACA;EACA;EQNA;EACA;;;AAGF;EACE;EACA;;;AAGF;ERXE;EACA;EACA;;;AQeF;ERME,aClBY;EDmBZ,OCvBmB;EDwBnB;EACA;EACA;EACA;EQTA,OPjBqB;EOkBrB;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;;EAEF;IR5BA;IACA;IACA;;EQ6BA;IACE","file":"output.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../components/About/_About.scss","_mixins.scss","_variables.scss","../components/App/_App.scss","../components/Contact/_Contact.scss","../components/Home/_Home.scss","../components/Nav/_Nav.scss","../components/Portfolio/_Portfolio.scss","../components/Project/_Project.scss","../components/Footer/_Footer.scss","../components/Error/_Error.scss"],"names":[],"mappings":"AAGA;ECQE;EACA;EACA;EDRA;;;AAGF;EACE;ECQA;EACA;EDPA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE,OE3BqB;EF4BrB;;;AAGF;ECiDE;EACA,uBCjFqB;;;AFwCvB;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AGhDJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;;AAGF;EACE;EACA,kBDfyB;;;ACkB3B;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EFJE,aClBY;EDmBZ,OCvBmB;EDwBnB;EACA;EACA;EACA;;;AEGF;EACE;;;AAGF;EFHE,aCzBU;ED0BV,OChCmB;EDiCnB;EACA;EEEA;;;AAGF;EFAE,aClCY;EDmCZ;EACA;EACA;EAIA;EACA;EACA;EACA;EACA,YC1CW;ECkCX;;;AAGF;EFSE,kBC1DqB;ED2DrB,OCtDqB;;;ACgDvB;EACE;EFeA,kBCnEuB;EDoEvB;EACA,OCjEoB;;;ACoDtB;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE,ODrEqB;ECsErB;;;AAGF;EACE;IFLA,kBCnEuB;IDoEvB;IACA,OCjEoB;;;AELtB;EHQE;EACA;EACA;EGRA;;AACA;EACE;EACA;EACA;;AAEF;EACE,OFVmB;EEWnB;;AAEF;EHmEA;EACA,uBCjFqB;;AEgBrB;EHDA;EACA;EGEE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EHiDA;EACA;;;AG7CF;EAEI;IACE;;;AAKN;EACE;IH/BA;IACA;IACA;;;AIVF;EACE;EACA;EACA;;;AAGF;EACE;EJLA;EACA;EACA;;AIKA;EACE;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AAEF;EJ6CF;EACA;;;AIxCF;EACE;;AACA;EACE;EACA;EACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAGJ;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;IJ1EF;IACA;IACA;;EI2EA;IACE;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;IJxFF;IACA;IACA;;;AI4FF;EACE;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAGJ;IJnGA;IACA;IACA;;EImGE;IACE;;;AC9GN;EACE,kBJJyB;EIKzB;EACA;EACA;EACA;;;AAGF;ELWE;EACA;EKVA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;ELmBA,aClCY;EDmCZ;EACA;EACA;EKpBE;EACA,OJrBkB;EIsBlB;;AAEF;AAAA;EAEE;;AAEF;ELyCA;EACA;;;AKrCF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;ACvDJ;EACE;ENOA;EACA;EACA;;AMPA;ENWA;EACA;EMVE;EACA;EACA;EACA;;;ACRJ;EACE;EACA,YNSW;EDHX;EACA;EACA;EONA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EPwBA,aClCY;EDmCZ;EACA;EACA;EOzBE;;AAEF;EPYA,aCzBU;ED0BV,OChCmB;EDiCnB;EACA;EObE;EACA;;AAEF;EACE;EPdF;EACA;EOeE;EACA;;AAEF;EPzBA;EACA;EACA;EOyBE;EACA;;AAEF;EACE;EACA;;AAEF;EPAA,aClCY;EDmCZ;EACA;EACA;EODE;EACA;EACA;;AAEF;EACE;EACA;EACA;EPrCF;EACA;;;AOyCF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EACA;IACE;;;AChIN;EACE,kBPEmB;EODnB;ERMA;EACA;EACA;EQNA;EACA;;;AAGF;EACE;EACA;;;AAGF;ERXE;EACA;EACA;;;AQeF;ERME,aClBY;EDmBZ,OCvBmB;EDwBnB;EACA;EACA;EACA;EQTA,OPjBqB;EOkBrB;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;;EAEF;IR5BA;IACA;IACA;;EQ6BA;IACE;;;ACxCJ;EACE,ORFqB;EDmCrB,aCzBU;ED0BV,OChCmB;EDiCnB;EACA;ESlCA;EACA;;;AAGF;ETwEE;EACA,uBCjFqB","file":"output.css"}
\ No newline at end of file