added scaled background

Stephen-Gordon · Mar 13, 2024 · ff2f304 · ff2f304
1 parent 74deac7
commit ff2f304
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 38 deletions.
diff --git a/src/app/@auth/(.)search/page.tsx b/src/app/@auth/(.)search/page.tsx
@@ -90,7 +90,10 @@ export default function Page() {
                     <motion.div
                       key='clear'
                       initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
+                      animate={{
+                        opacity: 1,
+                        transition: { duration: 0.4, ease: 'easeInOut' },
+                      }}
                       exit={{ opacity: 0 }}
                       className='pr-4 '
                     >
@@ -113,7 +116,10 @@ export default function Page() {
                 <motion.div
                   key='send-button'
                   initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
+                  animate={{
+                    opacity: 1,
+                    transition: { duration: 0.4, ease: 'easeInOut' },
+                  }}
                   exit={{ opacity: 0 }}
                   className='w-full'
                 >
@@ -144,7 +150,10 @@ export default function Page() {
                 <motion.div
                   key='vaild-address'
                   initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
+                  animate={{
+                    opacity: 1,
+                    transition: { duration: 0.4, ease: 'easeInOut' },
+                  }}
                   exit={{ opacity: 0 }}
                   className='w-full'
                 >
@@ -168,7 +177,10 @@ export default function Page() {
               <motion.div
                 key='search-page'
                 initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
+                animate={{
+                  opacity: 1,
+                  transition: { duration: 0.4, ease: 'easeInOut' },
+                }}
                 exit={{ opacity: 0 }}
                 className='w-full'
               >

diff --git a/src/app/components/KeyPad/KeyPad.tsx b/src/app/components/KeyPad/KeyPad.tsx
@@ -21,7 +21,7 @@ export default function KeyPad({ setUsdcAmount, usdcAmount }: KeyPadProps) {
   }, [nums]);
 
   return (
-    <div className='mx-auto flex max-w-xs flex-col items-center justify-end p-6 md:justify-center'>
+    <div className='mx-auto flex max-w-xs flex-col justify-center'>
       <div className='m-auto text-center text-8xl font-extralight tabular-nums text-white'>
         ${usdcAmount || 0}
       </div>

diff --git a/src/app/components/Layouts/SheetLayout.tsx b/src/app/components/Layouts/SheetLayout.tsx
@@ -16,7 +16,6 @@ import {
 } from '@/app/components/ui/drawer';
 import { useState } from 'react';
 
-
 const SheetLayout = ({ children }) => {
   const isOpen = useSelector((state) => state.sheet.value);
 
@@ -41,12 +40,14 @@ const SheetLayout = ({ children }) => {
         <Sheet.Backdrop onTap={() => dispatch(setSheet(false))} />
       </Sheet> */}
       <Drawer
+        shouldScaleBackground={true}
         onClose={() => {
           dispatch(setSheet(false));
         }}
         open={isOpen}
       >
-        <DrawerContent className='h-auto bg-clip-padding backdrop-blur-sm backdrop-filter '>
+        <DrawerContent /*  className='bg-clip-padding backdrop-blur-sm backdrop-filter ' */
+        >
           {children}
         </DrawerContent>
       </Drawer>

diff --git a/src/app/components/Scanner/Scanner.tsx b/src/app/components/Scanner/Scanner.tsx
@@ -81,7 +81,7 @@ export default function Scanner({
                     initial={{ opacity: 0 }}
                     animate={{
                       opacity: 1,
-                      transition: { duration: 0.3, ease: 'easeInOut' },
+                      transition: { duration: 0.4, ease: 'easeInOut' },
                     }}
                     exit={{ opacity: 0 }}
                     key='qrcode'

diff --git a/src/app/components/ui/button.tsx b/src/app/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'w-full flex items-center active:scale-75 transition-transform transform transition-all duration-300 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'w-full flex items-center active:scale-75 transition-transform transform transition-all duration-400 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

diff --git a/src/app/components/ui/drawer.tsx b/src/app/components/ui/drawer.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -13,26 +13,26 @@ const Drawer = ({
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-)
-Drawer.displayName = "Drawer"
+);
+Drawer.displayName = 'Drawer';
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -42,9 +42,9 @@ const DrawerContent = React.forwardRef<
     <DrawerOverlay />
     <DrawerPrimitive.Content
       ref={ref}
-      style={{ height: 'calc(100vh - 4rem)' }}
+      /* style={{ height: 'calc(100vh - 2rem)' }} */
       className={cn(
-        'bg-background/90 fixed inset-x-0 bottom-0 z-50 mt-24 flex flex-col rounded-t-[10px] border-t bg-opacity-10 bg-clip-padding backdrop-blur-sm backdrop-filter',
+        'bg-background/90 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-[96%] flex-col  rounded-t-[10px] border-t bg-opacity-10 bg-clip-padding backdrop-blur-sm backdrop-filter',
         className
       )}
       {...props}
@@ -54,29 +54,29 @@ const DrawerContent = React.forwardRef<
     </DrawerPrimitive.Content>
   </DrawerPortal>
 ));
-DrawerContent.displayName = "DrawerContent"
+DrawerContent.displayName = 'DrawerContent';
 
 const DrawerHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
     {...props}
   />
-)
-DrawerHeader.displayName = "DrawerHeader"
+);
+DrawerHeader.displayName = 'DrawerHeader';
 
 const DrawerFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
     {...props}
   />
-)
-DrawerFooter.displayName = "DrawerFooter"
+);
+DrawerFooter.displayName = 'DrawerFooter';
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -85,25 +85,25 @@ const DrawerTitle = React.forwardRef<
   <DrawerPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      'text-lg font-semibold leading-none tracking-tight',
       className
     )}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
@@ -116,4 +116,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -205,7 +205,8 @@ export default function RootLayout({
                           /*  style={{
                             backgroundColor: 'rgba(16, 16, 18, 1)',
                           }} */
-                          className=' h-screen w-screen text-gray-300'
+                          vaul-drawer-wrapper=''
+                          className='min-h-[100vh] text-gray-300'
                         >
                           {children}
                         </main>