made ui changes

app/forgotPassword/page.tsx

@@ -4,6 +4,7 @@ import { ArrowRight,KeyRound } from 'lucide-react'
 import Link from 'next/link'
 import toast from 'react-hot-toast'
 import { useRouter } from 'next/navigation'
+import Image from 'next/image'
 export default function Page() {
   const router=useRouter()
   const [email,setEmail]=useState('')
@@ -58,7 +59,8 @@ else{
       <div className="flex items-center justify-center px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
         <div className="xl:mx-auto xl:w-full xl:max-w-sm 2xl:max-w-md">
           <div className="mb-2 flex justify-center">
-          <KeyRound className='h-12 w-16'/>
+          <Image src={'https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/external-memories-history-flaticons-lineal-color-flat-icons.png'} alt='memoryIcon' height={64} width={64}/>
+
           </div>
           <h2 className="text-center text-2xl font-bold leading-tight text-white">
            Forgot Password

app/login/page.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { ArrowRight,KeyRound } from 'lucide-react'
 import Link from 'next/link'
 import toast from 'react-hot-toast'
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 export default function Page() {
   const router=useRouter()
@@ -37,7 +38,8 @@ export default function Page() {
       <div className="flex items-center justify-center px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
         <div className="xl:mx-auto xl:w-full xl:max-w-sm 2xl:max-w-md">
           <div className="mb-2 flex justify-center">
-          <KeyRound className='h-12 w-16'/>
+          <Image src={'https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/external-memories-history-flaticons-lineal-color-flat-icons.png'} alt='memoryIcon' height={64} width={64}/>
+
           </div>
           <h2 className="text-center text-2xl font-bold leading-tight text-white">
             Sign in to your account

app/register/page.tsx

@@ -4,6 +4,7 @@ import { ArrowRight,KeyRound } from 'lucide-react'
 import Link from 'next/link'
 import toast from 'react-hot-toast'
 import { useRouter } from 'next/navigation'
+import Image from 'next/image'
 export default function Page() {
   const router=useRouter()
     const [username,setUsername]=useState('')
@@ -40,7 +41,8 @@ async function registerUser(){
       <div className="flex items-center justify-center px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
         <div className="xl:mx-auto xl:w-full xl:max-w-sm 2xl:max-w-md">
           <div className="mb-2 flex justify-center">
-          <KeyRound className='h-12 w-16'/>
+
+          <Image src={'https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/external-memories-history-flaticons-lineal-color-flat-icons.png'} alt='memoryIcon' height={64} width={64}/>
           </div>
           <h2 className="text-center text-2xl font-bold leading-tight text-white">
             Create your account

app/ui/Navbar.tsx

@@ -6,14 +6,17 @@ import Image from 'next/image'
 import { useRouter } from "next/navigation";
 import toast from 'react-hot-toast'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 function classNames(...classes:string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
 
 export default function Navbar() {
-    const router=useRouter()
-    const [profilePic,setProfilePic]=useState("")
+  const router=useRouter()
+  const [profilePic,setProfilePic]=useState("")
+  const pathname=usePathname()
+  const publicRoutes=['/login','/register','/verifyOtp','/forgotPassword']
     async function fetchUserData() {
       const response=await fetch('/api/users/getUserData')
       const data=await response.json()
@@ -38,17 +41,25 @@ export default function Navbar() {
     }
   }
   useEffect(()=>{
+  if(!publicRoutes.includes(pathname)){
     fetchUserData()
+  }
   },[])
+  if(publicRoutes.includes(pathname)){
+    return
+  }
   return (
     <>
     <Disclosure as="nav" className="bg-gray-800">
       {({ open }) => (
         <>
           <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
             <div className="relative flex h-16 items-center justify-between">
-              <Link href={'/'}>
-                <h1 className='font-bold'>Memories.</h1>
+            <Link href={'/'}>
+              <div className='flex items-center'>
+                <Image src={'https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/external-memories-history-flaticons-lineal-color-flat-icons.png'} alt='memoryIcon' height={32} width={32}/>
+                <h1 className='font-bold ml-2'>Memories.</h1>
+                </div>
                 </Link>
               <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                 {/* Mobile menu button*/}

middleware.ts

@@ -16,5 +16,5 @@ catch(err){
 }
 
 export const config={
-    matcher:['/','/login','/register','/verifyOtp','/memories/:memoryId*']
+    matcher:['/','/login','/register','/verifyOtp','/memories/:memoryId*','/userProfile']
 }

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     images:{
-        domains:['tailwindui.com','images.unsplash.com','res.cloudinary.com']
+        domains:['tailwindui.com','images.unsplash.com','res.cloudinary.com','img.icons8.com']
     }
 };