diff --git a/assets/css/admin.css b/assets/css/admin.css index 164d4e5b6..30fab533c 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -424,7 +424,7 @@ button.prpl-info-icon { label { display: grid; - grid-template-columns: 1fr 3fr; + grid-template-columns: 2fr 8fr; margin-bottom: 0.5em; gap: var(--prpl-padding); } @@ -467,9 +467,15 @@ button.prpl-info-icon { margin-inline-start: 0.25em; vertical-align: middle; - svg { - width: 1em; - height: 1em; + label { + display: grid; + grid-template-columns: 2fr 8fr; + margin-bottom: 0.5em; + gap: var(--prpl-padding); + } + + .prpl-onboard-form-radio-select { + margin-bottom: 1em; } } diff --git a/assets/js/onboard.js b/assets/js/onboard.js index 1d3306606..18c4121d5 100644 --- a/assets/js/onboard.js +++ b/assets/js/onboard.js @@ -103,6 +103,22 @@ if ( document.getElementById( 'prpl-onboarding-form' ) ) { .forEach( ( inputField ) => { inputField.required = false; } ); + + // Hide the form fields and the primary button. + document + .getElementById( 'prpl-onboarding-form' ) + .querySelectorAll( + '.prpl-form-fields, .prpl-button-primary' + ) + .forEach( ( el ) => el.classList.add( 'prpl-hidden' ) ); + + // Show the secondary button. + document + .getElementById( 'prpl-onboarding-form' ) + .querySelectorAll( '.prpl-button-secondary--no-email' ) + .forEach( ( el ) => + el.classList.remove( 'prpl-hidden' ) + ); } else { document .getElementById( 'prpl-onboarding-form' ) @@ -115,13 +131,23 @@ if ( document.getElementById( 'prpl-onboarding-form' ) ) { inputField.required = true; } } ); + + // Show the form fields and the primary button. + document + .getElementById( 'prpl-onboarding-form' ) + .querySelectorAll( + '.prpl-form-fields, .prpl-button-primary' + ) + .forEach( ( el ) => + el.classList.remove( 'prpl-hidden' ) + ); + + // Hide the secondary button. + document + .getElementById( 'prpl-onboarding-form' ) + .querySelectorAll( '.prpl-button-secondary--no-email' ) + .forEach( ( el ) => el.classList.add( 'prpl-hidden' ) ); } - document - .getElementById( 'prpl-onboarding-form' ) - .querySelectorAll( - '.prpl-form-fields, .prpl-form-fields, .prpl-button-primary, .prpl-button-secondary--no-email' - ) - .forEach( ( el ) => el.classList.toggle( 'prpl-hidden' ) ); } ); } ); diff --git a/views/popovers/subscribe-form.php b/views/popovers/subscribe-form.php index 1cd1228f2..90266d031 100644 --- a/views/popovers/subscribe-form.php +++ b/views/popovers/subscribe-form.php @@ -26,45 +26,68 @@ ?>