Update template selector styles

MAILPOET-5949

packages/js/email-editor/src/components/template-select/index.scss

@@ -11,3 +11,26 @@
 .block-editor-block-patterns-list__list-item {
   overflow: hidden;
 }
+
+.email-editor-recent-templates-info {
+  background-color: #F0F6FC;
+  margin-bottom: 1.5rem;
+  padding: 0.5rem;
+
+  path { fill: #007CBA; }
+}
+
+.email-editor-pattern__list-item {
+  border: 1px solid #DDD;
+  border-radius: 4px;
+
+  .block-editor-block-preview__container:after {
+    outline: unset !important;
+    outline-offset: unset !important;
+  }
+
+  .block-editor-block-patterns-list__item-title {
+    font-size: unset !important;
+    padding-left: 1rem;
+  }
+}

packages/js/email-editor/src/components/template-select/template-list.tsx

@@ -3,7 +3,6 @@ import { useMemo, memo } from '@wordpress/element';
 import { BlockPreview } from '@wordpress/block-editor';
 import {
 	__experimentalHStack as HStack, // eslint-disable-line
-	Notice,
 } from '@wordpress/components';
 import { Icon, info, blockDefault } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -47,7 +46,7 @@ function TemplateListBox( {
 			{ templates.map( ( template ) => (
 				<div
 					key={ `${ template.slug }_${ template.id }` }
-					className="block-editor-block-patterns-list__list-item"
+					className="block-editor-block-patterns-list__list-item email-editor-pattern__list-item"
 				>
 					<div
 						className="block-editor-block-patterns-list__item"
@@ -81,9 +80,9 @@ function TemplateListBox( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								<div className="block-editor-block-patterns-list__item-title">
+								<h4 className="block-editor-block-patterns-list__item-title">
 									{ template.template.title.rendered }
-								</div>
+								</h4>
 							</HStack>
 						</Async>
 					</div>
@@ -115,7 +114,7 @@ export function TemplateList( {
 	return (
 		<div className="block-editor-block-patterns-explorer__list">
 			{ selectedCategory === 'recent' && (
-				<Notice isDismissible={ false }>
+				<div className="email-editor-recent-templates-info">
 					<HStack spacing={ 1 } expanded={ false } justify="start">
 						<Icon icon={ info } />
 						<p>
@@ -125,7 +124,7 @@ export function TemplateList( {
 							) }
 						</p>
 					</HStack>
-				</Notice>
+				</div>
 			) }
 
 			<MemorizedTemplateListBox