From 922dde76aa8da486566c267fcfb76bf50dbdb5d8 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Tue, 26 Mar 2024 00:02:18 +0000
Subject: [PATCH] added more gradients to the app

---
 src/app/@drawer/(.)transactions/page.tsx     |  4 +--
 src/app/components/CreditCard/CreditCard.tsx | 36 +++++++++++++-------
 src/app/components/Layouts/SheetLayout.tsx   |  2 +-
 src/app/components/activity/Activity.tsx     |  4 +--
 src/app/components/ui/drawer.tsx             |  2 +-
 5 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/app/@drawer/(.)transactions/page.tsx b/src/app/@drawer/(.)transactions/page.tsx
index 84e31f9..77924ca 100644
--- 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
index 7727046..2afba8d 100644
--- 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>
       </>
     );
 }
\ No newline at end of file
diff --git a/src/app/components/Layouts/SheetLayout.tsx b/src/app/components/Layouts/SheetLayout.tsx
index d8cf770..4593e78 100644
--- 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
index 236db3c..46e01f9 100644
--- 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
index a5deb04..4cee209 100644
--- 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}