feat: Tighter modals (#20238)

cypress/e2e/billingv2.cy.ts

@@ -18,10 +18,7 @@ describe('Billing', () => {
 
         cy.get('[data-attr=more-button]').first().click()
         cy.contains('.LemonButton', 'Unsubscribe').click()
-        cy.get('.LemonModal__content h3').should(
-            'contain',
-            'Why are you unsubscribing from Product analytics + data stack?'
-        )
+        cy.get('.LemonModal h3').should('contain', 'Why are you unsubscribing from Product analytics + data stack?')
         cy.get('[data-attr=unsubscribe-reason-survey-textarea]').type('Product analytics')
         cy.contains('.LemonModal .LemonButton', 'Unsubscribe').click()
 
@@ -45,17 +42,14 @@ describe('Billing', () => {
     it('Unsubscribe survey text area maintains unique state between product types', () => {
         cy.get('[data-attr=more-button]').first().click()
         cy.contains('.LemonButton', 'Unsubscribe').click()
-        cy.get('.LemonModal__content h3').should(
-            'contain',
-            'Why are you unsubscribing from Product analytics + data stack?'
-        )
+        cy.get('.LemonModal h3').should('contain', 'Why are you unsubscribing from Product analytics + data stack?')
 
         cy.get('[data-attr=unsubscribe-reason-survey-textarea]').type('Product analytics')
         cy.contains('.LemonModal .LemonButton', 'Cancel').click()
 
         cy.get('[data-attr=more-button]').eq(1).click()
         cy.contains('.LemonButton', 'Unsubscribe').click()
-        cy.get('.LemonModal__content h3').should('contain', 'Why are you unsubscribing from Session replay?')
+        cy.get('.LemonModal h3').should('contain', 'Why are you unsubscribing from Session replay?')
         cy.get('[data-attr=unsubscribe-reason-survey-textarea]').type('Session replay')
         cy.contains('.LemonModal .LemonButton', 'Cancel').click()
 

frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx

@@ -1,4 +1,4 @@
-import { LemonDivider, LemonInput, LemonTextArea, Link } from '@posthog/lemon-ui'
+import { LemonInput, LemonTextArea, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
@@ -105,12 +105,8 @@ export function EditSubscription({
             className="LemonModal__layout"
         >
             <LemonModal.Header>
-                <div className="flex items-center">
-                    <LemonButton onClick={onCancel} size="small">
-                        <IconChevronLeft fontSize="1rem" />
-                        Back
-                    </LemonButton>
-                    <LemonDivider vertical />
+                <div className="flex items-center gap-2">
+                    <LemonButton icon={<IconChevronLeft />} onClick={onCancel} size="xsmall" />
 
                     <h3>{id === 'new' ? 'New' : 'Edit '} Subscription</h3>
                 </div>

frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss

@@ -35,7 +35,7 @@
     background-color: var(--bg-light);
     border: 1px solid var(--border-3000);
     border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation);
+    box-shadow: var(--modal-shadow-elevation);
     opacity: 0;
     transition: opacity var(--modal-transition-time) ease-out, transform var(--modal-transition-time) ease-out;
     transform: scale(0.85);
@@ -60,8 +60,8 @@
 
     .LemonModal__close {
         position: absolute;
-        top: 1.25rem;
-        right: 1.25rem;
+        top: 0.75rem;
+        right: 1rem;
         z-index: 1;
 
         &.LemonModal__close--highlighted {
@@ -78,7 +78,7 @@
     }
 
     .LemonModal__content {
-        padding: 1rem 1.5rem;
+        padding: 1rem;
         overflow-y: auto;
 
         &.LemonModal__content--embedded {
@@ -98,8 +98,8 @@
 }
 
 .LemonModal__header {
-    padding-bottom: 1.25rem;
-    margin: 1.5rem;
+    padding-bottom: 1rem;
+    margin: 1rem;
     margin-bottom: 0;
     border-bottom: 1px solid var(--border);
 
@@ -122,8 +122,8 @@
     gap: 0.5rem;
     align-items: center;
     justify-content: flex-end;
-    padding-top: 1.5rem;
-    margin: 1.5rem;
+    padding-top: 1rem;
+    margin: 1rem;
     margin-top: 0;
     white-space: nowrap;
     border-top: 1px solid var(--border);

frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx

@@ -30,96 +30,92 @@ export const UnsubscribeSurveyModal = ({
                 reportSurveyDismissed(surveyID)
             }}
             width="max(40vw)"
-        >
-            <div>
-                {includesPipelinesAddon && itemsToDisable.length > 0 ? (
-                    <div className="mb-6">
-                        <div className="mb-4">
-                            <h3 className="mt-2 mb-2 mr-8">Important: Disable remaining export apps</h3>
-                            <p>
-                                To avoid unexpected impact on your data, you must explicitly disable the following apps
-                                and exports before unsubscribing:
-                            </p>
-                        </div>
-                        <ExportsUnsubscribeTable />
-                    </div>
-                ) : (
-                    <></>
-                )}
-                <h3 className="mt-2 mb-4 mr-8">{`Why are you unsubscribing from ${product.name}?`}</h3>
-                <div className="flex flex-col gap-3.5">
-                    <LemonTextArea
-                        data-attr="unsubscribe-reason-survey-textarea"
-                        placeholder="Start typing..."
-                        value={surveyResponse['$survey_response']}
-                        onChange={(value) => {
-                            setSurveyResponse(value, '$survey_response')
+            title={`Why are you unsubscribing from ${product.name}?`}
+            footer={
+                <>
+                    <LemonButton
+                        type="secondary"
+                        onClick={() => {
+                            reportSurveyDismissed(surveyID)
                         }}
-                    />
-                    <LemonBanner type="info">
-                        <p>
-                            {'Need to control your costs? Learn about ways to '}
-                            <Link
-                                to="https://posthog.com/docs/billing/estimating-usage-costs#how-to-reduce-your-posthog-costs"
-                                target="_blank"
-                                onClick={() => {
-                                    reportSurveyDismissed(surveyID)
-                                }}
-                            >
-                                reduce your bill
-                            </Link>
-                            {`${product.type !== 'session_replay' ? ' or ' : ', '}`}
-                            <Link
-                                to="mailto:[email protected]?subject=Help%20reducing%20PostHog%20bill"
-                                target="_blank"
-                                onClick={() => {
-                                    reportSurveyDismissed(surveyID)
-                                }}
-                            >
-                                chat with support
-                            </Link>
-
-                            {product.type === 'session_replay' && (
-                                <>
-                                    {', or '}
-                                    <Link
-                                        to="mailto:[email protected]?subject=Joining%session%replay%controls%20beta"
-                                        target="_blank"
-                                        onClick={() => {
-                                            reportSurveyDismissed(surveyID)
-                                        }}
-                                    >
-                                        join our beta
-                                    </Link>
-                                    {' for tuning recording volume with sampling and minimum duration.'}
-                                </>
-                            )}
-                        </p>
-                    </LemonBanner>
-                    <div className="flex justify-end gap-4">
-                        <LemonButton
-                            type="tertiary"
+                    >
+                        Cancel
+                    </LemonButton>
+                    <LemonButton
+                        type={textAreaNotEmpty ? 'primary' : 'secondary'}
+                        disabledReason={includesPipelinesAddon && unsubscribeDisabledReason}
+                        onClick={() => {
+                            textAreaNotEmpty
+                                ? reportSurveySent(surveyID, surveyResponse)
+                                : reportSurveyDismissed(surveyID)
+                            deactivateProduct(product.type)
+                        }}
+                    >
+                        Unsubscribe
+                    </LemonButton>
+                </>
+            }
+        >
+            <div className="flex flex-col gap-3.5">
+                <LemonTextArea
+                    data-attr="unsubscribe-reason-survey-textarea"
+                    placeholder="Reason for unsubscribing..."
+                    value={surveyResponse['$survey_response']}
+                    onChange={(value) => {
+                        setSurveyResponse(value, '$survey_response')
+                    }}
+                />
+                <LemonBanner type="info">
+                    <p>
+                        {'Need to control your costs? Learn about ways to '}
+                        <Link
+                            to="https://posthog.com/docs/billing/estimating-usage-costs#how-to-reduce-your-posthog-costs"
+                            target="_blank"
                             onClick={() => {
                                 reportSurveyDismissed(surveyID)
                             }}
                         >
-                            Cancel
-                        </LemonButton>
-                        <LemonButton
-                            type={textAreaNotEmpty ? 'primary' : 'tertiary'}
-                            disabledReason={includesPipelinesAddon && unsubscribeDisabledReason}
+                            reduce your bill
+                        </Link>
+                        {`${product.type !== 'session_replay' ? ' or ' : ', '}`}
+                        <Link
+                            to="mailto:[email protected]?subject=Help%20reducing%20PostHog%20bill"
+                            target="_blank"
                             onClick={() => {
-                                textAreaNotEmpty
-                                    ? reportSurveySent(surveyID, surveyResponse)
-                                    : reportSurveyDismissed(surveyID)
-                                deactivateProduct(product.type)
+                                reportSurveyDismissed(surveyID)
                             }}
                         >
-                            Unsubscribe
-                        </LemonButton>
-                    </div>
-                </div>
+                            chat with support
+                        </Link>
+
+                        {product.type === 'session_replay' && (
+                            <>
+                                {', or '}
+                                <Link
+                                    to="mailto:[email protected]?subject=Joining%session%replay%controls%20beta"
+                                    target="_blank"
+                                    onClick={() => {
+                                        reportSurveyDismissed(surveyID)
+                                    }}
+                                >
+                                    join our beta
+                                </Link>
+                                {' for tuning recording volume with sampling and minimum duration.'}
+                            </>
+                        )}
+                    </p>
+                </LemonBanner>
             </div>
+            {includesPipelinesAddon && itemsToDisable.length > 0 ? (
+                <div className="mt-6">
+                    <h3 className="mt-2 mb-2 mr-8">Important: Disable remaining export apps</h3>
+                    <p>
+                        To avoid unexpected impact on your data, you must explicitly disable the following apps and
+                        exports before unsubscribing:
+                    </p>
+                    <ExportsUnsubscribeTable />
+                </div>
+            ) : null}
         </LemonModal>
     )
 }

frontend/src/scenes/dashboard/NewDashboardModal.tsx

@@ -9,40 +9,13 @@ import { DashboardTemplateChooser } from './DashboardTemplateChooser'
 import { DashboardTemplateVariables } from './DashboardTemplateVariables'
 import { dashboardTemplateVariablesLogic } from './dashboardTemplateVariablesLogic'
 
-export function DashboardTemplatePreview(): JSX.Element {
-    const { activeDashboardTemplate, variableSelectModalVisible } = useValues(newDashboardLogic)
-    const { variables } = useValues(dashboardTemplateVariablesLogic)
-    const { createDashboardFromTemplate, clearActiveDashboardTemplate } = useActions(newDashboardLogic)
-
-    return (
-        <div>
-            <DashboardTemplateVariables />
-
-            <div className="flex justify-between my-4">
-                {variableSelectModalVisible ? (
-                    <div />
-                ) : (
-                    <LemonButton onClick={clearActiveDashboardTemplate} type="secondary">
-                        Back
-                    </LemonButton>
-                )}
-                <LemonButton
-                    onClick={() => {
-                        activeDashboardTemplate && createDashboardFromTemplate(activeDashboardTemplate, variables)
-                    }}
-                    type="primary"
-                >
-                    Create
-                </LemonButton>
-            </div>
-        </div>
-    )
-}
-
 export function NewDashboardModal(): JSX.Element {
     const builtLogic = useMountedLogic(newDashboardLogic)
-    const { hideNewDashboardModal } = useActions(newDashboardLogic)
-    const { newDashboardModalVisible, activeDashboardTemplate } = useValues(newDashboardLogic)
+    const { hideNewDashboardModal, clearActiveDashboardTemplate, createDashboardFromTemplate } =
+        useActions(newDashboardLogic)
+    const { newDashboardModalVisible, activeDashboardTemplate, variableSelectModalVisible } =
+        useValues(newDashboardLogic)
+    const { variables } = useValues(dashboardTemplateVariablesLogic)
 
     const templatesLogic = dashboardTemplatesLogic({
         scope: builtLogic.props.featureFlagId ? 'feature_flag' : 'default',
@@ -82,9 +55,31 @@ export function NewDashboardModal(): JSX.Element {
                     </div>
                 )
             }
+            footer={
+                activeDashboardTemplate ? (
+                    <>
+                        {variableSelectModalVisible ? (
+                            <div />
+                        ) : (
+                            <LemonButton onClick={clearActiveDashboardTemplate} type="secondary">
+                                Back
+                            </LemonButton>
+                        )}
+                        <LemonButton
+                            onClick={() => {
+                                activeDashboardTemplate &&
+                                    createDashboardFromTemplate(activeDashboardTemplate, variables)
+                            }}
+                            type="primary"
+                        >
+                            Create
+                        </LemonButton>
+                    </>
+                ) : null
+            }
         >
             <div className="NewDashboardModal">
-                {activeDashboardTemplate ? <DashboardTemplatePreview /> : _dashboardTemplateChooser}
+                {activeDashboardTemplate ? <DashboardTemplateVariables /> : _dashboardTemplateChooser}
             </div>
         </LemonModal>
     )

frontend/src/scenes/session-recordings/player/PlayerMeta.scss

@@ -39,7 +39,7 @@
 
         .LemonModal & {
             .PlayerMeta__top {
-                padding-right: 3.5rem;
+                padding-right: 3.5rem !important;
             }
         }
     }

frontend/src/scenes/trends/persons-modal/PersonsModal.tsx

@@ -126,7 +126,7 @@ export function PersonsModal({
                 <LemonModal.Header>
                     <h3>{getTitle()}</h3>
                 </LemonModal.Header>
-                <div className="px-6 py-2">
+                <div className="px-4 py-2">
                     {actorsResponse && !!missingActorsCount && (
                         <MissingPersonsAlert actorLabel={actorLabel} missingActorsCount={missingActorsCount} />
                     )}
@@ -194,7 +194,7 @@ export function PersonsModal({
                         )}
                     </div>
                 </div>
-                <div className="px-6 overflow-hidden flex flex-col">
+                <div className="px-4 overflow-hidden flex flex-col">
                     <div className="relative min-h-20 p-2 space-y-2 rounded bg-border-light overflow-y-auto mb-2">
                         {errorObject ? (
                             validationError ? (

frontend/src/styles/vars.scss

@@ -176,6 +176,7 @@ $_lifecycle_dormant: $_danger;
     --radius: 0.375rem;
     --radius-sm: 0.25rem;
     --shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
+    --modal-shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
     --opacity-disabled: 0.6;
     --font-medium: 500;
     --font-semibold: 600;