finally fixed bugged drawer animations

Stephen-Gordon · Mar 28, 2024 · 58fb6e4 · 58fb6e4
1 parent df90515
commit 58fb6e4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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} */}