feat: wrap action buttons around a div for better positioning

Automattic · Apr 24, 2020 · 0b28524 · 0b28524
1 parent 3ac00ad
commit 0b28524
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/src/components/template-modal/screens/api-keys/index.js b/src/components/template-modal/screens/api-keys/index.js
@@ -152,9 +152,11 @@ export default ( { onSetupStatus } ) => {
 					</p>
 				</div>
 			</div>
-			<Button isPrimary onClick={ commitSettings } disabled={ inFlight || ! canSubmit }>
-				{ __( 'Save settings', 'newspack-newsletter' ) }
-			</Button>
+			<div className="newspack-newsletters-modal__action-buttons">
+				<Button isPrimary onClick={ commitSettings } disabled={ inFlight || ! canSubmit }>
+					{ __( 'Save settings', 'newspack-newsletter' ) }
+				</Button>
+			</div>
 		</Fragment>
 	);
 };
diff --git a/src/components/template-modal/screens/template-picker/index.js b/src/components/template-modal/screens/template-picker/index.js
@@ -60,12 +60,15 @@ export default ( { onInsertTemplate, templates } ) => {
 					) }
 				</div>
 			</div>
-			<Button isSecondary onClick={ () => onInsertTemplate( 0 ) }>
-				{ __( 'Use empty layout', 'newspack-newsletters' ) }
-			</Button>
-			<Button isPrimary onClick={ () => onInsertTemplate( selectedTemplate ) }>
-				{ __( 'Use this layout', 'newspack-newsletters' ) }
-			</Button>
+			<div className="newspack-newsletters-modal__action-buttons">
+				<Button isSecondary onClick={ () => onInsertTemplate( 0 ) }>
+					{ __( 'Start From Scratch', 'newspack-newsletters' ) }
+				</Button>
+				<span className="separator">{ __( 'or', 'newspack-newsletters' ) }</span>
+				<Button isPrimary onClick={ () => onInsertTemplate( selectedTemplate ) }>
+					{ __( 'Use Selected Layout', 'newspack-newsletters' ) }
+				</Button>
+			</div>
 		</Fragment>
 	);
 };
diff --git a/src/components/template-modal/style.scss b/src/components/template-modal/style.scss
@@ -46,6 +46,21 @@
 		top: 0;
 		transform: none;
 		width: 100%;
+
+		.components-modal__header-heading {
+			display: none;
+			font-size: 0.8rem;
+			line-height: 1.25;
+
+			@media only screen and ( min-width: 600px ) {
+				display: block;
+			}
+
+			@media only screen and ( min-width: 783px ) {
+				font-size: 1rem;
+				line-height: 1;
+			}
+		}
 	}
 
 	&__content {
@@ -73,12 +88,21 @@
 				top: 61px;
 			}
 		}
+	}
 
-		+ .is-primary {
-			position: absolute;
-			right: 24px;
-			top: 12px;
-			z-index: 11;
+	&__action-buttons {
+		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		position: absolute;
+		right: 24px;
+		top: 12px;
+		z-index: 11;
+
+		.separator {
+			margin-left: 6px;
+			margin-right: 6px;
 		}
 	}