From c711b75cd7e687493bdaa483dbec62c35821b66b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 16 Aug 2024 19:30:37 -0700
Subject: [PATCH] Moved title, changed default value

---
 Client/src/Pages/NotFound/index.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 113f3fd34..68120b0a3 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -11,7 +11,7 @@ import NotFoundSvg from "../../../src/assets/Images/sushi_404.svg";
  * So That why we're using JavaScript default parameters instead.
  */
 const DefaultValue = {
-  title: "We cannot find this page",
+  title: "Oh no! You dropped your sushi!",
   desc: "Either the URL doesn’t exist, or you don’t have access to it.",
 };
 
@@ -27,7 +27,7 @@ const DefaultValue = {
  * />
  *
  * @param {Object} props - The component props.
- * @param {string} [props.title="We cannot find this page"] - The title of the error page.
+ * @param {string} [props.title="Oh no! You dropped your sushi!"] - The title of the error page.
  * @param {string} [props.desc="Either the URL doesn’t exist, or you don’t have access to it."] - The description of the error page.
  * @returns {JSX.Element} The rendered error page component.
  */
@@ -37,10 +37,9 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
   return (
     <Stack className="not-found-page" justifyContent="center">
       <Stack gap="20px" alignItems="center">
+        <img src={NotFoundSvg} alt="404" style={{ maxHeight: "25rem" }} />
         <Typography component="h1">{title}</Typography>
         <Typography>{desc}</Typography>
-        <img src={NotFoundSvg} alt="404" style={{ maxHeight: "25rem" }} />
-        <Typography>Oh no! You dropped your sushi!</Typography>
         <Button
           label="Go to the main dashboard"
           level="primary"