modals: Improve Modal aesthetics

Author: emilwidlund

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/account/ClientPage.tsx

@@ -315,6 +315,7 @@ export default function ClientPage({
         ) : null}
 
         <Modal
+          title="Create Payout Account"
           isShown={isShownSetupModal}
           className="min-w-[400px]"
           hide={hideSetupModal}

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/settings/members/ClientPage.tsx

@@ -90,6 +90,7 @@ export default function ClientPage({
       )}
 
       <Modal
+        title="Invite Member"
         className="max-w-(--breakpoint-sm)!"
         modalContent={
           <InviteMemberModal

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/usage-billing/events/ClientPage.tsx

@@ -341,6 +341,7 @@ const ClientPage: React.FC<ClientPageProps> = ({ organization }) => {
             </div>
           </div>
           <Modal
+            title="Create Event"
             isShown={isEventCreationGuideShown}
             hide={hideEventCreationGuide}
             modalContent={

clients/apps/web/src/components/Auth/GetStartedButton.tsx

@@ -75,6 +75,7 @@ const GetStartedButton = ({
       </Button>
 
       <Modal
+        title="Login"
         isShown={isModalShown}
         hide={hideModal}
         modalContent={

clients/apps/web/src/components/CheckoutLinks/CheckoutLinkPage.tsx

@@ -121,6 +121,7 @@ export const CheckoutLinkPage = ({ checkoutLink }: CheckoutLinkPageProps) => {
       />
 
       <Modal
+        title="Checkout QR Code"
         isShown={isQRCodeModalOpen}
         hide={hideQRCodeModal}
         modalContent={

clients/apps/web/src/components/CustomerPortal/CustomerPortalSettings.tsx

@@ -110,6 +110,7 @@ export const CustomerPortalSettings = ({
       </Well>
 
       <Modal
+        title="Add Payment Method"
         isShown={isAddPaymentMethodModalOpen}
         hide={hideAddPaymentMethodModal}
         modalContent={

clients/apps/web/src/components/CustomerPortal/OrderPaymentRetryModal.tsx

@@ -91,6 +91,7 @@ export const OrderPaymentRetryModal = ({
 
   return (
     <Modal
+      title="Update Payment Method"
       isShown={isOpen}
       hide={handleClose}
       modalContent={

clients/apps/web/src/components/Events/EventCreationGuideModal.tsx

@@ -17,7 +17,7 @@ export const EventCreationGuideModal = ({
       <div className="flex flex-col gap-4 p-8">
         <h1 className="text-2xl">Event Ingestion</h1>
         <p>Events can only be created through the Polar Ingestion API.</p>
-        <Well className="dark:border-polar-700 rounded-lg border border-gray-200 p-4 text-sm">
+        <Well className="dark:bg-polar-900 rounded-lg bg-gray-100 p-4 text-sm">
           <SyntaxHighlighterClient
             lang="typescript"
             code={`import { Polar } from "@polar-sh/sdk";

clients/apps/web/src/components/Landing/LandingLayout.tsx

@@ -153,6 +153,7 @@ const LandingPageMobileNavigation = () => {
         </SidebarContent>
       </Sidebar>
       <Modal
+        title="Login"
         isShown={isModalShown}
         hide={hideModal}
         modalContent={<AuthModal />}
@@ -307,6 +308,7 @@ const LandingPageDesktopNavigation = () => {
         </Button>
       </div>
       <Modal
+        title="Login"
         isShown={isModalShown}
         hide={hideModal}
         modalContent={<AuthModal />}

clients/apps/web/src/components/Layout/Public/TopbarRight.tsx

@@ -54,6 +54,7 @@ const TopbarRight = ({
           />
 
           <Modal
+            title="Login"
             isShown={isModalShown}
             hide={hideModal}
             modalContent={<AuthModal returnTo={loginReturnTo} />}