feat: wrap modal content around its own div

Automattic · Apr 8, 2020 · 6cf6c3b · 6cf6c3b
1 parent 2378fd0
commit 6cf6c3b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/components/template-modal/index.js b/src/components/template-modal/index.js
@@ -27,7 +27,9 @@ class TemplateModal extends Component {
 				shouldCloseOnEsc={ false }
 				title={ __( 'Select a layout', 'newspack-newsletters' ) }
       >
-				<p>{ __( 'Layout selector with preview will go here.', 'newspack-newsletters' ) }</p>
+				<div className="newspack-newsletters-modal__content">
+					<p>{ __( 'Layout selector with preview will go here.', 'newspack-newsletters' ) }</p>
+				</div>
 				<Button isPrimary onClick={ closeModal }>
 					{ __( 'Use CURRENTLAYOUT layout', 'newspack-newsletters' ) }
 				</Button>

diff --git a/src/components/template-modal/style.scss b/src/components/template-modal/style.scss
@@ -1,4 +1,28 @@
 .newspack-newsletters-modal {
+	&__screen-overlay {
+		animation: none;
+		background: white;
+		margin-top: 46px;
+
+		@media only screen and (min-width: 783px) {
+			margin-left: 36px;
+			margin-top: 32px;
+
+			// Fullscreen mode
+			.is-fullscreen-mode & {
+				margin-left: 0;
+				margin-top: 0;
+			}
+		}
+
+		@media only screen and (min-width: 961px) {
+			// Not folded sidebar
+			body:not( .folded ) & {
+				margin-left: 160px;
+			}
+		}
+	}
+
 	&__frame {
 		animation: none;
 		border: 0;
@@ -24,27 +48,11 @@
 		}
 	}
 
-	&__screen-overlay {
-		animation: none;
-		background: white;
-		margin-top: 46px;
-
-		@media only screen and (min-width: 783px) {
-			margin-left: 36px;
-			margin-top: 32px;
-
-			// Fullscreen mode
-			.is-fullscreen-mode & {
-				margin-left: 0;
-				margin-top: 0;
-			}
-		}
-
-		@media only screen and (min-width: 961px) {
-			// Not folded sidebar
-			body:not( .folded ) & {
-				margin-left: 160px;
-			}
-		}
+	&__content {
+		align-items: center;
+		background: aliceblue; // test
+		display: flex;
+		height: calc( 100% - 24px - 60px );
+		justify-content: center;
 	}
 }