From e781a5745abe1bee69ad4531b2760ea051d66c5a Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 6 Dec 2023 12:11:30 +0530 Subject: [PATCH 1/4] Add Dark Mode for Logo --- .../HeadingWithSubHeading/SiteGen/index.js | 16 +++++++++++++++- .../SiteGen/stylesheet.scss | 5 +++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js index 88e9a6cd2..e0973c695 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js @@ -1,3 +1,8 @@ +import classNames from 'classnames'; +import { useContext } from '@wordpress/element'; +import { THEME_LIGHT } from '../../../../constants'; +import { ThemeContext } from '../../ThemeContextProvider'; + /** * Interface Cards with standard design. * @@ -7,13 +12,22 @@ */ const HeadingWithSubHeading = ( { title, subtitle } ) => { + const { theme } = useContext( ThemeContext ); + return (

{ title }

{ subtitle && (
{ subtitle } -
+
) }
diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss index a953cf381..d2ecccf73 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss @@ -25,10 +25,15 @@ display: inline-flex; width: 100px; height: 17px; + margin-left: 4px; background-image: var(--nfd-onboarding-logo-name); background-size: contain; background-repeat: no-repeat; filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(200%) contrast(200%); + + &--light { + filter: brightness(0) saturate(100%); + } } } } From f8c6464511ac0ad6075b4c53dfb16bc2df159f43 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 7 Dec 2023 19:16:35 +0530 Subject: [PATCH 2/4] Fix Responsiveness Issues :construction: --- .../components/StartOptions/stylesheet.scss | 35 +++++++++++++++---- .../steps/TheFork/stylesheet.scss | 6 +++- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss index 8fbd1c460..2e10027f6 100644 --- a/src/OnboardingSPA/components/StartOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/StartOptions/stylesheet.scss @@ -8,13 +8,18 @@ color: var(--nfd-onboarding-primary); font-weight: 500; text-align: center; - font-size: 18px; + font-size: 20px; } &__container { display: flex; - justify-content: center; flex-wrap: wrap; + align-items: center; + justify-content: center; + + @media (max-width: #{ ($break-large) }) { + flex-direction: column; + } &__options { flex: 1; @@ -22,12 +27,24 @@ height: 130px; border: 1px solid #9ca2a7; text-align: center; - padding: 24px; - padding-top: 50px; + padding: 40px 24px; margin: 20px; border-radius: 16px; color: var(--nfd-onboarding-primary); font-size: 20px; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + transition: all 200ms ease-in-out; + background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.25); + + @media (max-width: #{ ($break-large) }) { + height: 60px; + margin: 12px; + padding: 12px; + min-width: 85vw; + } &__span { background-color: var(--nfd-onboarding-white); @@ -41,10 +58,10 @@ } &__options:hover { - background-color: rgba(6, 0, 0, 0.3); cursor: pointer; outline: 2px solid #9ca2a7; - transition: 0.1s linear; + box-shadow: 13px 18px 27px -6px rgba(0, 0, 0, 0.3); + background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.5); } &__heading { @@ -54,11 +71,15 @@ line-height: 1; &__title { - font-weight: 510; + font-weight: 500; text-align: center; color: var(--nfd-onboarding-primary); font-size: 20px; line-height: 20px; + + @media (max-width: #{ ($break-large) }) { + margin: 8px; + } } &__subtitle { diff --git a/src/OnboardingSPA/steps/TheFork/stylesheet.scss b/src/OnboardingSPA/steps/TheFork/stylesheet.scss index 84b14e08c..5c348f462 100644 --- a/src/OnboardingSPA/steps/TheFork/stylesheet.scss +++ b/src/OnboardingSPA/steps/TheFork/stylesheet.scss @@ -4,9 +4,13 @@ &__fork { display: flex; + align-items: center; flex-direction: column; justify-content: center; - align-items: center; + + @media (max-width: #{ ($break-large) }) { + margin-bottom: 80px; + } &__heading { color: var(--nfd-onboarding-primary); From 987ba47107ba326a84e40f51d4a7972fb06a288c Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 8 Dec 2023 11:40:37 +0530 Subject: [PATCH 3/4] Fix Link for Migration --- src/OnboardingSPA/steps/TheFork/index.js | 11 +++++++++-- src/OnboardingSPA/steps/TheFork/stylesheet.scss | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index 7da697a97..ae1ba67a3 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -1,7 +1,7 @@ import CommonLayout from '../../components/Layouts/Common'; import { useEffect } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../store'; import { FOOTER_SITEGEN, HEADER_SITEGEN } from '../../../constants'; @@ -12,6 +12,12 @@ import StartOptions from '../../components/StartOptions'; import getContents from './contents'; const TheFork = () => { + const { migrationUrl } = useSelect( ( select ) => { + return { + migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(), + }; + } ); + const { setIsHeaderEnabled, setSidebarActiveView, @@ -53,7 +59,8 @@ const TheFork = () => {
{ content.importtext } diff --git a/src/OnboardingSPA/steps/TheFork/stylesheet.scss b/src/OnboardingSPA/steps/TheFork/stylesheet.scss index 5c348f462..c2f831d26 100644 --- a/src/OnboardingSPA/steps/TheFork/stylesheet.scss +++ b/src/OnboardingSPA/steps/TheFork/stylesheet.scss @@ -50,7 +50,7 @@ text-align: center; font-size: 18px; line-height: 20px; - margin-top: 35px !important; + margin: 35px !important; } } } From 9ee916b3380772330788d66c9febb4f3c9026fed Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 8 Dec 2023 11:44:04 +0530 Subject: [PATCH 4/4] Update index.js --- src/OnboardingSPA/steps/TheFork/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index ae1ba67a3..3d8e7c794 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -60,7 +60,8 @@ const TheFork = () => { { content.importtext }