diff --git a/services/web/app/src/Features/User/UserEmailsController.js b/services/web/app/src/Features/User/UserEmailsController.js index e3c8e7e0b1..a119fb0012 100644 --- a/services/web/app/src/Features/User/UserEmailsController.js +++ b/services/web/app/src/Features/User/UserEmailsController.js @@ -421,6 +421,10 @@ async function confirmSecondaryEmailPage(req, res) { return res.redirect(redirectURL) } + // Populates splitTestVariants with a value for the split test name and allows + // Pug to read it + await SplitTestHandler.promises.getAssignment(req, res, 'misc-b2c-pages-bs5') + AnalyticsManager.recordEventForUserInBackground( userId, 'confirm-secondary-email-page-displayed' diff --git a/services/web/app/views/user/confirmSecondaryEmail.pug b/services/web/app/views/user/confirmSecondaryEmail.pug index 4d0c59e9db..f6242c4180 100644 --- a/services/web/app/views/user/confirmSecondaryEmail.pug +++ b/services/web/app/views/user/confirmSecondaryEmail.pug @@ -3,6 +3,8 @@ extends ../layout-marketing block vars - var suppressNavbar = true - var suppressSkipToContent = true + - bootstrap5PageStatus = 'enabled' + - bootstrap5PageSplitTest = 'misc-b2c-pages-bs5' block entrypointVar - entrypoint = 'pages/user/confirm-secondary-email' diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index 1e155bd965..6afe2c2d8b 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -44,5 +44,6 @@ @import 'login'; @import 'register'; @import 'onboarding-confirm-email'; +@import 'secondary-confirm-email'; @import 'admin/admin'; @import 'admin/project-url-lookup'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/secondary-confirm-email.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/secondary-confirm-email.scss new file mode 100644 index 0000000000..e6350945fe --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/secondary-confirm-email.scss @@ -0,0 +1,27 @@ +#confirm-secondary-email { + .confirm-email-form .confirm-email-form-inner { + margin: auto; + max-width: 480px; + + .notification { + margin-bottom: var(--spacing-05); + } + + .text-danger { + display: flex; + gap: var(--spacing-03); + padding: var(--spacing-02); + } + + .form-label { + font-weight: normal; + } + + .form-actions { + margin-top: var(--spacing-07); + display: flex; + flex-direction: column; + gap: var(--spacing-05); + } + } +}