feat : logo try

client/package.json

@@ -16,6 +16,7 @@
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "axios": "^1.5.1",
+    "mui-image": "^1.0.7",
     "mui-markdown": "^1.1.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -52,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/mui-image": "^1.0.5",
     "@types/uuid": "^9.0.7"
   }
 }

client/src/components/NotFound.tsx

@@ -1,23 +1,11 @@
 import { AppBar, Box, CssBaseline, Typography, Link } from "@mui/material";
+import NotFoundHeadBar from "./template/NotFoundAppBar";
 
 const NotFound = () => {
   return (
     <>
       <CssBaseline />
-      <AppBar position="fixed" style={{ color: "#FFFFFF", height: 60 }}>
-        <Typography
-          variant="h4"
-          align="left"
-          style={{
-            marginLeft: 20,
-            color: "white",
-            marginTop: 10,
-            marginBottom: 10,
-          }}
-        >
-          socialdistribution
-        </Typography>
-      </AppBar>
+      <NotFoundHeadBar />
       <Box
         sx={{
           display: "flex",

client/src/components/template/AppBar.tsx

@@ -2,8 +2,9 @@ import { useContext } from "react";
 
 import AppBar from "@mui/material/AppBar";
 import Typography from "@mui/material/Typography";
-import { Button } from "@mui/material";
+import { Box, Button, Paper } from "@mui/material";
 import { toast } from "react-toastify";
+import Image from "mui-image";
 
 import {
   removeToken,
@@ -46,25 +47,25 @@ const HeadBar = () => {
         borderBottom: "1px solid #dbd9d9",
       }}
     >
-      <Link to="/home-page" 
-        style={{ 
-          textDecoration: "none" ,
+      <Link
+        to="/home-page"
+        style={{
+          textDecoration: "none",
           marginLeft: "calc(15vw - 16px)",
         }}
       >
-        <Typography
-          variant="h4"
-          align="left"
-          color="primary"
-          style={{
-            marginTop: 10,
-            marginBottom: 10,
+        <Box
+          component="img"
+          sx={{
+            height: 55,
+            width: "auto",
+            maxHeight: 55,
+            maxWidth: "auto",
           }}
-        >
-          distributed
-        </Typography>
+          alt="App Logo"
+          src="https://i.postimg.cc/Kvg7sSNK/logo-distributed.jpg"
+        />
       </Link>
-
       <Button
         size="small"
         sx={{
@@ -73,7 +74,7 @@ const HeadBar = () => {
           alignSelf: "center",
           marginRight: 1,
           borderRadius: 20,
-          paddingX: 2
+          paddingX: 2,
         }}
         onClick={handleSignOut}
         endIcon={<LogoutIcon />}

client/src/components/template/NotFoundAppBar.tsx

@@ -0,0 +1,44 @@
+import { Box } from "@mui/material";
+import AppBar from "@mui/material/AppBar";
+import Image from "mui-image";
+import { Link } from "react-router-dom";
+
+const NotFoundHeadBar = () => {
+  return (
+    <AppBar
+      position="fixed"
+      style={{
+        height: 60,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        background: "transparent",
+        backdropFilter: "blur(15px)",
+        boxShadow: "none",
+        borderBottom: "1px solid #dbd9d9",
+      }}
+    >
+      <Link
+        to="/home-page"
+        style={{
+          textDecoration: "none",
+          marginLeft: "calc(15vw - 16px)",
+        }}
+      >
+        <Box
+          component="img"
+          sx={{
+            height: 55,
+            width: "auto",
+            maxHeight: 55,
+            maxWidth: "auto",
+          }}
+          alt="App Logo"
+          src="https://i.postimg.cc/Kvg7sSNK/logo-distributed.jpg"
+        />
+      </Link>
+    </AppBar>
+  );
+};
+
+export default NotFoundHeadBar;