From 8e75a16baab47313aa47e83b999fbdecebe59d80 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Mon, 22 Apr 2024 00:06:12 +0100
Subject: [PATCH] fixed layout animations in navbar

---
 src/app/@auth/(.)confirm/page.tsx          |  2 +-
 src/app/@auth/(.)payee/page.tsx            | 15 +++++++--------
 src/app/@auth/(.)search/page.tsx           |  9 +++------
 src/app/@auth/(.)send/page.tsx             |  4 ++--
 src/app/components/BottomNav/BottomNav.tsx |  4 ++--
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/app/@auth/(.)confirm/page.tsx b/src/app/@auth/(.)confirm/page.tsx
index d191e15..4e0d5fb 100644
--- a/src/app/@auth/(.)confirm/page.tsx
+++ b/src/app/@auth/(.)confirm/page.tsx
@@ -96,7 +96,7 @@ export default function Page({ showConfirm }: ConfirmProps) {
       transition={{ duration: 0.5, ease: 'easeInOut' }}
       >
       <DrawerHeader>
-        <DrawerTitle className='grid grid-cols-3 items-center'>
+        <DrawerTitle className='grid grid-cols-3 items-center pt-2'>
          <motion.div
             key={'back'}
             layoutId='back'
diff --git a/src/app/@auth/(.)payee/page.tsx b/src/app/@auth/(.)payee/page.tsx
index f45edcc..b4c5b04 100644
--- a/src/app/@auth/(.)payee/page.tsx
+++ b/src/app/@auth/(.)payee/page.tsx
@@ -144,11 +144,10 @@ export default function Page() {
     <>
       <AnimatePresence>
         <DrawerHeader>
-          <DrawerTitle className='grid grid-cols-3 items-center pt-2'>
+          <DrawerTitle className='grid grid-cols-3 items-center pt-2 h-6'>
             <motion.div
               className='w-auto'
               key={'back'}
-              layoutId='back'
               onClick={() => {
                 router.back();
               }}
@@ -162,9 +161,8 @@ export default function Page() {
             >
               {payeeAddress && useFindPayeeName(payeeAddress, contactsState)}
             </motion.p>
-            {!isInContacts && (
+           {!isInContacts && (
               <motion.div
-                layout
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
@@ -172,17 +170,18 @@ export default function Page() {
               >
                 <div
                   onClick={handleAddUser}
-                  className='text-muted-foreground flex content-center items  text-base font-light'
+                  className='text-muted-foreground flex content-center '
                 >
                   <span>
                     <UserPlus
-                      strokeWidth={2}
-                      className='fill-muted-foreground stroke-muted-foreground h-auto '
+                      strokeWidth={1}
+                      size={20}
+                      className='fill-muted-foreground stroke-muted-foreground '
                     />
                   </span>
                 </div>{' '}
               </motion.div>
-            )}
+            )} 
           </DrawerTitle>
         </DrawerHeader>
         <motion.div
diff --git a/src/app/@auth/(.)search/page.tsx b/src/app/@auth/(.)search/page.tsx
index 0b31554..e7a1ae2 100644
--- a/src/app/@auth/(.)search/page.tsx
+++ b/src/app/@auth/(.)search/page.tsx
@@ -84,7 +84,7 @@ export default function Page() {
   return (
     <>
       <DrawerHeader>
-        <DrawerTitle className='grid grid-cols-3 items-center'>
+        <DrawerTitle className='grid grid-cols-3 pt-2 h-6'>
           <motion.div key={'back'} layoutId='back'>
             <BackButton
               onClick={() => {
@@ -93,9 +93,7 @@ export default function Page() {
               }}
             />
           </motion.div>
-          <p className='text-center font-normal'>
-            Search
-          </p>
+          <p className='text-center'>Search</p>
           <div className='ml-auto'></div>
         </DrawerTitle>
       </DrawerHeader>
@@ -128,7 +126,7 @@ export default function Page() {
               {payee !== '' && (
                 <motion.div
                   key='clear'
-                  initial={{ opacity: 0, }}
+                  initial={{ opacity: 0 }}
                   animate={{
                     opacity: 1,
                   }}
@@ -226,7 +224,6 @@ export default function Page() {
           {payee == '' && (
             <>
               <motion.div
-                
                 key='search-page-check'
                 initial={{ opacity: 0 }}
                 animate={{
diff --git a/src/app/@auth/(.)send/page.tsx b/src/app/@auth/(.)send/page.tsx
index b115d4c..c9b563c 100644
--- a/src/app/@auth/(.)send/page.tsx
+++ b/src/app/@auth/(.)send/page.tsx
@@ -35,7 +35,7 @@ export default function Page() {
   return (
     <>
       <DrawerHeader>
-        <DrawerTitle className='grid grid-cols-3 items-center'>
+        <DrawerTitle className='grid grid-cols-3 items-center pt-2'>
           <motion.div
             key={'back'}
             layoutId='back'
@@ -61,7 +61,7 @@ export default function Page() {
                 className='h-auto w-auto'
                 href={{ pathname: `/payee`, query: { payeeAddress: payee } }}
               >
-                <Circle className='fill-muted-foreground stroke-muted-foreground h-auto w-auto rounded-full stroke-1' />
+                <Circle size={20} className='fill-muted-foreground stroke-muted-foreground h-auto w-auto rounded-full stroke-1' />
               </Link>
             </Link>
           </div>
diff --git a/src/app/components/BottomNav/BottomNav.tsx b/src/app/components/BottomNav/BottomNav.tsx
index 4f3bb4c..3c14903 100644
--- a/src/app/components/BottomNav/BottomNav.tsx
+++ b/src/app/components/BottomNav/BottomNav.tsx
@@ -47,10 +47,10 @@ const BottomNavbar = () => {
       <AnimatePresence>
           <motion.nav
             layout
-            key={'nav'}
+            /* key={'nav'}
              initial={{ opacity: 1, }}
             animate={{ opacity: showNav ? 1 : 0.5, y: showNav ? 0 : 0 }}
-            exit={{ opacity: 0.5, }}
+            exit={{ opacity: 0.5, }} */
             transition={{ duration: 0.4, ease: 'easeIn' }} 
             className='fixed bottom-0 flex h-auto w-full justify-between bg-transparent bg-opacity-0 bg-gradient-to-br from-slate-50/10 p-4 px-8 pb-8 pt-4 backdrop-blur-xl  '
           >