render SVG (ravi) graphics

Author: ilicfilip

assets/src/components/OnboardingWizard/QuitConfirmation.js

@@ -21,6 +21,7 @@ export default function QuitConfirmation( { onConfirm, onCancel, config } ) {
 	const brandingName =
 		config?.l10n?.brandingName ||
 		__( 'Progress Planner', 'progress-planner' );
+	const baseUrl = config?.baseUrl || '';
 
 	return (
 		<div className="prpl-columns-wrapper-flex prpl-columns-2-1">
@@ -98,20 +99,12 @@ export default function QuitConfirmation( { onConfirm, onCancel, config } ) {
 			</div>
 			<div className="prpl-column prpl-hide-on-mobile">
 				<div id="prpl-quit-confirmation-graphic">
-					{ /* Graphic would be rendered here - neglected_site_ravi.svg */ }
-					<div
-						style={ {
-							width: '100%',
-							height: '200px',
-							backgroundColor: '#f0f0f0',
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							color: '#999',
-						} }
-					>
-						{ __( 'Graphic placeholder', 'progress-planner' ) }
-					</div>
+					<img
+						src={ `${
+							baseUrl || ''
+						}/assets/images/onboarding/neglected_site_ravi.svg` }
+						alt=""
+					/>
 				</div>
 			</div>
 		</div>

assets/src/components/OnboardingWizard/steps/MoreTasksStep.js

@@ -151,23 +151,12 @@ export default function MoreTasksStep( props ) {
 						</div>
 						<div className="prpl-column prpl-hide-on-mobile">
 							<div id="prpl-success-graphic">
-								{ /* Graphic would be rendered here - success_ravi.svg */ }
-								<div
-									style={ {
-										width: '100%',
-										height: '200px',
-										backgroundColor: '#f0f0f0',
-										display: 'flex',
-										alignItems: 'center',
-										justifyContent: 'center',
-										color: '#999',
-									} }
-								>
-									{ __(
-										'Graphic placeholder',
-										'progress-planner'
-									) }
-								</div>
+								<img
+									src={ `${
+										config?.baseUrl || ''
+									}/assets/images/onboarding/success_ravi.svg` }
+									alt=""
+								/>
 							</div>
 						</div>
 					</div>

assets/src/components/OnboardingWizard/steps/WelcomeStep.js

@@ -193,10 +193,6 @@ export default function WelcomeStep( props ) {
 									baseUrl || ''
 								}/assets/images/onboarding/thumbs_up_ravi_rtl.svg` }
 								alt=""
-								style={ {
-									maxWidth: '100%',
-									height: 'auto',
-								} }
 							/>
 						</div>
 					</div>