Scheduled Updates: implement multi-site design on single site schedul…

…ed updates (#90443)

* Rebase

* No wp-brand font on headings

* Merge CSS changes

* - Update schedules -> Scheduled updates
- Add margin to single site submit button
- Rename Add new schedule button

client/blocks/plugin-scheduled-updates-common/styles.scss

@@ -0,0 +1,129 @@
+@import "~@automattic/color-studio/dist/color-variables";
+@import "@wordpress/base-styles/breakpoints";
+
+$brand-display: "SF Pro Display", sans-serif;
+
+.plugins-update-manager,
+.plugins-update-manager-multisite {
+	@media screen and (max-width: $break-small) {
+		margin: 1rem;
+	}
+
+	h1 {
+		font-size: 2rem;
+		margin-bottom: 1rem;
+	}
+
+	&__header {
+		align-items: center;
+		border-block-end: 1px solid var(--color-border-secondary);
+		display: flex;
+		flex-wrap: wrap;
+		row-gap: 1rem;
+		font-family: $brand-display;
+		justify-content: space-between;
+		padding-bottom: 1.5rem;
+
+		&.no-border {
+			border-block-end: none;
+		}
+
+		h1 {
+			font-size: 1.5rem;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 1.2;
+			margin-bottom: 0;
+			flex: 1;
+		}
+
+		button {
+			font-size: rem(14px);
+			border-radius: 4px;
+		}
+
+		.buttons {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: rem(10px);
+		}
+	}
+
+	&-table {
+		th,
+		td {
+			font-size: 0.875rem;
+			padding: 1rem 0.125rem;
+			color: var(--studio-gray-60);
+			border-bottom: solid 1px var(--studio-gray-0);
+		}
+
+		th {
+			font-weight: 500;
+
+			&.expand {
+				width: 4rem;
+			}
+		}
+
+		td {
+			padding: 0.5rem 0.125rem;
+			vertical-align: middle;
+
+			&.last-update {
+				min-width: 200px;
+			}
+
+			.badge-component {
+				line-height: 2;
+			}
+
+			&.expand {
+				text-align: center;
+				line-height: 1;
+
+				button {
+					margin-top: rem(2px);
+				}
+			}
+
+			&.name {
+				width: 300px;
+			}
+
+			&.sites {
+				width: 80px;
+			}
+
+			&.menu {
+				text-align: center;
+			}
+		}
+
+		&__expanded {
+			background-color: var(--studio-gray-0);
+		}
+	}
+
+	.schedule-form {
+		margin-bottom: 1.25rem;
+
+		& > .form-control-container {
+			margin-bottom: 1.25rem;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			& > .components-flex {
+				gap: 2rem;
+
+				& > .components-flex-item {
+					flex-basis: 100%;
+					width: 100%;
+				}
+			}
+		}
+	}
+}

client/blocks/plugins-scheduled-updates-multisite/index.tsx

@@ -34,7 +34,7 @@ export const PluginsScheduledUpdatesMultisite = ( {
 	const title = {
 		create: translate( 'New schedule' ),
 		edit: translate( 'Edit schedule' ),
-		list: translate( 'Update schedules' ),
+		list: translate( 'Scheduled Updates' ),
 	}[ context ];
 
 	return (

client/blocks/plugins-scheduled-updates-multisite/schedule-list.tsx

@@ -112,7 +112,7 @@ export const ScheduleList = ( props: Props ) => {
 	return (
 		<div className="plugins-update-manager plugins-update-manager-multisite">
 			<div className="plugins-update-manager-multisite__header">
-				<h1>{ translate( 'Update schedules' ) }</h1>
+				<h1>{ translate( 'Scheduled Updates' ) }</h1>
 				{ showNewScheduleBtn && ! isScheduleEmpty && (
 					<Button
 						__next40pxDefaultSize={ ! compact }

client/blocks/plugins-scheduled-updates-multisite/styles.scss

@@ -1,25 +1,15 @@
-@import "~@automattic/color-studio/dist/color-variables";
-@import "@wordpress/base-styles/breakpoints";
+@import "../plugin-scheduled-updates-common/styles";
 
 $brand-display: "SF Pro Display", sans-serif;
 
 .plugins-update-manager-multisite {
-	@media screen and (max-width: 660px) {
-		margin: 1rem;
-	}
-
 	&.plugins-update-manager-multisite-edit,
 	&.plugins-update-manager-multisite-create {
 		h1 {
 			font-size: 2rem !important;
 		}
 	}
 
-	h1 {
-		font-size: 2rem;
-		margin-bottom: 1rem;
-	}
-
 	.components-notice {
 		margin-bottom: 1.25rem;
 		margin-top: 1.25rem;
@@ -29,84 +19,6 @@ $brand-display: "SF Pro Display", sans-serif;
 		}
 	}
 
-	.schedule-form {
-		margin-bottom: 1.25rem;
-
-		& > .form-control-container {
-			margin-bottom: 1.25rem;
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-
-			& > .components-flex {
-				gap: 2rem;
-
-				& > .components-flex-item {
-					flex-basis: 100%;
-					width: 100%;
-				}
-			}
-		}
-	}
-
-	.plugins-update-manager-multisite-table {
-		th,
-		td {
-			font-size: 0.875rem;
-			padding: 1rem 0.125rem;
-			color: var(--studio-gray-60);
-			border-bottom: solid 1px var(--studio-gray-0);
-		}
-
-		th {
-			font-weight: 500;
-
-			&.expand {
-				width: 4rem;
-			}
-		}
-
-		td {
-			padding: 0.5rem 0.125rem;
-			vertical-align: middle;
-
-			&.last-update {
-				min-width: 200px;
-			}
-
-			.badge-component {
-				line-height: 2;
-			}
-
-			&.expand {
-				text-align: center;
-				line-height: 1;
-
-				button {
-					margin-top: rem(2px);
-				}
-			}
-
-			&.name {
-				width: 300px;
-			}
-
-			&.sites {
-				width: 80px;
-			}
-
-			&.menu {
-				text-align: center;
-			}
-		}
-
-
-		&__expanded {
-			background-color: var(--studio-gray-0);
-		}
-	}
-
 	.plugins-update-manager-multisite-filter {
 		margin-top: 1.25rem;
 		margin-bottom: 1.25rem;
@@ -151,31 +63,6 @@ $brand-display: "SF Pro Display", sans-serif;
 			}
 		}
 	}
-	&__header {
-		align-items: center;
-		border-block-end: 1px solid var(--color-border-secondary);
-		display: flex;
-		font-family: $brand-display;
-		justify-content: space-between;
-		padding-bottom: 1.5rem;
-
-		&.no-border {
-			border-block-end: none;
-		}
-
-		h1 {
-			font-size: 1.5rem;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 1.2;
-			margin-bottom: 0;
-		}
-
-		button {
-			font-size: rem(14px);
-			border-radius: 4px;
-		}
-	}
 
 	.empty-state {
 		max-width: 50%;
@@ -281,7 +168,6 @@ $brand-display: "SF Pro Display", sans-serif;
 				}
 			}
 		}
-
 	}
 
 	.components-card__footer {