Tweak entity save panel button (#65695)

Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: afercia <[email protected]>
WordPress · Sep 27, 2024 · de01da2 · de01da2
1 parent cc0b3d3
commit de01da2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
@@ -128,11 +128,21 @@ export function EntitiesSavedStatesExtensible( {
 			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+				<FlexItem
+					isBlock
+					as={ Button }
+					variant="secondary"
+					size="compact"
+					onClick={ dismissPanel }
+				>
+					{ __( 'Cancel' ) }
+				</FlexItem>
 				<FlexItem
 					isBlock
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
+					size="compact"
 					disabled={ ! saveEnabled }
 					accessibleWhenDisabled
 					onClick={ () =>
@@ -147,14 +157,6 @@ export function EntitiesSavedStatesExtensible( {
 				>
 					{ saveLabel }
 				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">

diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
@@ -1,8 +1,8 @@
 .entities-saved-states__panel-header {
 	box-sizing: border-box;
 	background: $white;
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 	height: $header-height;
 	border-bottom: $border-width solid $gray-300;
 }