From 500bfb4d82c53c42e7f53250c6715f5fb474dc2b Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 31 Aug 2023 18:09:06 +0100
Subject: [PATCH] chore: sheet darkmode and improve responsive (#11047)

---
 .../components/UserTable/EditSheet/SheetFooterControls.tsx  | 2 +-
 packages/ui/components/sheet/sheet.tsx                      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
index faa6499654..2f5ffc5aac 100644
--- a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
@@ -35,7 +35,7 @@ function MoreInfoFooter() {
   return (
     <>
       <SheetClose asChild>
-        <Button color="secondary" type="button" className="justify-center md:w-1/5">
+        <Button color="secondary" type="button" className="w-full justify-center lg:w-1/5">
           {t("close")}
         </Button>
       </SheetClose>
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/sheet.tsx
index 1addd8ab4e..5c362fed82 100644
--- a/packages/ui/components/sheet/sheet.tsx
+++ b/packages/ui/components/sheet/sheet.tsx
@@ -39,7 +39,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={classNames(
-      "bg-inverted data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 opacity-60 backdrop-blur-sm transition-all duration-100",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 backdrop-blur-[1px] transition-all duration-100",
       className
     )}
     {...props}
@@ -49,7 +49,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 bg-default m-4 rounded-xl p-6 opacity-100 shadow-lg border",
+  "fixed z-50 scale-100 gap-4 bg-default m-4 rounded-xl p-6 opacity-100 shadow-lg border border-default overflow-y-scroll ",
   {
     variants: {
       position: {
@@ -106,7 +106,7 @@ const sheetVariants = cva(
       {
         position: ["right", "left"],
         size: "default",
-        class: "w-1/3 max-h-[calc(100vh-2rem)]",
+        class: "w-[calc(100%-2rem)] lg:w-1/3 max-h-[calc(100vh-2rem)]",
       },
       {
         position: ["right", "left"],