Updating Sheet

Author: iamhectorsosa

apps/next/components/application-layout.tsx

@@ -48,7 +48,7 @@ export const ApplicationLayout: React.FC<
         <nav className="flex flex-col items-center gap-4 px-2 sm:py-4">
           <Link
             href="/"
-            className="group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg *:size-9 md:size-8 md:text-base"
+            className="group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg *:size-6 md:size-8 md:text-base"
           >
             <SupabaseModulesIcon />
             <span className="sr-only">Supabase Modules</span>
@@ -76,11 +76,15 @@ export const ApplicationLayout: React.FC<
                 <span className="sr-only">Toggle Menu</span>
               </Button>
             </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
+            <SheetContent
+              onOpenAutoFocus={(e) => e.preventDefault()}
+              side="left"
+              className="sm:max-w-xs"
+            >
               <nav className="grid gap-6 text-lg font-medium">
                 <Link
                   href="/"
-                  className="group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg md:size-8 md:text-base"
+                  className="group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg *:size-6 md:size-8 md:text-base"
                 >
                   <SupabaseModulesIcon />
                   <span className="sr-only">Supabase Modules</span>
@@ -127,8 +131,6 @@ const SupabaseModulesIcon: React.FC = () => {
   return (
     <svg
       className="transition-all group-hover:scale-110"
-      width="110"
-      height="110"
       viewBox="0 0 110 110"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

apps/next/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-white/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <Cross2Icon className="size-4" />
+        <Cross2Icon className="size-5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

apps/next/components/user/profile-dropdown.tsx

@@ -41,7 +41,7 @@ const ProfileDropDownComponent: React.FC<{ userId: string }> = ({ userId }) => {
 
   if (profile.isLoading) {
     return (
-      <div className="relative ml-auto flex size-10 shrink-0 animate-pulse overflow-hidden rounded-full bg-muted" />
+      <div className="relative ml-auto flex size-9 animate-pulse overflow-hidden rounded-full bg-muted" />
     )
   }