From 58fb6e472c3376a0886f020ab5ec573bcd5d1bdf Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Thu, 28 Mar 2024 16:38:24 +0000
Subject: [PATCH] finally fixed bugged drawer animations

---
 src/app/components/CreditCard/CreditCard.tsx | 12 ++++++------
 src/app/components/ui/VaulDrawer.tsx         |  3 +--
 src/app/home/page.tsx                        |  6 +++---
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx
index f04b865..8573d32 100644
--- a/src/app/components/CreditCard/CreditCard.tsx
+++ b/src/app/components/CreditCard/CreditCard.tsx
@@ -72,19 +72,19 @@ export default function CreditCard() {
             duration: 0.3,
           }}
         >
-          <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg'>
-            <div className='via-background absolute -z-50 h-full  w-full rounded-xl bg-gradient-to-br  from-slate-50/10 to-[#E45368]/40  backdrop-blur-2xl'>
+          <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg overflow'>
+            <div className='via-background absolute -z-10 h-full  w-full rounded-xl bg-gradient-to-br  from-slate-50/10 to-[#E45368]/40  backdrop-blur-2xl'>
               <></>
             </div>
 
-            <div className='text-card-foreground absolute z-50 grid h-full w-full content-center items-center  justify-center p-2 text-center text-5xl mix-blend-exclusion '>
+            <div className='text-card-foreground absolute z-10 grid h-full w-full content-center items-center  justify-center p-2 text-center text-5xl '>
               {reduxBalance && formatUnits(reduxBalance, 6)}
             </div>
-            <div className='absolute z-50 mb-auto flex h-full w-full content-end justify-between p-4'>
-              <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base mix-blend-exclusion'>
+            <div className='sticky z-10 mb-auto flex h-full w-full content-end justify-between p-4'>
+              <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base'>
                 {user?.google?.name}
               </div>
-              <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-right text-base mix-blend-exclusion'>
+              <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-right text-base'>
                 {truncateEthAddress(address as string)}
               </div>
             </div>
diff --git a/src/app/components/ui/VaulDrawer.tsx b/src/app/components/ui/VaulDrawer.tsx
index 1d53176..db0e100 100644
--- a/src/app/components/ui/VaulDrawer.tsx
+++ b/src/app/components/ui/VaulDrawer.tsx
@@ -19,10 +19,9 @@ export function VaulDrawer({children}) {
       open={isOpen}
       shouldScaleBackground
     >
-      
       <Drawer.Portal>
         <Drawer.Overlay className='fixed inset-0 bg-black/40' />
-        <Drawer.Content className='fixed bottom-0 left-0 right-0 mt-24 flex h-[96%] flex-col rounded-t-[10px] bg-background'>
+        <Drawer.Content className='from-background to bg-background/80 fixed bottom-0 left-0 right-0 mt-24 flex h-[96%] flex-col rounded-t-[10px] bg-gradient-to-t backdrop-blur-2xl'>
           {children}
         </Drawer.Content>
       </Drawer.Portal>
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 759ecc1..e0e71ee 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -101,12 +101,12 @@ export default function Page() {
       <div id='render' className='relative'>
        
         <div>
-          {/* <div className='absolute -z-50 '>
+         {/*  <div className='absolute -z-50 '>
             <BackgroundGradientAnimation />
-          </div>  */}
+          </div>   */}
           <motion.div
            /*  style={{ y, scale, opacity }} */
-            className='items-center p-2 text-center text-5xl mix-blend-exclusion'
+            className='items-center p-2 text-center text-5xl'
           >
             {/*  <Balance />  */}
             {/*   {address} */}