added more gradients to the app

Stephen-Gordon · Mar 26, 2024 · 922dde7 · 922dde7
1 parent 027f235
commit 922dde7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/src/app/@drawer/(.)transactions/page.tsx b/src/app/@drawer/(.)transactions/page.tsx
@@ -122,9 +122,9 @@ export default function Page() {
           }} /*  onAnimationComplete={(definition) => {
         setShowTxs(true);
       }} */
-          className='bg-background absolute z-50 min-h-screen w-full overflow-hidden text-xl'
+          className='from-accent to bg-accent/80 absolute z-50 min-h-screen w-full overflow-hidden bg-gradient-to-tr  text-xl backdrop-blur-xl'
         >
-          <Card style={{ border: '0px' }}>
+          <Card style={{ border: '0px' }} className='bg-transparent'>
             <CardHeader>
               <CardTitle className='grid grid-cols-3 items-center'>
                 <div

diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx
@@ -3,27 +3,37 @@ import Balance from "../Balance/Balance";
 import { HoverBorderGradient } from "../ui/hover-border-gradient";
 import { TextGenerateEffect } from "../ui/text-generate-effect";
 import truncateEthAddress from "truncate-eth-address";
-
+import { motion } from "framer-motion";
 export default function CreditCard() {
 
     const address = useGetAddress();
 
     return (
       <>
-        <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg'>
-          <div className='absolute -z-50 h-full w-full rounded-xl bg-transparent bg-gradient-to-tr from-slate-50/10 backdrop-blur-xl'>
-            <></>
-          </div>
+        <motion.div
+          whileTap={{
+            scale: 0.95,
+          }}
+          transition={{
+            duration: 0.3,
+
+          }}
+        >
+          <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg'>
+            <div className='absolute -z-50 h-full w-full rounded-xl bg-transparent bg-gradient-to-tr from-slate-50/10 backdrop-blur-xl'>
+              <></>
+            </div>
 
-          <div className='absolute z-50 grid h-full w-full content-center items-center justify-center  p-2 text-center text-5xl text-black/80 mix-blend-exclusion dark:text-white/80'>
-            <TextGenerateEffect words='$56'></TextGenerateEffect>
-          </div>
-          <div className='absolute z-50 mb-auto grid h-full w-full content-end p-4'>
-            <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base mix-blend-exclusion'>
-              {truncateEthAddress(address as string)}
+            <div className='absolute z-50 grid h-full w-full content-center items-center justify-center  p-2 text-center text-5xl text-black/80 mix-blend-exclusion dark:text-white/80'>
+              <TextGenerateEffect words='$56'></TextGenerateEffect>
+            </div>
+            <div className='absolute z-50 mb-auto grid h-full w-full content-end p-4'>
+              <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base mix-blend-exclusion'>
+                {truncateEthAddress(address as string)}
+              </div>
             </div>
-          </div>
-        </HoverBorderGradient>
+          </HoverBorderGradient>
+        </motion.div>
       </>
     );
 }
diff --git a/src/app/components/Layouts/SheetLayout.tsx b/src/app/components/Layouts/SheetLayout.tsx
@@ -53,7 +53,7 @@ const SheetLayout = ({ children }) => {
       >
         <DrawerOverlay />
         <DrawerContent
-          className='ios' /*  className='bg-clip-padding backdrop-blur-sm backdrop-filter ' */
+          className='' /*  className='bg-clip-padding backdrop-blur-sm backdrop-filter ' */
         >
           {children}
         </DrawerContent>

diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx
@@ -58,9 +58,9 @@ export default function Activity() {
           key='activity-key'
           layoutId='activity'
           transition={{ duration: 0.3 }}
-          className='bg-slate-50/10 backdrop-blur-xl w-full rounded-full text-xl '
+          className='w-full rounded-2xl bg-gradient-to-tr from-accent to bg-accent/80  backdrop-blur-xl '
         >
-          <Card className=''>
+          <Card className='bg-transparent '>
             <CardHeader>
               <motion.div>
                 <CardTitle>Recent Transactions</CardTitle>

diff --git a/src/app/components/ui/drawer.tsx b/src/app/components/ui/drawer.tsx
@@ -52,7 +52,7 @@ const DrawerContent = React.forwardRef<
       ref={ref}
       /* style={{ height: 'calc(100vh - 2rem)' }} */
       className={cn(
-        '  bg-background/80 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-[96%] flex-col rounded-t-[16px] border-t',
+        '  from-background to bg-background/80 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-[96%] flex-col rounded-t-[16px] border-t bg-gradient-to-t text-xl backdrop-blur-2xl',
         className
       )}
       {...props}