From 348c37f715ce02c768305c7576593f5ed23bdce0 Mon Sep 17 00:00:00 2001 From: girish-lokapure Date: Wed, 15 Nov 2023 18:36:09 +0530 Subject: [PATCH 1/5] initial commit --- .../steps/SiteGen/SocialMedia/contents.js | 24 ++++ .../steps/SiteGen/SocialMedia/index.js | 36 +++++- .../steps/SiteGen/SocialMedia/stylesheet.scss | 104 ++++++++++++++++++ src/OnboardingSPA/styles/app.scss | 1 + 4 files changed, 162 insertions(+), 3 deletions(-) create mode 100644 src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js create mode 100644 src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js new file mode 100644 index 000000000..a44fe16be --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js @@ -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; diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js index 71b19295a..a3134ba23 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js @@ -5,8 +5,10 @@ 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'; +import ImageUploaderWithText from '../../../components/ImageUploader/components/ImageUploaderWithText'; const SiteGenSiteSocialMedia = () => { const { @@ -22,12 +24,40 @@ const SiteGenSiteSocialMedia = () => { setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); } ); + + const content = getContents(); return ( - +
+
+
+

+ { content.heading } +

+
+
+
+ { content.facebookTitle } +

{ content.facebookdesc }

+
+
+ +
+
+
+ resetSiteLogo() } + className="nfd-onboarding-step--site-gen__social-media__container__buttons__skip" + text={ content.buttons.skip } + /> + +
+
); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss new file mode 100644 index 000000000..63f96a866 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -0,0 +1,104 @@ +.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 dashed 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; + } + } + } + } + } +} diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 4661199ff..f5ddfcd67 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -66,6 +66,7 @@ @import "../steps/SiteFeatures/stylesheet"; @import "../steps/TheFork/stylesheet"; @import "../steps/SiteGen/SiteLogo/stylesheet"; +@import "../steps/SiteGen/SocialMedia/stylesheet.scss"; .nfd-onboarding-container { display: flex; From 6f750aa5f08b8037096cd8e0cb7b6ed49b2f32b8 Mon Sep 17 00:00:00 2001 From: girish-lokapure Date: Fri, 24 Nov 2023 12:54:54 +0530 Subject: [PATCH 2/5] lint checks --- .../static/icons/social/facebook-white.svg | 3 +++ .../steps/SiteGen/SocialMedia/stylesheet.scss | 10 +++++----- src/OnboardingSPA/styles/_icons.scss | 1 + 3 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 src/OnboardingSPA/static/icons/social/facebook-white.svg diff --git a/src/OnboardingSPA/static/icons/social/facebook-white.svg b/src/OnboardingSPA/static/icons/social/facebook-white.svg new file mode 100644 index 000000000..76b72787e --- /dev/null +++ b/src/OnboardingSPA/static/icons/social/facebook-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss index f94bec2fc..c10ac3ede 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -68,10 +68,10 @@ 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; + font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); + margin-left: 15px; + white-space: normal; + line-height: 1; } &__containright { @@ -93,7 +93,7 @@ &__button i { margin-right: 8px; - background-image: var(--facebook-icon); + background-image: var(--facebook-white-icon); width: 25px; height: 25px; } diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 17b6bad17..52b154aff 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -10,6 +10,7 @@ body { --chevron-down-icon: url(../static/icons/chevron-down.svg); --default-logo-icon: url(../static/icons/default-logo.svg); --facebook-icon: url(../static/icons/social/facebook.svg); + --facebook-white-icon: url(../static/icons/social/facebook-white.svg); --twitter-icon: url(../static/icons/social/twitter.svg); --instagram-icon: url(../static/icons/social/instagram.svg); --linkedin-icon: url(../static/icons/social/linkedin.svg); From fd088126d6795392d654e8cfad164ff55ead3620 Mon Sep 17 00:00:00 2001 From: girish-lokapure Date: Fri, 24 Nov 2023 15:01:29 +0530 Subject: [PATCH 3/5] mobile ui changes --- .../steps/SiteGen/SocialMedia/stylesheet.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss index c10ac3ede..c88dda3d3 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -99,6 +99,26 @@ } } } + @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; + } + } + } } } } From 86adc2fceee7191a92ed733886abd82e3902ada6 Mon Sep 17 00:00:00 2001 From: girish-lokapure Date: Fri, 24 Nov 2023 15:03:54 +0530 Subject: [PATCH 4/5] mobile ui changes --- .../steps/SiteGen/SocialMedia/stylesheet.scss | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss index c88dda3d3..048578d07 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -99,22 +99,25 @@ } } } + @media only screen and (max-width: 600px) { + &__contain { margin: 8px; - flex-direction: column; - justify-content: center; - align-items: center; + flex-direction: column; + justify-content: center; + align-items: center; width: 85%; } - + &__containright { + &__button { - padding: 8px 12px; + padding: 8px 12px; } - + &__button i { - width: 20px; + width: 20px; height: 20px; } } From eee62ffe15194a863ce616d3d7cc4bc8e5aa30fd Mon Sep 17 00:00:00 2001 From: girish-lokapure Date: Tue, 28 Nov 2023 13:45:39 +0530 Subject: [PATCH 5/5] icon related changes --- src/OnboardingSPA/static/icons/social/facebook-white.svg | 3 --- src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss | 3 ++- src/OnboardingSPA/styles/_icons.scss | 1 - 3 files changed, 2 insertions(+), 5 deletions(-) delete mode 100644 src/OnboardingSPA/static/icons/social/facebook-white.svg diff --git a/src/OnboardingSPA/static/icons/social/facebook-white.svg b/src/OnboardingSPA/static/icons/social/facebook-white.svg deleted file mode 100644 index 76b72787e..000000000 --- a/src/OnboardingSPA/static/icons/social/facebook-white.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss index 048578d07..f72ce8510 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -93,9 +93,10 @@ &__button i { margin-right: 8px; - background-image: var(--facebook-white-icon); + background-image: var(--facebook-icon); width: 25px; height: 25px; + filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(104%) contrast(102%); } } } diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 52b154aff..17b6bad17 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -10,7 +10,6 @@ body { --chevron-down-icon: url(../static/icons/chevron-down.svg); --default-logo-icon: url(../static/icons/default-logo.svg); --facebook-icon: url(../static/icons/social/facebook.svg); - --facebook-white-icon: url(../static/icons/social/facebook-white.svg); --twitter-icon: url(../static/icons/social/twitter.svg); --instagram-icon: url(../static/icons/social/instagram.svg); --linkedin-icon: url(../static/icons/social/linkedin.svg);