From 5e7817548b7972a72370dfa70550eda69a6664a1 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Mon, 27 May 2024 10:38:01 -0230
Subject: [PATCH] Fix connect ui bg (#26794)

* Fix connect ui bg

* Remove unused bodyclassname prop
---
 .../studio/components/interfaces/Home/Connect/Connect.tsx | 2 +-
 .../studio/components/interfaces/Reports/ReportWidget.tsx | 8 +-------
 .../DatabaseSettings/DatabaseConnectionString.tsx         | 3 +--
 apps/studio/components/ui/Panel.tsx                       | 1 -
 4 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/studio/components/interfaces/Home/Connect/Connect.tsx b/apps/studio/components/interfaces/Home/Connect/Connect.tsx
index a47b6554c22..3261ea2c0a8 100644
--- a/apps/studio/components/interfaces/Home/Connect/Connect.tsx
+++ b/apps/studio/components/interfaces/Home/Connect/Connect.tsx
@@ -170,7 +170,7 @@ const Connect = () => {
             </span>
           </Button>
         </DialogTrigger>
-        <DialogContent className={cn('sm:max-w-5xl p-0')}>
+        <DialogContent className={cn('sm:max-w-5xl p-0 bg-surface-100')}>
           <DialogHeader className="pb-0">
             <DialogTitle>Connect to your project</DialogTitle>
             <DialogDescription>
diff --git a/apps/studio/components/interfaces/Reports/ReportWidget.tsx b/apps/studio/components/interfaces/Reports/ReportWidget.tsx
index 7429aeaf7dd..f7285b16a7f 100644
--- a/apps/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -45,13 +45,7 @@ const ReportWidget = (props: ReportWidgetProps) => {
   const projectRef = ref as string
 
   return (
-    <Panel
-      noMargin
-      noHideOverflow
-      className={cn('pb-0', props.className)}
-      bodyClassName="h-full"
-      wrapWithLoading={false}
-    >
+    <Panel noMargin noHideOverflow className={cn('pb-0', props.className)} wrapWithLoading={false}>
       <Panel.Content className="space-y-4">
         <div className="flex flex-row items-start justify-between">
           <div className="gap-2">
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx
index f703f5f61d6..470d8399c17 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx
@@ -170,9 +170,8 @@ export const DatabaseConnectionString = ({ appearance }: DatabaseConnectionStrin
       <Panel
         className={cn(
           '!m-0 [&>div:nth-child(1)]:!border-0 [&>div:nth-child(1)]:!p-0',
-          appearance === 'minimal' && 'border-0 shadow-none'
+          appearance === 'minimal' && 'border-0 shadow-none bg-transparent'
         )}
-        bodyClassName={cn(appearance === 'minimal' && 'bg-transparent')}
         titleClasses={cn(appearance === 'minimal' && 'bg-transparent')}
         title={
           <div
diff --git a/apps/studio/components/ui/Panel.tsx b/apps/studio/components/ui/Panel.tsx
index 76965332a19..6fb0c4e5313 100644
--- a/apps/studio/components/ui/Panel.tsx
+++ b/apps/studio/components/ui/Panel.tsx
@@ -2,7 +2,6 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { Loading, cn } from 'ui'
 
 interface PanelProps {
-  bodyClassName?: string
   className?: string
   footer?: JSX.Element | false
   loading?: boolean