Merge pull request #5192 from ampproject/fix/font-sizes

Improve font sizes in onboarding wizard and settings screen
ampproject · Aug 8, 2020 · 957ffec · 957ffec
2 parents ed3a1e3 + dd7e592
commit 957ffec
Show file tree

Hide file tree

Showing 15 changed files with 135 additions and 50 deletions.
diff --git a/assets/src/components/amp-info/style.css b/assets/src/components/amp-info/style.css
@@ -2,7 +2,6 @@
 	display: inline-block;
 	font-size: 14px;
 	font-weight: 600;
-	margin-left: 1rem;
 	margin-bottom: 1rem;
 }
 

diff --git a/assets/src/components/amp-setting-toggle/style.css b/assets/src/components/amp-setting-toggle/style.css
@@ -6,9 +6,12 @@
 }
 
 .amp .amp-setting-toggle .components-form-toggle {
-	margin-right: 2.25rem;
-}
+	margin-right: 0.75rem;
 
+	@media (min-width: 783px) {
+		margin-right: 2.25rem;
+	}
+}
 
 .amp-setting-toggle--disabled .components-form-toggle__input {
 	pointer-events: none;

diff --git a/assets/src/components/selectable/style.css b/assets/src/components/selectable/style.css
@@ -5,14 +5,18 @@
 	background-color: var(--amp-settings-color-background);
 	border: 2px solid var(--amp-settings-color-border);
 	border-radius: 8px;
-	box-shadow: -10px 0 0 var(--amp-settings-color-border);
 	padding: 1rem 0.75rem;
 
 	@media (min-width: 783px) {
 		padding: 1.25rem 2.5rem;
 	}
 }
 
