Fix Minor Bugs 2

src/OnboardingSPA/components/CardWithOptions/stylesheet.scss

@@ -34,7 +34,7 @@ $background-color: var(--nfd-onboarding-card-background);
 			margin: 16px 4px;
 			align-items: center;
 			border-radius: 4px 4px 0 0;
-			padding: 16px 12px 20px 12px;
+			padding: 16px 12px 16px 12px;
 			justify-content: space-between;
 			transition: background-color 400ms ease-in-out;
 

src/OnboardingSPA/components/Footer/stylesheet.scss

@@ -8,7 +8,7 @@
 	flex-direction: row;
 
 	height: auto;
-	width: 100%;
+	width: 20%;
 	border: none;
 
 	&__end {
@@ -30,6 +30,7 @@
 	}
 
 	@media (max-width: #{ ($break-small) }) {
+		width: 100%;
 		backdrop-filter: blur(2px);
 		background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5);
 		border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25);

src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss

@@ -2,12 +2,12 @@
 
 	width: 100%;
 	display: flex;
-	margin-bottom: 20px;
+	margin: 16px;
 	align-items: center;
 
 	&--icon {
 		width: 50px;
-		margin: 4px;
+		margin-right: 4px;
 		height: 50px;
 		background-size: 200%;
 		background-position: center;

src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js

@@ -6,7 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenSiteLogo = lazy( () => import( './index' ) );
 
 export const stepSiteGenSiteLogo = new Step( {
-	path: '/sitgen/step/site-logo',
+	path: '/sitegen/step/site-logo',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: SiteGenSiteLogo,
 	icon: copy,

src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js

@@ -11,7 +11,7 @@ const getContents = () => {
 			'wp-module-onboarding'
 		),
 		facebookDesc: __(
-			'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your Al generated site.',
+			'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your AI generated site.',
 			'wp-module-onboarding'
 		),
 		facebookButton: __( 'Connect Facebook', 'wp-module-onboarding' ),

src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss

@@ -7,7 +7,7 @@
 			&__container {
 
 				display: flex;
-				align-items: center;
+				width: 40vw;
 				flex-direction: column;
 				justify-content: center;
 

src/OnboardingSPA/steps/TheFork/contents.js

@@ -20,7 +20,7 @@ const getContents = () => {
 			{
 				title: __( ' Website Creator', 'wp-module-onboarding' ),
 				subtitle: __(
-					'Custom Al generated content & design.',
+					'Custom AI generated content & design.',
 					'wp-module-onboarding'
 				),
 				span: __( 'AI', 'wp-module-onboarding' ),

tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js

@@ -1,70 +1,69 @@
 // <reference types="Cypress" />
 
-import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from "../wp-module-support/siteGen.cy";
+import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from '../wp-module-support/siteGen.cy';
 
-describe( 'SiteGen Site Logo Step', function () {
+describe( 'SiteGen Site Logo Step', function() {
 	before( () => {
 		cy.visit(
-			'wp-admin/?page=nfd-onboarding#/sitgen/step/site-logo'
+			'wp-admin/?page=nfd-onboarding#/sitegen/step/site-logo'
 		);
 	} );
 
-    it( 'Check for the header admin bar', () => {
-        AdminBarCheck();
-    } );
+	it( 'Check for the header admin bar', () => {
+		AdminBarCheck();
+	} );
 
-    it( 'Check for the existing dark background', () => {
+	it( 'Check for the existing dark background', () => {
 		DarkBGCheck();
 	} );
 
-    it( 'Check for the light background', () => {
-        LightBGChcek();
-    } );
-
-    it( 'Check the Progress Bar Value', () => {
-        ProgressBarCheck('33.3333%');
-    });
+	it( 'Check for the light background', () => {
+		LightBGChcek();
+	} );
 
-    it( 'Check for back button and go back', () => {
-        BackButtonCheck('sitgen/step/site-logo');
-    } );
+	it( 'Check the Progress Bar Value', () => {
+		ProgressBarCheck( '33.3333%' );
+	} );
 
-    it( 'Check if the heading is visible', () => {
-        cy.get('.ai-heading').should('be.visible');
-    } );
+	it( 'Check for back button and go back', () => {
+		BackButtonCheck( 'sitegen/step/site-logo' );
+	} );
 
-    it( 'Check for the skip button and click', () => {
-        SkipButtonCheck('sitgen/step/site-logo');
-    } );
+	it( 'Check if the heading is visible', () => {
+		cy.get( '.ai-heading' ).should( 'be.visible' );
+	} );
 
-    it( 'Check if the Next Button is disabled when there is no logo', () => {
-        DisabledNextButton();
-    } );
+	it( 'Check for the skip button and click', () => {
+		SkipButtonCheck( 'sitegen/step/site-logo' );
+	} );
 
-    it( 'Check if Image gets uploaded and Next button is enabled', () => {
-        const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`;
-        const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview';
-        if(
-            cy.get('.nfd-onboarding-button--site-gen-next--disabled')
-                .should('be.visible')
-                ){
-                    cy.get(LogoPreviewClass)
-                        .should('not.exist');
-        };
-        cy.get('input[type=file]', { timeout: 10000 })
-            .should('exist')
-            .selectFile( sampleLogoPath ,  {force: true} )
-				.then( () => {
-					cy.wait( 1000 );
-					cy.get(LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' );
-					cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' )
-                        .scrollIntoView()
-						.should( 'be.visible' );
-				} );
-        cy.get('.nfd-onboarding-button--site-gen-next')
-            .should('not.be.disabled')
-            .click();
-        cy.url().should('not.contain', 'sitgen/step/site-logo');
-    });
+	it( 'Check if the Next Button is disabled when there is no logo', () => {
+		DisabledNextButton();
+	} );
 
-});
+	it( 'Check if Image gets uploaded and Next button is enabled', () => {
+		const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`;
+		const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview';
+		if (
+			cy.get( '.nfd-onboarding-button--site-gen-next--disabled' )
+				.should( 'be.visible' )
+		) {
+			cy.get( LogoPreviewClass )
+				.should( 'not.exist' );
+		}
+		cy.get( 'input[type=file]', { timeout: 10000 } )
+			.should( 'exist' )
+			.selectFile( sampleLogoPath, { force: true } )
+			.then( () => {
+				cy.wait( 1000 );
+				cy.get( LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' );
+				cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' )
+					.scrollIntoView()
+					.should( 'be.visible' );
+			} );
+		cy.get( '.nfd-onboarding-button--site-gen-next' )
+			.should( 'not.be.disabled' )
+			.click();
+		cy.url().should( 'not.contain', 'sitegen/step/site-logo' );
+	} );
+} );