feat: improve sidebar navigation on onboarding

Author: Soare-Robert-Daniel

onboarding/src/Components/SiteSettings.js

@@ -138,7 +138,7 @@ export const SiteSettings = ( {
 			console.error( error );
 		} );
 	};
-
+	
 	return (
 		<div
 			className={ classnames(
@@ -149,23 +149,24 @@ export const SiteSettings = ( {
 			{ ! fetching ? (
 				<>
 					<div className="ob-site-settings-container">
+						<div className="ob-settings-header">
+							<div className="ob-settings-info">
+								<p>{ __( 'Selected Template', 'templates-patterns-collection' ) }</p>
+								<h3>{ siteData.title }</h3>
+							</div>
+							<div className="ob-settings-actions">
+								<Button
+									className="ob-link"
+									variant="link"
+									onClick={ () => {
+										setOnboardingStep( 2 );
+									} }
+								>
+									<span className="dashicons dashicons-no-alt" />
+								</Button>	
+							</div>
+						</div>
 						<div className="ob-settings-description">
-							<Button
-								className="ob-back"
-								type="link"
-								onClick={ () => {
-									if ( step === 4 ) {
-										setOnboardingStep( 3 );
-										return;
-									}
-									setOnboardingStep( 2 );
-								} }
-							>
-								{ __(
-									'Go back',
-									'templates-patterns-collection'
-								) }
-							</Button>
 							<h2>{ heading }</h2>
 							<p>{ description }</p>
 						</div>
@@ -285,7 +286,24 @@ export const SiteSettings = ( {
 									<p>{ firstUpsell }</p>
 									<p>{ secondUpsell }</p>
 								</div>
-							) ) }
+							) ) 
+						}
+						<Button
+							className="ob-link"
+							variant="link"
+							onClick={ () => {
+								if ( step === 4 ) {
+									setOnboardingStep( 3 );
+									return;
+								}
+								setOnboardingStep( 2 );
+							} }
+						>
+							{ __(
+								'Go back',
+								'templates-patterns-collection'
+							) }
+						</Button>
 					</div>
 				</>
 			) : (

onboarding/src/scss/_site-settings.scss

@@ -12,8 +12,43 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding: 0 24px;
+  
   overflow: auto;
+
+  &> * {
+    padding: 0 24px;
+  }
+}
+
+.ob-settings-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid $light-bg;
+  padding: 15px 24px;
+}
+
+.ob-settings-info {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 7px;
+
+  &> * {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
 }
 
 .ob-settings-description {