Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WooCommerce Install: Update styles #60229

Merged
merged 2 commits into from
Jan 20, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 1 addition & 19 deletions client/signup/steps/woocommerce-install/confirm/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { isEnabled } from '@automattic/calypso-config';
import { NextButton } from '@automattic/onboarding';
import styled from '@emotion/styled';
import { useI18n } from '@wordpress/react-i18n';
import page from 'page';
Expand All @@ -13,22 +12,12 @@ import WarningCard from 'calypso/components/warning-card';
import StepWrapper from 'calypso/signup/step-wrapper';
import { submitSignupStep } from 'calypso/state/signup/progress/actions';
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
import { ActionSection, StyledNextButton } from '..';
import SupportCard from '../components/support-card';
import useWooCommerceOnPlansEligibility from '../hooks/use-woop-handling';
import type { WooCommerceInstallProps } from '../';
import './style.scss';

export const ActionSection = styled.div`
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;

@media ( max-width: 320px ) {
align-items: center;
}
`;

const Divider = styled.hr`
border-top: 1px solid #eee;
background: none;
Expand All @@ -39,13 +28,6 @@ const WarningsOrHoldsSection = styled.div`
margin-bottom: 40px;
`;

export const StyledNextButton = styled( NextButton )`
@media ( max-width: 320px ) {
width: 100%;
margin-bottom: 20px;
}
`;

export default function Confirm( props: WooCommerceInstallProps ): ReactElement | null {
const { goToNextStep, isReskinned } = props;
const { __ } = useI18n();
Expand Down
98 changes: 3 additions & 95 deletions client/signup/steps/woocommerce-install/confirm/style.scss
Original file line number Diff line number Diff line change
@@ -1,99 +1,7 @@
@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '../style';

body.is-section-signup .is-woocommerce-install {
.signup__step.is-business-info, // @todo: tidy all steps styles
.signup__step.is-store-address, // @todo: tidy all steps styles
.signup__step.is-confirm {
min-height: 95vh;
display: flex;
align-items: center;

@media ( max-width: 660px ) {
min-height: 0;
}
// Two columns layout
.step-wrapper {
display: flex;

.step-wrapper__header {
@media ( min-width: 660px ) {
margin-top: 0 !important;
}

.formatted-header {
text-align: inherit;
@media ( min-width: 1024px ) {
margin-left: 24px;
}

.formatted-header__title {
text-align: inherit;
@media ( max-width: 660px ) {
padding: 0 10px 0 0;

}

}

.formatted-header__subtitle {
@media ( max-width: 660px ) {
margin-top: 8px;
padding: 0 10px 0 0;
}

margin-top: 20px;
text-align: inherit;
max-width: 448px;
}
}
}
}

.is-wide-layout {
max-width: 1024px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: flex-start;
justify-content: center;
column-gap: 2%;

@media ( max-width: 660px ) {
max-width: 90vw;
grid-template-columns: 1fr;
}
}

.step-wrapper__content {
display: flex;
margin: 0 24px;

.step-business-info__instructions-container, // @todo: tidy all steps styles
.step-store-address__instructions-container, // @todo: tidy all steps styles
.confirm__instructions-container {
font-size: 0.875rem;
letter-spacing: -0.16px;
color: var( --studio-gray-60 );
line-height: 2rem;
flex-direction: column;
max-width: 520px;
min-width: 380px;

@media ( max-width: 660px ) {
max-width: 90vw;
}

p {
margin-top: 16px;
}

.components-text-control__input {
box-sizing: border-box;
}
}
}
}
body.is-section-signup .is-woocommerce-install .signup__step.is-confirm {
@include woocommerce-install-two-column-layout;
}

.confirm__info-section {
Expand Down
21 changes: 21 additions & 0 deletions client/signup/steps/woocommerce-install/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { NextButton } from '@automattic/onboarding';
import styled from '@emotion/styled';
import type { GoToStep, GoToNextStep } from '../../types';

export interface WooCommerceInstallProps {
Expand All @@ -17,3 +19,22 @@ export interface WooCommerceInstallProps {
siteConfirmed?: number;
};
}

export const ActionSection = styled.div`
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-top: 40px;

