diff --git a/client/overview/modal/progressive-onboarding-eligibility/style.scss b/client/overview/modal/progressive-onboarding-eligibility/style.scss index 1863d804d91..a907d13f92c 100644 --- a/client/overview/modal/progressive-onboarding-eligibility/style.scss +++ b/client/overview/modal/progressive-onboarding-eligibility/style.scss @@ -2,27 +2,33 @@ &.components-modal__frame { border-radius: 2px !important; overflow: visible; + + @media screen and ( max-width: $break-small ) { + height: fit-content; + margin: auto auto; + max-width: 90vw; + } } .components-modal__content { box-sizing: border-box; - max-width: 700px; - margin: 0; + max-width: 516px; + margin: 72px 0 0; padding: $gap-larger; display: flex; flex-direction: column; - align-items: center; + padding: $gap $gap-larger $gap-larger $gap-larger; + flex: 1; + overflow: auto; } .components-modal__header { - height: 0; + .components-modal__header-heading { + font-weight: 300; + text-wrap: auto; + } .components-button { - position: absolute; - left: initial; - top: $gap-smaller; - right: $gap-smaller; - svg { width: 32px; height: 32px; @@ -31,50 +37,72 @@ } &__heading { - font-size: 40px; + font-size: 20px; font-weight: 400; - line-height: 60px; + line-height: 28px; margin-bottom: $gap-smallest; } &__subheading { @include wc-body-large; - text-align: center; - font-weight: normal; - color: $gray-60; - max-width: 480px; + font-weight: 400; + color: $gray-700; + font-size: 13px; + line-height: 20px; margin: 0 0 $gap-large 0; + text-wrap: wrap !important; } &__benefits { - display: grid; - grid-template-columns: repeat( 3, 1fr ); - column-gap: $gap-largest; - padding: 0 $gap; - fill: $studio-woocommerce-purple-50; - font-size: 14px; + fill: $gray-900; + font-size: 13px; line-height: 20px; - color: $gray-60; + color: $gray-700; + + > div { + display: grid; + grid-template-columns: auto 1fr; + gap: $gap; + color: $gray-700; + font-weight: 400; + font-size: 13px; + line-height: 20px; + } + + > div:not( :last-child ) { + margin-bottom: $gap; + } svg { display: block; - margin: $gap-smaller auto; + margin: $gap-smallest 0; + color: $gray-900; } &__subtitle { @include wp-subtitle; - margin: $gap-large 0 $gap-smallest; + margin: $gap-smallest 0; + font-weight: 600; + color: $gray-900; + line-height: 20px; + font-size: 13px; } @media screen and ( max-width: $break-small ) { grid-template-columns: 1fr; row-gap: $gap-large; + + svg { + width: 24px; + height: 24px; + } } } &__footer { - text-align: center; - margin: $gap-large 0; + text-align: right; + margin: $gap-large 0 0 0; + width: 100%; & :first-child { margin-right: $gap; @@ -87,6 +115,11 @@ line-height: 20px; height: 40px; } + + @media screen and ( max-width: $break-small ) { + text-wrap: nowrap; + text-align: center; + } } &__confetti {