fix up the notification banner border and padding and other stuff

app/(dashboard)/home/page.tsx

@@ -4,6 +4,7 @@ import BalanceWidget from '@/app/components/BalanceWidget';
 import RecentPaymentsWidget from '@/app/components/RecentPaymentsWidget';
 import MonthToDateWidget from '@/app/components/MonthToDateWidget';
 import CustomersWidget from '@/app/components/CustomersWidget';
+import NotificationBannerContainer from '@/app/components/NotificationBannerContainer';
 import EmbeddedComponentContainer from '@/app/components/EmbeddedComponentContainer';
 import {ConnectNotificationBanner} from '@stripe/react-connect-js';
 import {useSession} from 'next-auth/react';
@@ -20,11 +21,11 @@ export default function Dashboard() {
   return (
     <>
       <h1 className="text-3xl font-bold">Woof woof, {name}!</h1>
-      <div className="bg-white">
+      <NotificationBannerContainer>
         <EmbeddedComponentContainer>
           <ConnectNotificationBanner />
         </EmbeddedComponentContainer>
-      </div>
+      </NotificationBannerContainer>
       <div className="flex flex-row items-start space-x-5">
         <div className="min-w-[700px] flex-1">
           <Schedule />

app/(dashboard)/settings/page.tsx

@@ -8,6 +8,7 @@ import {
 } from '@stripe/react-connect-js';
 import Container from '@/app/components/Container';
 import EmbeddedComponentContainer from '@/app/components/EmbeddedComponentContainer';
+import NotificationBannerContainer from '@/app/components/NotificationBannerContainer';
 import {useSession} from 'next-auth/react';
 import EditAccountButton from '@/app/components/EditAccountButton';
 import {Link} from '@/components/ui/link';
@@ -16,6 +17,7 @@ import {LoaderCircle, Plus} from 'lucide-react';
 
 export default function Settings() {
   const {data: session} = useSession();
+  const enableBorder = false;
   const [showPassword, setShowPassword] = React.useState(false);
   const [buttonLoading, setButtonLoading] = React.useState(false);
   const email = session?.user.email;
@@ -43,11 +45,11 @@ export default function Settings() {
 
   return (
     <>
-      <Container>
+      <NotificationBannerContainer>
         <EmbeddedComponentContainer>
           <ConnectNotificationBanner />
         </EmbeddedComponentContainer>
-      </Container>
+      </NotificationBannerContainer>
       <Container>
         <div className="flex flex-row justify-between">
           <h1 className="mb-4 text-xl font-semibold">Details</h1>

app/components/EmbeddedComponentContainer.tsx

@@ -9,7 +9,7 @@ const EmbeddedComponentContainer = ({
 
   return (
     <div
-      className={`${enableBorder ? 'rounded-lg border-2 border-dashed border-[#7F81FA] p-[4px]' : 'p-[6px]'} transition-border duration-200`}
+      className={`${enableBorder ? 'rounded-lg border-2 border-dashed border-[#7F81FA] p-[6px] pb-[10px]' : 'p-[6px]'} transition-border duration-200`}
     >
       {children}
     </div>

app/components/NotificationBannerContainer.tsx

@@ -0,0 +1,19 @@
+import {useEmbeddedComponentBorder} from '@/app/hooks/EmbeddedComponentBorderProvider';
+
+const NotificationBannerContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const {enableBorder} = useEmbeddedComponentBorder();
+
+  return (
+    <div
+      className={`rounded-md border bg-white ${enableBorder ? 'p-[6px]' : ' p-[8px] pb-[12px]'}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default NotificationBannerContainer;

app/hooks/useConnect.ts

@@ -84,6 +84,7 @@ export const useConnect = (demoOnboarding: boolean) => {
       fontFamily: 'Sohne, inherit',
 
       colorPrimary: '#27AE60',
+      colorBackground: '#FFFFFF',
 
       buttonPrimaryColorBackground: '#27AE60',
       buttonPrimaryColorText: '#f4f4f5',