From bf6268303f1a1acc0cb76fd8818af1769fb13043 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 3 Feb 2023 11:25:36 +0530 Subject: [PATCH 1/3] remove browser top border, consolidate large preview css --- .../LivePreview/BlockPreview/stylesheet.scss | 24 +++--- .../pages/Steps/DesignColors/index.js | 30 ++++--- .../pages/Steps/DesignColors/stylesheet.scss | 29 +------ .../pages/Steps/DesignHeaderMenu/index.js | 23 +++--- .../Steps/DesignHeaderMenu/stylesheet.scss | 78 +------------------ .../Steps/DesignThemeStyles/Preview/index.js | 30 ++++--- .../DesignThemeStyles/Preview/stylesheet.scss | 24 ------ .../pages/Steps/DesignTypography/index.js | 30 ++++--- .../Steps/DesignTypography/stylesheet.scss | 29 +------ 9 files changed, 76 insertions(+), 221 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index b1ba38652..2a4d255d8 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -13,13 +13,20 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb); max-width: 320px; max-height: 320px; } - + &-large { width: 70%; - height: 70%; + min-height: 90vh; overflow: hidden; - max-width: 925px; - max-height: 925px; + position: relative; + align-items: center; + border: 1px solid #e3dfdf; + border-top: 0; + margin-bottom: 30px; + + &:hover { + cursor: not-allowed; + } } &--is-skeleton { @@ -60,13 +67,8 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb); width: 100%; height: 100%; position: absolute; - background-image: linear-gradient(90deg, - rgba($main-color-light-rgb, 0) 0, - rgba($main-color-light-rgb, 0.4) 20%, - rgba($main-color-light-rgb, 0.6) 60%, - rgba($main-color-light-rgb, 0.4) 90%, - rgba($main-color-light-rgb, 0.02) 100%, - $main-color-grey); + background-image: + linear-gradient(90deg, rgba($main-color-light-rgb, 0) 0, rgba($main-color-light-rgb, 0.4) 20%, rgba($main-color-light-rgb, 0.6) 60%, rgba($main-color-light-rgb, 0.4) 90%, rgba($main-color-light-rgb, 0.02) 100%, $main-color-grey); } } } diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 52bcbd34d..5598d7c32 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -61,22 +61,20 @@ const StepDesignColors = () => { -
- { ! pattern && ( - - ) } - { pattern && ( - - ) } -
+ { ! pattern && ( + + ) } + { pattern && ( + + ) } diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss index c73a28055..b238d8ce5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss @@ -1,10 +1,12 @@ .theme-colors-preview { flex: 1; - margin: 16px; + width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; + background-color: #eee; + padding-top: 20px; &__title-bar { width: 70%; @@ -30,29 +32,4 @@ } } } - - &__live-preview-container { - width: 70%; - min-height: 90vh; - overflow: hidden; - position: relative; - align-items: center; - border: 1px solid #e3dfdf; - margin-bottom: 30px; - - - &:hover { - cursor: not-allowed; - } - - .live-preview { - - &__container { - - &-custom { - width: 100%; - } - } - } - } } diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index ef43f9c33..ecad84ed0 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -46,15 +46,20 @@ const StepDesignHeaderMenu = () => { -
- { pattern && ( - - ) } -
+ { ! pattern && ( + + ) } + { pattern && ( + + ) } diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss index 75ad2a5fe..26cd319c5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -6,57 +6,7 @@ flex-direction: column; justify-content: center; background-color: #eee; - - &__checkbox { - margin: 20px 0; - width: 70%; - display: inline; - - .components-checkbox-control { - - &__checked { - height: 32px; - width: 32px; - left: 0; - top: 0; - } - - &__input-container { - height: 32px; - width: 32px; - } - - &__input[type="checkbox"] { - height: 32px; - width: 32px; - - &:focus { - box-shadow: none; - } - } - } - - .components-base-control { - - &__field { - display: flex; - flex-direction: row; - } - } - - &__label { - - margin-left: 15px; - - &__hint { - color: #757575; - display: block; - font-style: italic; - margin-top: 5px; - } - } - - } + padding-top: 20px; &__title-bar { width: 70%; @@ -66,7 +16,6 @@ background-color: #ccc; justify-content: space-between; border: 1px solid transparent; - margin-top: 20px; &__browser { display: flex; @@ -83,29 +32,4 @@ } } } - - &__live-preview-container { - width: 70%; - min-height: 80vh; - overflow: hidden; - position: relative; - align-items: center; - border: 1px solid #e3dfdf; - margin-bottom: 30px; - - - &:hover { - cursor: not-allowed; - } - - .live-preview { - - &__container { - - &-custom { - width: 100%; - } - } - } - } } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 6c5bc0ff1..fba1ff6e7 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -194,22 +194,20 @@ const StepDesignThemeStylesPreview = () => { -
- { ! pattern && ( - - ) } - { pattern && ( - - ) } -
+ { ! pattern && ( + + ) } + { pattern && ( + + ) } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss index 7e1f1a4d2..45137a584 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss @@ -82,28 +82,4 @@ } } } - - &__live-preview-container { - width: 70%; - min-height: 80vh; - overflow: hidden; - position: relative; - align-items: center; - border: 1px solid #e3dfdf; - margin-bottom: 30px; - - &:hover { - cursor: not-allowed; - } - - .live-preview { - - &__container { - - &-custom { - width: 100%; - } - } - } - } } diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 6d0bc3a5a..3eb6e727e 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -64,22 +64,20 @@ const StepDesignTypography = () => { -
- { ! pattern && ( - - ) } - { pattern && ( - - ) } -
+ { ! pattern && ( + + ) } + { pattern && ( + + ) } diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss index 55d2017eb..1f454758f 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss @@ -1,10 +1,12 @@ .theme-fonts-preview { flex: 1; - margin: 16px; + width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; + background-color: #eee; + padding-top: 20px; &__title-bar { width: 70%; @@ -31,29 +33,4 @@ } } - &__live-preview-container { - width: 70%; - min-height: 90vh; - overflow: hidden; - position: relative; - align-items: center; - border: 1px solid #e3dfdf; - margin-bottom: 30px; - - - &:hover { - cursor: not-allowed; - } - - .live-preview { - - &__container { - - &-custom { - width: 100%; - } - } - } - } - } From 5b869547f36f39e79648b61ce8a2627c3fd19325 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 3 Feb 2023 11:41:12 +0530 Subject: [PATCH 2/3] move #eee to sass variable --- src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss | 2 +- src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss | 2 +- .../pages/Steps/DesignThemeStyles/Preview/stylesheet.scss | 2 +- src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss | 2 +- src/OnboardingSPA/styles/_branding.scss | 1 + 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss index b238d8ce5..fbf135cca 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: #eee; + background-color: var(--nfd-onboarding-light-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss index 26cd319c5..4b15fe650 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: #eee; + background-color: var(--nfd-onboarding-light-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss index 45137a584..d9d13f198 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: #eee; + background-color: var(--nfd-onboarding-light-gray-5); &__checkbox { margin: 20px 0; diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss index 1f454758f..2117eb11f 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: #eee; + background-color: var(--nfd-onboarding-light-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index a2586b4fb..073829509 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -22,6 +22,7 @@ body { --nfd-onboarding-light-gray-2: #efefef; --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; + --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-dark: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; From 116d070ea280c59fae4b962fa32192d647cdcd0b Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 7 Feb 2023 13:09:19 +0530 Subject: [PATCH 3/3] add gray 5 to hostgator, webcom and newfold css --- src/OnboardingSPA/styles/_branding.scss | 2 ++ src/OnboardingSPA/styles/_interface.scss | 1 + 2 files changed, 3 insertions(+) diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 073829509..fae01a92c 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -54,6 +54,7 @@ body { --nfd-onboarding-light-gray-2: #efefef; --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; + --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-dark: #1e2044; --nfd-onboarding-border: 245, 246, 248; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); @@ -82,6 +83,7 @@ body { --nfd-onboarding-light-gray-2: #efefef; --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; + --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-dark: #000; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt); diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 91823446f..122527109 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -36,4 +36,5 @@ body { --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); --nfd-onboarding-footer-fg: var(--nfd-onboarding-dark); --nfd-onboarding-footer-bg: var(--nfd-onboarding-light); + --nfd-onboarding-light-gray-5: #eee; } \ No newline at end of file