From 2c1b687454ffceb2d428bf86b1cda577435eafb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 22 Nov 2024 13:25:04 +0100
Subject: [PATCH] Webapp: Design improvements

* Adds a horizontal gap between modal buttons
* Restores vertical margin between GitHub modal text paragraphs
* Removes the double "Playground sites" header in the sidebar
---
 .../src/components/modal/modal-buttons.tsx    | 15 +++++++-----
 .../components/site-manager/sidebar/index.tsx | 23 ++++++++-----------
 .../src/github/github-export-form/form.tsx    |  6 ++++-
 .../src/github/github-import-form/form.tsx    |  6 ++++-
 .../src/github/github-oauth-guard/index.tsx   |  2 +-
 .../website/src/github/preview-pr/form.tsx    |  3 ++-
 .../src/github/preview-pr/style.module.css    |  4 ++++
 7 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/packages/playground/website/src/components/modal/modal-buttons.tsx b/packages/playground/website/src/components/modal/modal-buttons.tsx
index c9bbb0d9de..b32ce9deb8 100644
--- a/packages/playground/website/src/components/modal/modal-buttons.tsx
+++ b/packages/playground/website/src/components/modal/modal-buttons.tsx
@@ -9,12 +9,15 @@ interface ModalButtonsProps {
 	onCancel?: () => void;
 	onSubmit?: (e: any) => void;
 }
-export default function ModalButtons({ submitText = 'Submit', areDisabled = false, areBusy, onCancel, onSubmit }: ModalButtonsProps) {
+export default function ModalButtons({
+	submitText = 'Submit',
+	areDisabled = false,
+	areBusy,
+	onCancel,
+	onSubmit,
+}: ModalButtonsProps) {
 	return (
-		<Flex
-			justify="end"
-			className={css.modalButtons}
-		>
+		<Flex justify="end" className={css.modalButtons} gap={4}>
 			<Button
 				isBusy={areBusy}
 				disabled={areDisabled}
@@ -32,5 +35,5 @@ export default function ModalButtons({ submitText = 'Submit', areDisabled = fals
 				{submitText}
 			</Button>
 		</Flex>
-	)
+	);
 }
diff --git a/packages/playground/website/src/components/site-manager/sidebar/index.tsx b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
index bcf13b953a..80df6c4c81 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/index.tsx
+++ b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
@@ -93,7 +93,11 @@ export function Sidebar({
 			aria-orientation={undefined}
 		>
 			{/* Padding 3px is because of focus on dropdown button */}
-			<Flex justify="space-between" direction="row" style={{ padding: '3px'}}>
+			<Flex
+				justify="space-between"
+				direction="row"
+				style={{ padding: '3px' }}
+			>
 				<h1 className="sr-only">WordPress Playground</h1>
 				<div className={css.sidebarHeader}>
 					{/* Remove Playground logo because branding isn't finalized. */}
@@ -111,21 +115,15 @@ export function Sidebar({
 						<>
 							<WordPressPRMenuItem
 								onClose={onClose}
-								disabled={
-									offline
-								}
+								disabled={offline}
 							/>
 							<GutenbergPRMenuItem
 								onClose={onClose}
-								disabled={
-									offline
-								}
+								disabled={offline}
 							/>
 							<GithubImportMenuItem
 								onClose={onClose}
-								disabled={
-									offline
-								}
+								disabled={offline}
 							/>
 							<RestoreFromZipMenuItem
 								text="Import from .zip"
@@ -214,10 +212,7 @@ export function Sidebar({
 						>
 							Saved Playgrounds
 						</Heading>
-						<MenuGroup
-							className={css.sidebarList}
-							label="Saved Playgrounds"
-						>
+						<MenuGroup className={css.sidebarList}>
 							{storedSites.map((site) => {
 								/**
 								 * The `wordpress` site is selected when no site slug is provided.
diff --git a/packages/playground/website/src/github/github-export-form/form.tsx b/packages/playground/website/src/github/github-export-form/form.tsx
index a7b4b207b6..c41ba7b49b 100644
--- a/packages/playground/website/src/github/github-export-form/form.tsx
+++ b/packages/playground/website/src/github/github-export-form/form.tsx
@@ -429,7 +429,11 @@ export default function GitHubExportForm({
 
 	if (pushResult) {
 		return (
-			<form id="export-playground-form" onSubmit={handleSubmit}>
+			<form
+				id="export-playground-form"
+				onSubmit={handleSubmit}
+				className="typography"
+			>
 				<h2>
 					Pull Request{' '}
 					{formValues.prAction === 'create' ? 'created' : 'updated'}!
diff --git a/packages/playground/website/src/github/github-import-form/form.tsx b/packages/playground/website/src/github/github-import-form/form.tsx
index b09b94b60d..b0d12aa408 100644
--- a/packages/playground/website/src/github/github-import-form/form.tsx
+++ b/packages/playground/website/src/github/github-import-form/form.tsx
@@ -175,7 +175,11 @@ export default function GitHubImportForm({
 
 	return (
 		<GitHubOAuthGuard>
-			<form id="import-playground-form" onSubmit={handleSubmit}>
+			<form
+				id="import-playground-form"
+				onSubmit={handleSubmit}
+				className="typography"
+			>
 				<p>
 					You may import WordPress plugins, themes, and entire
 					wp-content directories from any public GitHub repository.
diff --git a/packages/playground/website/src/github/github-oauth-guard/index.tsx b/packages/playground/website/src/github/github-oauth-guard/index.tsx
index d409d8f84e..1c2acb11fc 100644
--- a/packages/playground/website/src/github/github-oauth-guard/index.tsx
+++ b/packages/playground/website/src/github/github-oauth-guard/index.tsx
@@ -87,7 +87,7 @@ function Authenticate({
 		[css.disabled]: mayLoseProgress && !exported,
 	});
 	return (
-		<div>
+		<div className="typography">
 			<p>
 				Importing plugins, themes, and wp-content directories directly
 				from your public GitHub repositories.
diff --git a/packages/playground/website/src/github/preview-pr/form.tsx b/packages/playground/website/src/github/preview-pr/form.tsx
index 66647ead50..47c4455051 100644
--- a/packages/playground/website/src/github/preview-pr/form.tsx
+++ b/packages/playground/website/src/github/preview-pr/form.tsx
@@ -220,12 +220,13 @@ export default function PreviewPRForm({
 					disabled={submitting}
 					label="Pull request number or URL"
 					value={value}
+					autoFocus
 					onChange={(e) => {
 						setError('');
 						setValue(e);
 					}}
 				/>
-				{errorMsg && <div>{errorMsg}</div>}
+				{errorMsg && <div className={css.error}>{errorMsg}</div>}
 			</div>
 			<ModalButtons
 				areDisabled={submitting}
diff --git a/packages/playground/website/src/github/preview-pr/style.module.css b/packages/playground/website/src/github/preview-pr/style.module.css
index 37587dd32a..704b4649ed 100644
--- a/packages/playground/website/src/github/preview-pr/style.module.css
+++ b/packages/playground/website/src/github/preview-pr/style.module.css
@@ -25,3 +25,7 @@
 		margin: 0;
 	}
 }
+
+.error {
+	color: #f00;
+}