drawer fixed

Vizzuality · Feb 16, 2024 · 06ee305 · 06ee305
1 parent 1d5f261
commit 06ee305
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/client/src/components/ui/drawer.tsx b/client/src/components/ui/drawer.tsx
@@ -10,7 +10,12 @@ const Drawer = ({
   shouldScaleBackground = true,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    modal={false}
+    direction="left"
+    {...props}
+  />
 );
 Drawer.displayName = 'Drawer';
 
@@ -37,10 +42,11 @@ const DrawerContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DrawerPortal>
+    <DrawerOverlay />
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 left-[580px] top-0 z-10 flex h-auto w-3/5 flex-col rounded-t-[10px]',
+        'top-inset pointer-events-auto fixed inset-x-0 bottom-2 right-6 flex h-[calc(100vh-16px)] flex-col bg-none',
         className
       )}
       {...props}

diff --git a/client/src/containers/projects/detail/dashboard.tsx b/client/src/containers/projects/detail/dashboard.tsx
@@ -19,7 +19,7 @@ export default function ProjectDashboard() {
 
   return (
     dashboard && (
-      <div className="absolute bottom-0 right-4 top-0 z-50 my-2 box-content w-7/12 w-full rounded-3xl bg-neutral-50 px-6 py-8 shadow-md">
+      <div className="z-50 box-content h-full w-full rounded-3xl bg-neutral-50 px-6 py-8 shadow-md">
         <div>
           <h3 className="mb-4 text-xl font-extrabold text-gray-400">Overview</h3>
           <button
@@ -91,19 +91,19 @@ export default function ProjectDashboard() {
               </Dialog>
             </div>
           </div>
-          <div className="rounded-xl bg-white bg-white p-4 shadow-sm">
+          <div className="rounded-xl bg-white p-4 shadow-sm">
             <div className="flex items-center justify-between">
               <h3 className="text-lg text-green-800">Funding in USD</h3>
               <Info className="h-5 w-5 text-green-800" />
             </div>
           </div>
-          <div className="rounded-xl bg-white bg-white p-4 shadow-sm">
+          <div className="rounded-xl bg-white p-4 shadow-sm">
             <div className="flex items-center justify-between">
               <h3 className="text-lg text-green-800">Trained people per year</h3>
               <Info className="h-5 w-5 text-green-800" />
             </div>
           </div>
-          <div className="rounded-xl bg-white bg-white p-4 shadow-sm">
+          <div className="rounded-xl bg-white p-4 shadow-sm">
             <div className="flex items-center justify-between">
               <h3 className="text-xl text-green-800">Community beneficiaries</h3>
               <Info className="h-5 w-5 text-green-800" />

diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
@@ -118,7 +118,7 @@ export default function ProjectDetailPanel() {
             <ChevronRight className="h-4 w-4 text-yellow-900 group-hover:text-yellow-50" />
           </Button>
         </DrawerTrigger>
-        <DrawerContent>
+        <DrawerContent className="left-[512px] w-[calc(100vw-584px)]">
           <ProjectDashboard />
         </DrawerContent>
       </Drawer>