-
-
-
- { content.heading }
-
-
+
- { content.facebookTitle }
+
{ content.facebookTitle }
{ content.facebookDesc }
@@ -54,7 +52,12 @@ const SiteGenSiteSocialMedia = () => {
className="nfd-onboarding-step--site-gen__social-media__container__buttons__skip"
text={ content.buttons.skip }
/>
-
+ { isLargeViewport && (
+
+ ) }
diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
index f72ce8510..43901277e 100644
--- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
@@ -6,38 +6,20 @@
&__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;
- }
- }
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
&__buttons {
+ width: 95%;
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-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
font-style: normal;
font-weight: 510;
margin-right: 24px;
@@ -47,31 +29,56 @@
color: var(--nfd-onboarding-primary);
}
}
+
+ @media (max-width: #{ ($break-small) }) {
+ justify-content: center;
+ margin-bottom: 50px;
+ }
}
}
&__contain {
- width: 600px;
margin: 16px;
border: 1.25px solid var(--nfd-onboarding-site-logo-border);
border-radius: 8px;
- padding: 24px;
+ padding: 30px 35px;
display: flex;
- flex-direction: row;
- justify-content: left;
+ justify-content: space-between;
align-items: left;
+ width: 40vw;
+
+ @media (max-width: #{ ($break-large) }) {
+ width: 80vw;
+ }
&__containleft {
- width: 400px;
+ width: 65%;
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;
+ margin-right: 25px;
white-space: normal;
line-height: 1;
+
+ span {
+ font-size: clamp(1.1rem, 0.927rem + 0.364vw, 1.8rem);
+ }
+
+ p {
+ margin-top: 15px;
+ font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
+
+ @media (max-width: #{ ($break-small) }) {
+ text-align: justify;
+ }
+ }
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100%;
+ margin-right: 0;
+ }
}
&__containright {
@@ -89,6 +96,15 @@
border: none;
border-radius: 5px;
cursor: pointer;
+ justify-content: center;
+
+ &:hover {
+ background-color: #0065ea;
+ }
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100%;
+ }
}
&__button i {
@@ -96,7 +112,12 @@
background-image: var(--facebook-icon);
width: 25px;
height: 25px;
- filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(104%) contrast(102%);
+ filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(376%) hue-rotate(220deg) brightness(120%) contrast(100%);
+ }
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100%;
+ margin: 30px 0;
}
}
}
@@ -105,10 +126,10 @@
&__contain {
margin: 8px;
+ padding: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
- width: 85%;
}
&__containright {
diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
index dbe0c868d..90f8a5653 100644
--- a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
@@ -40,9 +40,11 @@
&__image {
height: 36px;
width: 42px;
- background-image: var(--sitegen-ai-icon);
- background-repeat: no-repeat;
+ border-radius: 7px;
background-size: cover;
+ background-repeat: no-repeat;
+ background-image: var(--sitegen-ai-icon);
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
@media (max-width: #{ ($break-small) }) {
width: 32px;
diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js
index e28d52f62..da6ae43d5 100644
--- a/src/OnboardingSPA/store/actions.js
+++ b/src/OnboardingSPA/store/actions.js
@@ -189,6 +189,13 @@ export function setHeaderActiveView( view ) {
};
}
+export function setFooterNavEnabled( navEnabled ) {
+ return {
+ type: 'SET_FOOTER_NAV_ENABLED',
+ navEnabled,
+ };
+}
+
export function setFooterActiveView( view ) {
return {
type: 'SET_FOOTER_ACTIVE_VIEW',
diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js
index 8954a5368..e475ad0e2 100644
--- a/src/OnboardingSPA/store/reducer.js
+++ b/src/OnboardingSPA/store/reducer.js
@@ -302,11 +302,17 @@ export function queue( state = [], action ) {
export function footer(
state = {
footers,
+ navEnabled: true,
view: FOOTER_SITEGEN,
},
action
) {
switch ( action.type ) {
+ case 'SET_FOOTER_NAV_ENABLED':
+ return {
+ ...state,
+ navEnabled: action.navEnabled,
+ };
case 'SET_FOOTER_ACTIVE_VIEW':
return {
...state,
diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js
index db049431d..1df9bb30e 100644
--- a/src/OnboardingSPA/store/selectors.js
+++ b/src/OnboardingSPA/store/selectors.js
@@ -57,6 +57,10 @@ export function getFooterActiveView( state ) {
return state.footer.view;
}
+export function getFooterNavEnabled( state ) {
+ return state.footer.navEnabled;
+}
+
/**
* Gets current Newfold brand
*
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index df2f4556f..c09751921 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -302,6 +302,8 @@ body {
}
.nfd-onboarding-sitegen-light {
+
+ --sitegen-background: #ededed;
--nfd-onboarding-primary: #000;
--nfd-onboarding-primary-rgb: 0, 0, 0;
--nfd-onboarding-hover: #c3c4c7;
@@ -335,5 +337,6 @@ body {
--nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35);
--nfd-onboarding-site-logo-border: rgba(156, 162, 167, 1);
--nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+ --sitegen-background: url(../static/images/ai_bg.png);
}
}
diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss
index e6a113c4d..062471fe0 100644
--- a/src/OnboardingSPA/styles/_icons.scss
+++ b/src/OnboardingSPA/styles/_icons.scss
@@ -37,7 +37,8 @@ body {
--site-features-wishlist: url(../static/icons/site-features/wishlist.svg);
--site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg);
- --sitegen-background: url(../static/images/ai_bg_low.png);
+ --sitegen-background: url(../static/images/ai_bg.png);
+ --sitegen-background-high-res: url(../static/images/ai_bg.png);
--sitegen-ai-icon: url(../static/icons/sitegen/sitegen-ai-icon.svg);
--sitegen-image-upload-icon: url(../static/icons/sitegen/image-upload.svg);
--sitegen-ai-animation: url(../static/images/sitegen/sitegen-ai-animation.gif);