3000 styled modals

PostHog · Nov 14, 2023 · b3d89f8 · b3d89f8
1 parent 34a6bc4
commit b3d89f8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
@@ -70,6 +70,11 @@
         &.LemonModal__close--highlighted {
             animation: tilt-shake 400ms;
         }
+
+        .posthog-3000 & {
+            top: 0.75rem;
+            right: 0.75rem;
+        }
     }
 
     // We nest the content in layout so that "simple" modal implementations can use this class as well
@@ -84,6 +89,10 @@
         padding: 1rem 1.5rem;
         overflow-y: auto;
 
+        .posthog-3000 & {
+            padding: 1rem;
+        }
+
         &.LemonModal__content--embedded {
             padding: 0;
         }
@@ -97,21 +106,24 @@
 }
 
 .LemonModal__header {
-    margin: 1.5rem;
-    margin-bottom: 0;
-    padding-bottom: 1.25rem;
+    padding: 1.5rem;
     border-bottom: 1px solid var(--border);
 
     h3 {
-        margin-bottom: 0;
         margin-right: 1.5rem;
+        margin-bottom: 0;
         font-size: 1.125rem;
         line-height: 1.5rem;
         font-weight: 700;
     }
 
     p {
-        margin: 0.5rem 0 -0.25rem;
+        margin-top: 0.25rem;
+        margin-bottom: 0;
+    }
+
+    .posthog-3000 & {
+        padding: 1rem;
     }
 }
 
@@ -121,11 +133,13 @@
     justify-content: flex-end;
     gap: 0.5rem;
     border-top: 1px solid var(--border);
-    margin: 1.5rem;
-    margin-top: 0;
-    padding-top: 1.5rem;
+    padding: 1.5rem;
     white-space: nowrap;
     align-items: center;
+
+    .posthog-3000 & {
+        padding: 0.5rem;
+    }
 }
 
 .LemonModal__header + .LemonModal__footer {

diff --git a/frontend/src/scenes/persons/PersonDeleteModal.tsx b/frontend/src/scenes/persons/PersonDeleteModal.tsx
@@ -13,6 +13,7 @@ export function PersonDeleteModal(): JSX.Element | null {
             isOpen={!!personDeleteModal}
             onClose={() => showPersonDeleteModal(null)}
             title={`Are you sure you want to delete "${asDisplay(personDeleteModal)}"?`}
+            width="50rem"
             description={
                 <>
                     <p>This action cannot be undone.</p>