@media ( max-width: 320px ) {
align-items: center;
}
`;

export const StyledNextButton = styled( NextButton )`
@media ( max-width: 320px ) {
width: 100%;
margin-bottom: 20px;
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import StepWrapper from 'calypso/signup/step-wrapper';
import { submitSignupStep } from 'calypso/state/signup/progress/actions';
import { getSiteDomain } from 'calypso/state/sites/selectors';
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
import { ActionSection, StyledNextButton } from '..';
import SupportCard from '../components/support-card';
import { ActionSection, StyledNextButton } from '../confirm';
import { useSiteSettings, WOOCOMMERCE_ONBOARDING_PROFILE } from '../hooks/use-site-settings';
import type { WooCommerceInstallProps } from '..';
import './style.scss';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '../style';

body.is-section-signup .is-woocommerce-install .signup__step.is-business-info {
@include woocommerce-install-two-column-layout;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import { fetchWooCommerceCountries } from 'calypso/state/countries/actions';
import getCountries from 'calypso/state/selectors/get-countries';
import { submitSignupStep } from 'calypso/state/signup/progress/actions';
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
import { ActionSection, StyledNextButton } from '..';
import SupportCard from '../components/support-card';
import { ActionSection, StyledNextButton } from '../confirm';
import {
useSiteSettings,
WOOCOMMERCE_STORE_ADDRESS_1,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '../style';

body.is-section-signup .is-woocommerce-install .signup__step.is-store-address {
@include woocommerce-install-two-column-layout;
}

.step-store-address__instructions-container {
.components-combobox-control__suggestions-container {
// Remove `width: 100%;` https://github.com/WordPress/gutenberg/blob/0135921bcb72ceec629fa8f9e755891afab747b9/packages/components/src/combobox-control/style.scss#L32
width: unset;

// Remove margin from component to match text controls
// Remove margin from component to match text controls.
margin-bottom: unset;
}

.components-form-token-field__suggestions-list {
margin: 4px -16px -12px;
width: min-content;
}

.components-combobox-control__reset.components-button {
// Height of 22 ensures combobox input matches height of text controls
height: 22px;
// Height of 18 ensures combobox input matches height of text controls.
height: 18px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably still want to go ahead with this change here but FYI a fix might come from upstream at some point WordPress/gutenberg#38020

}

.form-input-validation.is-error {
Expand All @@ -41,7 +44,7 @@
}

.components-base-control__field {
// Remove margin-bottom on error so errors are positioned closer to the corresponding field
// Remove margin-bottom on error so errors are positioned closer to the corresponding field.
margin-bottom: unset;
}
}
Expand Down
125 changes: 125 additions & 0 deletions client/signup/steps/woocommerce-install/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

@mixin woocommerce-install-two-column-layout {
min-height: 95vh;
display: flex;
align-items: center;

@media ( max-width: 660px ) {
min-height: 0;
}

// Two column layout.
.step-wrapper {
display: flex;

.step-wrapper__header {
@media ( min-width: 660px ) {
margin-top: 0 !important;
}

.formatted-header {
text-align: inherit;
@media ( min-width: 1024px ) {
margin-left: 24px;
}

.formatted-header__title {
text-align: inherit;
@media ( max-width: 660px ) {
padding: 0 10px 0 0;

}

}

.formatted-header__subtitle {
@media ( max-width: 660px ) {
margin-top: 8px;
padding: 0 10px 0 0;
}

margin-top: 20px;
text-align: inherit;
max-width: 448px;
}
}
}
}

.is-wide-layout {
max-width: 1024px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: flex-start;
justify-content: center;
column-gap: 2%;

@media ( max-width: 660px ) {
max-width: 90vw;
grid-template-columns: 1fr;
}
}

.step-wrapper__content {
display: flex;
margin: 0 24px;

.step-business-info__instructions-container,
.step-store-address__instructions-container,
.confirm__instructions-container {
font-size: 0.875rem;
letter-spacing: -0.16px;
color: var( --studio-gray-60 );
flex-direction: column;
max-width: 520px;
min-width: 380px;

@media ( max-width: 660px ) {
max-width: 90vw;
}

p {
margin-top: 16px;
}

.components-base-control {
font-size: $default-font-size;
line-height: $default-line-height;
margin-bottom: $grid-unit-30;

.components-base-control__label,
.components-input-control__label {
font-size: $editor-font-size;
margin-bottom: $grid-unit;
padding: 0;
}

.components-combobox-control__suggestions-container,
.components-select-control__input,
.components-text-control__input {
line-height: 18px;
padding: $grid-unit-15 $grid-unit-20;
}

.components-select-control__input {
box-sizing: initial;
height: auto;
line-height: 20px;
min-height: auto;
}

.components-combobox-control__input {
padding: 0;
}
}

.components-text-control__input {
box-sizing: border-box;
}
}
}
}