UI tweaks

Author: [email protected]

src/block/design-library/edit.js

@@ -397,11 +397,11 @@ const Edit = props => {
 					<VStack spacing={ 8 }>
 						{ isDialogOpen === DIALOG_OPTIONS.REMOVE_BLOCKS && <>
 							<div>
-								<span>
+								<p>
 									{ __( 'Adding this page design will replace all existing blocks in the editor. Are you sure you want to continue?', i18n ) }
-								</span>
+								</p>
 							</div>
-							<Flex direction="column" align="flex-end">
+							<Flex direction="column" align="stretch">
 								<Button
 									__next40pxDefaultSize
 									variant="primary"
@@ -453,29 +453,32 @@ const Edit = props => {
 						</> }
 						{ isDialogOpen === DIALOG_OPTIONS.DISABLED_BLOCKS && <>
 							<div>
-								<span>{ __( 'The designs you have selected contain the following disabled blocks:', i18n ) }</span>
+								<p>{ __( 'The designs you have selected contain the following disabled blocks:', i18n ) }</p>
 								<ul>
 									{ disabledBlocksRef.current && [ ...disabledBlocksRef.current ].map( ( block, i ) => <li key={ i }>{ block }</li> ) }
 								</ul>
-								<span> { __( 'These blocks can be enabled in the Stackable settings page. Do you want to keep the disabled blocks or substitute them with other Stackable or core blocks?', i18n ) }</span>
+								<p> { __( 'These blocks can be enabled in the Stackable settings page. Do you want to keep the disabled blocks or substitute them with other Stackable or core blocks?', i18n ) }</p>
 							</div>
-							<Flex direction="column" align="flex-end">
+							<Flex direction="column" align="stretch">
 								<Button
 									__next40pxDefaultSize
+									style={ { textAlign: 'center' } }
 									variant="primary"
 									onClick={ () => onClickPrimary() }
 								>
 									{ __( 'Add patterns and substitute blocks', i18n ) }
 								</Button>
 								<Button
 									__next40pxDefaultSize
+									style={ { textAlign: 'center', marginBottom: '16px' } }
 									variant="secondary"
 									onClick={ () => onClickSecondary() }
 								>
 									{ __( 'Add patterns only (no substitutes)', i18n ) }
 								</Button>
 								<Button
 									__next40pxDefaultSize
+									style={ { textAlign: 'center', marginBottom: '16px' } }
 									variant="tertiary"
 									onClick={ () => onClickTertiary() }
 								>

src/components/design-library-list/editor.scss

@@ -1,7 +1,7 @@
 .ugb-design-library-items {
 	page-break-inside: avoid;
 	break-inside: avoid;
-	gap: 30px;
+	gap: 32px;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	align-items: center;
@@ -38,9 +38,19 @@
 	transition: all 0.3s cubic-bezier(0.2, 0.6, 0.4, 1);
 	overflow: hidden;
 	border-radius: 8px;
-	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+	// box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+	border: 1px solid #0000001a;
+	box-shadow: none;
+	.ugb-button-component {
+		transition: all 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
+		opacity: 0;
+	}
 	&:hover {
-		box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+		// box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+		.ugb-button-component {
+			opacity: 1;
+		}
 	}
 	footer {
 		line-height: 18px;
@@ -121,7 +131,7 @@
 			height: 24px;
 			width: 24px;
 			background: #fff;
-			border: 1px solid #777;
+			border: 1px solid #ccc;
 			border-radius: 24px;
 		}
 		.dashicon {

src/components/modal-design-library/editor.scss

@@ -275,7 +275,7 @@ div.ugb-modal-design-library__enable-background {
 .stk-design-library-tabs {
 	margin: 0 auto;
 	margin-bottom: 0 !important;
-	height: calc( 100% + 1px);
+	height: calc(100% + 1px);
 
 	.components-base-control__field {
 		&,
@@ -409,11 +409,17 @@ div.ugb-modal-design-library__enable-background {
 }
 
 .ugb-design-library__confirm-dialog {
-	max-width: 800px;
+	max-width: 500px;
 	ul {
-		list-style: circle;
+		list-style: disc;
 		margin-inline-start: 20px;
 	}
+	button {
+		justify-content: center;
+	}
+	p:first-child {
+		margin-top: 0;
+	}
 }
 
 .ugb-design-library__manage-scheme {