Update profile image as MUI IconButton

Author: reiiiiiiiiii

src/components/NavBar.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 
 export default function NavBar() {
   return (
     <>
-      <div className="relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
+      <div className="bg-darken relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
         <Image
-          src={"/background.png"}
+          src={'/background.png'}
           alt="background"
           className="-z-10"
           fill
@@ -20,13 +20,16 @@ export default function NavBar() {
           UTD Notebook
         </Link>
         <div className="ml-auto flex gap-x-2 md:gap-x-4">
-            <Image
-              src={"/"}
-              alt="profile picture"
-              width={256}
-              height={256}
-              className='flex rounded-full border border-white size-16 flex-shrink-0'
-            />
+          <IconButton size="large" sx={{ p: 0 }}>
+            <div className="relative size-16 flex-shrink-0">
+              <Image
+                src="/icon-white.svg"
+                alt="profile picture"
+                fill
+                className="rounded-full border border-white object-cover"
+              />
+            </div>
+          </IconButton>
         </div>
       </div>
     </>