+.selectable--left {
+	box-shadow: -10px 0 0 var(--amp-settings-color-border);
+	margin-right: -10px;
+}
+
 .selectable--bottom {
 	border: 2px solid var(--amp-settings-color-border);
 	box-shadow: 0 10px 0 var(--amp-settings-color-border);

diff --git a/assets/src/components/template-mode-option/style.css b/assets/src/components/template-mode-option/style.css
@@ -101,16 +101,17 @@
 }
 
 .template-mode-selection__label-extra {
+	display: none;
+	font-size: 14px;
 	margin: 0 0 0 auto;
 
+	@media screen and (min-width: 783px) {
+		display: block;
+	}
 }
 
 .template-mode-selection__label-extra .amp-notice--small {
 	font-size: 14px;
-
-	@media screen and (min-width: 783px) {
-		font-size: 14px;
-	}
 }
 
 .template-mode-option > .amp-notice .components-panel__arrow {

diff --git a/assets/src/components/theme-card/style.css b/assets/src/components/theme-card/style.css
@@ -38,14 +38,10 @@
 
 .amp .theme-card .theme-card__title {
 	line-height: 1.3;
-	font-size: 1.25rem;
+	font-size: 1rem;
 	margin-left: 5px;
 	margin-bottom: 0;
 	margin-top: 0;
-
-	@media screen and (min-width: 783px) {
-		font-size: 1.5rem;
-	}
 }
 
 .theme-card img {

diff --git a/assets/src/css/core-components.css b/assets/src/css/core-components.css
@@ -47,6 +47,13 @@
 	text-decoration: none;
 }
 
+.amp .components-button.is-secondary,
+.amp .components-button.is-secondary:hover,
+.amp .components-button.is-secondary:hover:not(:disabled) {
+	border-color: var(--amp-settings-color-brand);
+	box-shadow: inset 0 0 0 1px var(--amp-settings-color-brand);
+}
+
 .amp.amp .components-button:focus:not(:disabled) {
 	outline: 1px solid var(--amp-settings-color-brand);
 }

diff --git a/assets/src/css/elements.css b/assets/src/css/elements.css
@@ -21,14 +21,10 @@
 }
 
 .amp h3 {
-	font-size: 1rem;
+	font-size: 1.2rem;
 	line-height: 1.5;
 	margin-bottom: 0;
 	margin-top: 0;
-
-	@media screen and (min-width: 783px) {
-		font-size: 1.5rem;
-	}
 }
 
 .amp p {

diff --git a/assets/src/onboarding-wizard/components/nav/index.js b/assets/src/onboarding-wizard/components/nav/index.js
@@ -43,7 +43,7 @@ export function Nav( { closeLink, finishLink } ) {
 	let nextLink;
 
 	if ( isLastPage && READER === themeSupport ) {
-		nextText = __( 'Customize Theme', 'amp' );
+		nextText = __( 'Customize', 'amp' );
 		nextLink = ! savingDeveloperToolsOption && ! savingOptions ? addQueryArgs(
 			CUSTOMIZER_LINK,
 			'legacy' === readerTheme

diff --git a/assets/src/onboarding-wizard/components/nav/test/index.js b/assets/src/onboarding-wizard/components/nav/test/index.js
@@ -91,7 +91,7 @@ describe( 'Nav', () => {
 		expect( nextButton ).not.toBeNull();
 	} );
 
-	it( 'changes next button to "Customize Theme" on last page', () => {
+	it( 'changes next button to "Customize" on last page', () => {
 		act( () => {
 			render(
 				<Providers pages={ testPages }>
@@ -109,7 +109,7 @@ describe( 'Nav', () => {
 			nextButton.dispatchEvent( new global.MouseEvent( 'click', { bubbles: true } ) );
 		} );
 
-		expect( nextButton.textContent ).toBe( 'Customize Theme' );
+		expect( nextButton.textContent ).toBe( 'Customize' );
 	} );
 
 	it( 'close button hides on last page when reader mode is not selected', () => {

diff --git a/assets/src/onboarding-wizard/pages/summary/style.css b/assets/src/onboarding-wizard/pages/summary/style.css
@@ -1,6 +1,11 @@
 .summary .selectable {
 	margin-bottom: 2.25rem;
 	padding: 40px 30px;
+
+	/* For the mobile redirection toggle */
+	.amp-setting-toggle .components-form-toggle {
+		margin-right: 30px;
+	}
 }
 
 .summary .amp-notice {

diff --git a/assets/src/onboarding-wizard/style.css b/assets/src/onboarding-wizard/style.css
@@ -13,6 +13,10 @@ body {
 	max-width: calc(var(--stepper-max-width) + var(--setup-page-max-width));
 	padding: 20px 20px 10rem;
 	width: 100%;
+
+	@media screen and (max-width: 782px) {
+		padding-bottom: 5rem;
+	}
 }
 
 .amp-onboarding-wizard {

diff --git a/assets/src/settings-page/plugin-suppression.js b/assets/src/settings-page/plugin-suppression.js
@@ -202,6 +202,27 @@ function PluginRow( { pluginKey, pluginDetails } ) {
 		</strong>
 	);
 
+	const errorDetails = (
+		<div className="error-details">
+			{
+				isOriginallySuppressed ? (
+					<p>
+						<SuppressedPluginTime suppressedPlugin={ originalSuppressedPlugins[ pluginKey ] } />
+						{ ' ' }
+						<SuppressedPluginUsername suppressedPlugin={ originalSuppressedPlugins[ pluginKey ] } />
+						{ ' ' }
+						<SuppressedPluginVersion
+							pluginDetails={ pluginDetails }
+							suppressedPlugin={ originalSuppressedPlugins[ pluginKey ] }
+						/>
+					</p>
+				) : (
+					<ValidationErrorDetails errors={ pluginDetails.validation_errors } />
+				)
+			}
+		</div>
+	);
+
 	return (
 		<tr className={ classnames(
 			{
@@ -267,24 +288,11 @@ function PluginRow( { pluginKey, pluginDetails } ) {
 
 					].filter( ( child ) => child ) }
 				</ConditionalDetails>
+
+				{ errorDetails }
 			</td>
 			<td className="column-details">
-				{
-					isOriginallySuppressed ? (
-						<p>
-							<SuppressedPluginTime suppressedPlugin={ originalSuppressedPlugins[ pluginKey ] } />
-							{ ' ' }
-							<SuppressedPluginUsername suppressedPlugin={ originalSuppressedPlugins[ pluginKey ] } />
-							{ ' ' }
-							<SuppressedPluginVersion
-								pluginDetails={ pluginDetails }
-								suppressedPlugin={ originalSuppressedPlugins[ pluginKey ] }
-							/>
-						</p>
-					) : (
-						<ValidationErrorDetails errors={ pluginDetails.validation_errors } />
-					)
-				}
+				{ errorDetails }
 			</td>
 		</tr>
 	);

diff --git a/assets/src/settings-page/style.css b/assets/src/settings-page/style.css
@@ -1,3 +1,20 @@
+
+@media screen and (max-width: 400px) {
+
+	.wrap {
+		margin-left: 0;
+		margin-right: 10px;
+	}
+}
+
+@media screen and (min-width: 401px) and (max-width: 782px) {
+
+	.wrap {
+		margin-left: 10px;
+		margin-right: 20px;
+	}
+}
+
 #amp-settings {
 	max-width: 1060px;
 	margin: 0 auto;
@@ -35,28 +52,36 @@
 	align-items: center;
 	display: flex;
 	flex-direction: column;
-	width: 100%;
 
 	@media (min-width: 783px) {
 		flex-direction: row;
 	}
 }
 
 .settings-welcome__illustration {
-	margin-bottom: 2rem;
+	display: none;
+	margin-right: 2rem;
 
 	@media (min-width: 783px) {
-		margin-right: 2rem;
+		display: block;
 	}
 }
 
 .amp .settings-welcome__button.is-primary {
 	box-shadow: none;
+	margin-right: 1rem;
+}
 
-	@media (min-width: 783px) {
-		padding-left: 1rem;
-		padding-right: 1.5rem;
-	}
+.settings-welcome__body h2 {
+	margin-bottom: 1rem;
+}
+
+.settings-welcome__body p {
+	margin: 0;
+}
+
+.settings-welcome__body .components-button {
+	margin-top: 1rem;
 }
 
 /* Supported templates section. */
@@ -100,13 +125,11 @@
 	font-size: 14px;
 }
 
-
 /* Plugin suppression */
 .plugin-suppression > p {
 	font-size: 14px;
 }
 
-
 #suppressed-plugins-table {
 	margin-top: 20px;
 }
@@ -190,6 +213,10 @@
 	list-style-type: disc;
 }
 
+#suppressed-plugins-table details {
+	margin: 0;
+}
+
 #suppressed-plugins-table summary {
 	user-select: none;
 	cursor: pointer;
@@ -200,6 +227,10 @@
 	padding-top: 18px;
 }
 
+#suppressed-plugins-table .column-plugin .error-details {
+	display: none;
+}
+
 li.error-removed {
 	color: var(--color-valid);
 }
@@ -214,6 +245,21 @@ li.error-kept {
 		width: 130px;
 	}
 
+	#suppressed-plugins-table .column-plugin {
+		width: auto;
+	}
+
+	#suppressed-plugins-table .column-plugin .error-details {
+		display: block;
+		margin-top: 10px;
+		border-top: dotted 1px #ccd0d4;
+		padding-top: 10px;
+	}
+
+	#suppressed-plugins-table .column-details {
+		display: none;
+	}
+
 	#suppressed-plugins-table .column-status .components-select-control__input {
 		font-size: inherit;
 	}
@@ -240,9 +286,10 @@ li.error-kept {
 
 .supported-templates__fields {
 	display: grid;
-	gap: 1.5rem;
+	gap: 0;
 
 	@media (min-width: 783px) {
+		gap: 1.5rem;
 		grid-template-columns: repeat(2, 1fr);
 	}
 }
@@ -324,6 +371,7 @@ li.error-kept {
 	align-items: center;
 	display: flex;
 	padding-left: 1.5rem;
+	padding-right: var(--panel-button-width);
 
 	@media (min-width: 783px) {
 		padding-left: 3rem;
@@ -353,12 +401,25 @@ li.error-kept {
 	margin-top: 1em;
 }
 
+#analytics-options-drawer details > pre {
+	tab-size: 4;
+	overflow-x: auto;
+}
+
+#analytics-options-drawer .components-button:not(.components-panel__body-toggle) svg {
+	display: block;
+}
+
 .amp-analytics-entry {
 	flex-direction: column;
 	align-items: flex-start;
-	padding: 1.5rem 2.25rem;
+	padding: 0 1rem;
 	margin-bottom: 1.5rem;
 	border: 1px solid var(--amp-settings-color-border);
+
+	@media (min-width: 783px) {
+		padding: 1.5rem 2.25rem;
+	}
 }
 
 .amp-analytics-entry__text-inputs {
@@ -380,6 +441,7 @@ li.error-kept {
 
 .amp-analytics-input {
 	font-family: monospace;
+	tab-size: 4;
 	width: 100%;
 }