woocommerce/plugins/woocommerce-admin/client/core-profiler/style.scss

614 lines
11 KiB
SCSS
Raw Normal View History

@import './shared.scss';
.woocommerce-layout .woocommerce-layout__main {
@include breakpoint( '<782px' ) {
padding-top: 0 !important;
}
}
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
.woocommerce-profile-wizard__body {
background-color: #fff;
#woocommerce-layout__primary {
margin: 0;
width: 100%;
}
.woocommerce-layout__main {
padding-right: 0;
}
}
.woocommerce-profiler-page__content {
display: flex;
align-items: center;
flex-direction: column;
@include breakpoint( '<782px' ) {
padding: 0 20px;
}
.woocommerce-profiler-button-container {
width: 100%;
max-width: 404px;
@include breakpoint( '<782px' ) {
position: absolute;
bottom: 20px;
padding: 0 20px;
max-width: 100%;
}
}
.woocommerce-profiler-button {
display: flex;
width: 100%;
justify-content: center;
padding: 10px 16px;
height: 48px;
font-size: 14px;
font-weight: normal;
svg.components-spinner {
margin: 0;
}
}
.woocommerce-select-control__option {
font-size: 13px;
height: 40px;
min-height: initial;
&:hover {
background: #f6f7f7; // Gray-0
color: $gray-900;
}
}
.woocommerce-select-control__listbox {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #ccc;
margin-top: 8px;
top: 40px;
}
.woocommerce-select-control__control {
height: 40px;
padding: 12px;
border: 1px solid #bbb;
label,
.woocommerce-select-control__control-input {
font-size: 13px;
cursor: pointer;
}
.components-base-control__label {
font-size: 13px;
line-height: 16px;
color: $gray-700;
}
&.with-value {
.woocommerce-select-control__control-input {
margin: 0;
color: $gray-900;
}
.components-base-control__label {
display: none;
}
}
&.is-active {
border: 1px solid var(--wp-admin-theme-color);
}
}
#woocommerce-select-control__listbox-0 {
top: 40px !important;
}
}
.woocommerce-profiler-select-control__country {
max-width: 404px;
margin: auto auto 32px auto;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
}
// Intro opt-in page
.woocommerce-profiler-intro-opt-in {
min-height: 100vh;
display: flex;
flex-direction: column;
.woocommerce-profiler-heading {
.woocommerce-profiler-heading__title {
font-size: 40px;
line-height: 46px;
}
}
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
}
.woocommerce-profiler-intro-opt-in__content {
padding-top: 110px;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
flex: 1;
@include breakpoint( '<782px' ) {
padding-top: 70px;
}
.woocommerce-profiler-heading {
max-width: 520px;
}
.woocommerce-profiler-welcome-image {
margin-bottom: 64px;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
width: 266px;
height: 172px;
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
background: url(./assets/images/welcome-desktop.svg) no-repeat center
center;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
@include breakpoint( '<782px' ) {
margin-bottom: 40px;
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
background: url(./assets/images/welcome-mobile.svg) no-repeat
center center;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
width: 222px;
height: 144px;
}
}
.woocommerce-profiler-setup-store__button {
padding: 10px 16px;
width: 200px;
height: 48px;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: normal;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
@include breakpoint( '<782px' ) {
width: 100%;
margin-top: auto;
}
}
.woocommerce-profiler-intro-opt-in__footer {
margin: auto auto 40px;
display: flex;
justify-content: center;
@include breakpoint( '<782px' ) {
margin: 16px auto 20px;
}
.components-checkbox-control__input-container {
margin-left: 5px;
}
.components-checkbox-control__label {
display: inline-block;
color: $gray-700;
font-size: 13px;
line-height: 16px;
max-width: 514px;
margin-left: 10px;
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
}
a {
color: $gray-700;
}
}
}
// Business location page
.woocommerce-profiler-select-control__country {
max-width: 400px;
margin: auto auto 32px auto;
.woocommerce-select-control__option {
font-size: 13px;
}
.woocommerce-select-control__listbox {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #ccc;
margin-top: 8px;
}
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
.woocommerce-select-control__control {
height: 40px;
padding: 12px;
border: 1px solid #bbb;
label,
input {
font-size: 13px;
color: var(--wp-components-color-foreground, #757575);
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
}
&.is-active {
border: 1px solid #3858e9;
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
}
}
#woocommerce-select-control__listbox-0 {
top: 40px !important;
}
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
}
.woocommerce-profiler-business-location {
display: flex;
flex-direction: column;
.woocommerce-profiler-business-location__content {
width: 100%;
display: flex;
align-self: center;
& > div {
width: 100%;
}
.woocommerce-profiler-heading {
max-width: 570px;
}
.components-base-control__field {
height: 40px;
}
.woocommerce-select-control__control-icon {
display: none;
}
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
.woocommerce-select-control__control.is-active {
.components-base-control__label {
display: none;
}
}
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
.woocommerce-select-control.is-searchable
.woocommerce-select-control__control-input {
margin: 0;
padding: 0;
}
.woocommerce-select-control.is-searchable
.components-base-control__label {
left: 13px;
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
}
}
}
// Loader page
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
.woocommerce-profiler-loader {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
@include breakpoint( '<782px' ) {
padding: 0 20px;
}
.loader-hearticon {
position: relative;
top: 2px;
left: 2px;
}
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
h1 {
padding: 0;
margin: 58px 0 0 0;
font-size: 28px;
font-weight: 500;
@include breakpoint( '<782px' ) {
font-size: 20px;
}
}
.woocommerce-profiler-loader-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 520px;
}
.woocommerce-profiler-progress-bar {
width: 520px;
margin: 16px 0 16px 0;
@include breakpoint( '<782px' ) {
width: 100%;
}
}
.woocommerce-profiler-progress-bar__container {
height: 4px;
}
.woocommerce-profiler-loader__paragraph {
font-size: 16px;
line-height: 24px;
color: #2f2f2f;
opacity: 0.8;
text-align: center;
@include breakpoint( '<782px' ) {
font-size: 14px;
line-height: 20px;
}
}
}
// User profile page
.woocommerce-profiler-user-profile {
.woocommerce-profiler-user-profile__content {
min-height: 630px;
&.is-platform-selector-open {
padding-bottom: 145px;
}
}
.woocommerce-experimental-select-control .components-popover .components-popover__content ul li:hover {
background-color: #f6f7f7 !important; // Gray-0
color: $gray-900;
}
.woocommerce-user-profile-choices {
margin-bottom: 32px;
max-width: 404px;
width: 100%;
}
.woocommerce-user-profile-choices fieldset {
display: flex;
gap: 18px;
flex-direction: column;
}
.woocommerce-profiler-choice-sub-options {
.woocommerce-profiler-question-label {
text-transform: uppercase;
color: $gray-900;
font-weight: 500;
font-size: 11px;
line-height: 16px;
margin: 0 0 8px;
}
}
.woocommerce-profiler-selling-platform {
margin-top: 20px;
}
}
.woocommerce-profiler-plugins {
display: flex;
flex-direction: column;
.woocommerce-profiler-plugins__content {
display: flex;
align-items: center;
align-self: center;
max-width: 1000px;
width: 100%;
}
.woocommerce-profiler-heading {
max-width: 615px;
margin: 58px 0 0 0;
}
Additional changes for the core profiler plugins page (#38616) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Fix type * Add changelog * Add changelog * Add install_priority -- this will be used in the core profiler * Sort selected plugins by install_priority for installation * Remove unused imports * dev: refactor installAndActivatePlugins to xstate * ts fixes * Sort plugins by install_priority * Make sure WooCommerce Shipping is always visible * Update free extension list content * Updated WC payment description * Updated logo images * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Fix gray-900 variable name * Hide learn more link on mobile view * Add back learn more link that was removed from rebase * Send pluginsAvailable to pluginInstallermachine * Use is_activated to determine plugin availability and install status * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Add back recordTracksPluginsLearnMoreLinkClicked * Use install-and-activate-plugins-async when timer is up * Record plugin and link with learn more linked clicked event * Fix failign tests * Add comment for install_priority --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-13 22:03:03 +00:00
.woocommerce-profiler-heading__title {
color: $gray-900;
padding: 0;
}
.woocommerce-profiler-heading__subtitle {
Additional changes for the core profiler plugins page (#38616) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Fix type * Add changelog * Add changelog * Add install_priority -- this will be used in the core profiler * Sort selected plugins by install_priority for installation * Remove unused imports * dev: refactor installAndActivatePlugins to xstate * ts fixes * Sort plugins by install_priority * Make sure WooCommerce Shipping is always visible * Update free extension list content * Updated WC payment description * Updated logo images * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Fix gray-900 variable name * Hide learn more link on mobile view * Add back learn more link that was removed from rebase * Send pluginsAvailable to pluginInstallermachine * Use is_activated to determine plugin availability and install status * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Add back recordTracksPluginsLearnMoreLinkClicked * Use install-and-activate-plugins-async when timer is up * Record plugin and link with learn more linked clicked event * Fix failign tests * Add comment for install_priority --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-13 22:03:03 +00:00
margin: 12px 0 48px 0 !important;
@include breakpoint( '<782px' ) {
margin-top: 12px !important;
}
}
.woocommerce-profiler-plugins__list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
flex: 50%;
}
.woocommerce-profiler-plugins-continue-button {
width: 200px;
height: 48px;
margin-top: 28px;
text-align: center;
display: block;
Additional changes for the core profiler plugins page (#38616) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Fix type * Add changelog * Add changelog * Add install_priority -- this will be used in the core profiler * Sort selected plugins by install_priority for installation * Remove unused imports * dev: refactor installAndActivatePlugins to xstate * ts fixes * Sort plugins by install_priority * Make sure WooCommerce Shipping is always visible * Update free extension list content * Updated WC payment description * Updated logo images * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Fix gray-900 variable name * Hide learn more link on mobile view * Add back learn more link that was removed from rebase * Send pluginsAvailable to pluginInstallermachine * Use is_activated to determine plugin availability and install status * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Add back recordTracksPluginsLearnMoreLinkClicked * Use install-and-activate-plugins-async when timer is up * Record plugin and link with learn more linked clicked event * Fix failign tests * Add comment for install_priority --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-13 22:03:03 +00:00
font-size: 14px;
font-weight: normal;
}
.plugin-error {
width: 100%;
border-left: 4px solid #cc1818;
background-color: #fce2e4;
padding: 12px;
margin: 0 0 28px 0;
color: #1e1e1e;
button {
text-decoration: none;
}
span {
font-weight: bold;
}
}
.woocommerce-profiler-plugins-jetpack-agreement {
color: $gray-700;
font-size: 12px;
a {
color: inherit;
}
}
.woocommerce-profiler-plugins-continue-button-container {
@include breakpoint( '<782px' ) {
width: 100%;
}
.woocommerce-profiler-plugins-continue-button {
@include breakpoint( '<782px' ) {
width: 100%;
}
}
}
}
// Business Info Page
.woocommerce-profiler-business-information {
display: flex;
flex-direction: column;
.woocommerce-profiler-business-information__content {
max-width: 615px;
width: 100%;
display: flex;
align-self: center;
& > div {
width: 100%;
}
.woocommerce-profiler-business-information-form {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
max-width: 404px;
width: 100%;
}
.woocommerce-profiler-question-label,
.woocommerce-profiler-business-info-store-name
.components-base-control__label {
text-transform: uppercase;
color: $gray-900;
font-weight: 500;
font-size: 11px;
line-height: 16px;
margin: 0 0 8px;
}
.woocommerce-profiler-question-label
.woocommerce-profiler-question-required {
color: #cc1818;
padding-left: 3px;
}
.woocommerce-profiler-business-info-store-name
.components-text-control__input {
height: 40px;
border-color: #bbb;
border-radius: 2px;
border-width: 1px;
font-size: 13px;
&:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #006088);
}
}
.woocommerce-profiler-select-control__industry {
margin-bottom: 20px;
}
.woocommerce-profiler-question-subtext {
color: $gray-700;
font-size: 12px;
line-height: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: 20px;
}
.woocommerce-profiler-select-control__country {
max-width: 404px;
margin: 0;
}
.woocommerce-profiler-select-control__country-spacer {
margin: auto auto 12px auto;
}
.woocommerce-profiler-button-container {
margin-top: 32px;
}
.woocommerce-select-control__control-icon {
display: none;
}
.woocommerce-select-control__control.is-active {
.components-base-control__label {
display: none;
}
}
.woocommerce-select-control.is-searchable
.woocommerce-select-control__control-input {
margin: 0;
padding: 0;
}
.woocommerce-select-control.is-searchable
.components-base-control__label {
left: 13px;
}
.woocommerce-profiler-geolocation-notice {
margin: 0;
margin-bottom: 0;
padding-right: 0;
color: $gray-900;
@include breakpoint( '<782px' ) {
margin-bottom: 100px;
}
.components-notice__dismiss > svg {
height: 16px;
fill: #000;
}
.components-notice__dismiss {
height: 16px;
margin-right: 8px;
}
p {
font-weight: 400;
font-size: 13px;
line-height: 20px;
margin: 0;
.geolocation-notice-geolocated-country {
text-decoration: none;
}
}
.woocommerce-profiler-geolocation-notice__list {
list-style-type: unset;
padding-left: 20px;
font-weight: 500;
line-height: 20px;
}
}
}
}
@media screen and (max-height: 667px) {
.woocommerce-profiler-user-profile__content {
.woocommerce-profiler-button-container {
position: inherit;
padding: 0;
}
}
}
// Override WP Core style where it applies padding-top: 46px
// This style fixes devices with width between 601px and 782px (iPad and iPad Mini)
@media screen and (min-width: 601px) and (max-width: 782px) {
html.wp-toolbar {
padding-top: 32px !important;
}
}