Skip to content

Commit

Permalink
Merge pull request #366 from newfold-labs/add/sitegen-socialmedia
Browse files Browse the repository at this point in the history 
PRESS2-1376 Add/sitegen socialmedia
  • Loading branch information
@girish-lokapure
girish-lokapure authored Nov 28, 2023
2 parents 6f42762 + eee62ff commit cf2170d
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 3 deletions.
24 changes: 24 additions & 0 deletions src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { __ } from '@wordpress/i18n';

const getContents = () => {
return {
heading: __(
'Do you want to include any content from Facebook?',
'wp-module-onboarding'
),
facebookTitle: __(
'Connect a Facebook Account',
'wp-module-onboarding'
),
facebookDesc: __(
'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your Al generated site.',
'wp-module-onboarding'
),
facebookButton: __( 'Connect Facebook', 'wp-module-onboarding' ),
buttons: {
skip: __( 'Skip for now', 'wp-module-onboarding' ),
},
};
};

export default getContents;
35 changes: 32 additions & 3 deletions src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { useEffect } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { store as nfdOnboardingStore } from '../../../store';
import { HEADER_SITEGEN } from '../../../../constants';

import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
import getContents from './contents';
import ButtonNext from '../../../components/Button/ButtonNext';
import SkipButton from '../../../components/SkipButton';

const SiteGenSiteSocialMedia = () => {
const {
Expand All @@ -22,12 +23,40 @@ const SiteGenSiteSocialMedia = () => {
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
} );

const content = getContents();
return (
<CommonLayout
isCentered
className="nfd-onboarding-step--site-gen__social-media"
>
<SiteGenPlaceholder heading={ 'Social Media' } />
<div className="nfd-onboarding-step--site-gen__social-media__container">
<div className="nfd-onboarding-step--site-gen__social-media__container__heading">
<div className="nfd-onboarding-step--site-gen__social-media__container__heading__animation"></div>
<p className="nfd-onboarding-step--site-gen__social-media__container__heading__text">
{ content.heading }
</p>
</div>
<div className="nfd-onboarding-step--site-gen__social-media__contain ">
<div className="nfd-onboarding-step--site-gen__social-media__contain__containleft ">
{ content.facebookTitle }
<p>{ content.facebookDesc }</p>
</div>
<div className="nfd-onboarding-step--site-gen__social-media__contain__containright ">
<button className="nfd-onboarding-step--site-gen__social-media__contain__containright__button ">
<i></i>
{ content.facebookButton }
</button>
</div>
</div>
<div className="nfd-onboarding-step--site-gen__social-media__container__buttons">
<SkipButton
className="nfd-onboarding-step--site-gen__social-media__container__buttons__skip"
text={ content.buttons.skip }
/>
<ButtonNext disabled={ true } />
</div>
</div>
</CommonLayout>
);
};
Expand Down
128 changes: 128 additions & 0 deletions src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
.nfd-onboarding-step {

&--site-gen {

&__social-media {

&__container {

&__heading {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

&__animation {
background-image: var(--sitegen-ai-animation);
background-repeat: no-repeat;
background-size: contain;
width: 83px;
height: 72px;
}

&__text {
color: var(--nfd-onboarding-primary);
font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
margin-left: 15px;
white-space: normal;
line-height: 1;
}
}

&__buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 16px;

&__skip {
font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
font-style: normal;
font-weight: 510;
margin-right: 24px;

&:hover {
text-decoration: underline;
color: var(--nfd-onboarding-primary);
}
}
}

}

&__contain {
width: 600px;
margin: 16px;
border: 1.25px solid var(--nfd-onboarding-site-logo-border);
border-radius: 8px;
padding: 24px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: left;

&__containleft {
width: 400px;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--nfd-onboarding-primary);
font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
margin-left: 15px;
white-space: normal;
line-height: 1;
}

&__containright {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

&__button {
display: inline-flex;
align-items: center;
padding: 10px 15px;
background-color: #1877f2;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

&__button i {
margin-right: 8px;
background-image: var(--facebook-icon);
width: 25px;
height: 25px;
filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(104%) contrast(102%);
}
}
}

@media only screen and (max-width: 600px) {

&__contain {
margin: 8px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 85%;
}

&__containright {

&__button {
padding: 8px 12px;
}

&__button i {
width: 20px;
height: 20px;
}
}
}
}
}
}
1 change: 1 addition & 0 deletions src/OnboardingSPA/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
@import "../steps/SiteGen/SiteDetails/stylesheet";
@import "../steps/SiteGen/Experience/stylesheet";
@import "../steps/SiteGen/SiteLogo/stylesheet";
@import "../steps/SiteGen/SocialMedia/stylesheet";
@import "../steps/SiteGen/Welcome/stylesheet";
@import "../steps/SiteGen/Building/stylesheet";

Expand Down

0 comments on commit cf2170d

Please sign in to comment.