Migrate onboarding/bonus/beta program templates to Bootstrap 5 (#26344)

* Migrate the Try Premium for free page to Bootstrap 5

* Migrate the Overleaf Beta Program page to Bootstrap 5

* Fix buttons alignment on smaller screen size

* Migrate the Overleaf Bonus Program page to Bootstrap 5

GitOrigin-RevId: 811db783af6a86ab472aae95e075bfa301786a31

services/web/app/views/_mixins/back_to_btns.pug

@@ -1,4 +1,4 @@
 mixin back-to-btns(settingsAnchor)
-	.d-flex.gap-3
+	.d-flex.flex-column.flex-sm-row.gap-3
 		a.btn.btn-secondary(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')}
 		a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')}

services/web/app/views/beta_program/opt_in.pug

@@ -1,75 +1,76 @@
 extends ../layout-marketing
 include ../_mixins/back_to_btns
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	main.content.content-alt#main-content
 		.container.beta-opt-in-wrapper
 			.row
-				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+				.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
 					.card
-						.page-header
-							h1 
-								| #{translate("sharelatex_beta_program")}
-						.beta-opt-in
-							.container-fluid
-								.row
-									.col-md-12
-										if user.betaProgram
-											p.text-center
-												strong #{translate("beta_program_already_participating")}.
-											p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}.
-										else
-											p.text-center
-												strong #{translate("beta_program_not_participating")}.
-											p !{translate("beta_program_benefits", {}, ['strong'])}
+						.card-body
+							.page-header
+								h1 
+									| #{translate("sharelatex_beta_program")}
+							.beta-opt-in
+								.container-fluid
+									.row
+										.col-lg-12
+											if user.betaProgram
+												p.text-center
+													strong #{translate("beta_program_already_participating")}.
+												p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}.
+											else
+												p.text-center
+													strong #{translate("beta_program_not_participating")}.
+												p !{translate("beta_program_benefits", {}, ['strong'])}
 
-										p #[strong How it works:]
-										ul
-											li #{translate("beta_program_badge_description")} #[span(aria-label=translate("beta_feature_badge") role="img").beta-badge]
-											li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}.
-											li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}.
-											li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}.
-										p !{translate("note_features_under_development", {}, ['strong'])}.
+											p #[strong How it works:]
+											ul
+												li
+													| #{translate("beta_program_badge_description")} 
+													span.badge.bg-warning-light-bg.text-warning(aria-label=translate("beta_feature_badge"))
+														span.badge-content β
+												li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}.
+												li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}.
+												li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}.
+											p !{translate("note_features_under_development", {}, ['strong'])}.
 
-								.row.text-center
-									.col-md-12
-										if user.betaProgram
-											form(
-												data-ol-regular-form
-												method="post"
-												action="/beta/opt-out"
-												novalidate
-											)
-												input(type="hidden", name="_csrf", value=csrfToken)
-												.form-group
-													a(
-														href="https://forms.gle/CFEsmvZQTAwHCd3X9"
-														target="_blank"
-														rel="noopener noreferrer"
-													).btn.btn-primary.btn-lg #{translate("give_feedback")}
-												.form-group
-													button.btn.btn-secondary-info.btn-secondary.btn-sm(
-														type="submit"
-														data-ol-disabled-inflight
-													)
-														span(data-ol-inflight="idle") #{translate("beta_program_opt_out_action")}
-														span(hidden data-ol-inflight="pending") #{translate("processing")}…
-										else
-											form(
-												data-ol-regular-form
-												method="post",
-												action="/beta/opt-in"
-											)
-												input(type="hidden", name="_csrf", value=csrfToken)
-												.form-group
-													button.btn.btn-primary(
-														type="submit"
-														data-ol-disabled-inflight
-													)
-														span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")}
-														span(hidden data-ol-inflight="pending") #{translate("joining")}…
-							.page-separator
-							+back-to-btns()
+									.row.text-center
+										.col-lg-12
+											if user.betaProgram
+												form(
+													data-ol-regular-form
+													method="post"
+													action="/beta/opt-out"
+													novalidate
+												)
+													input(type="hidden", name="_csrf", value=csrfToken)
+													.form-group
+														a(
+															href="https://forms.gle/CFEsmvZQTAwHCd3X9"
+															target="_blank"
+															rel="noopener noreferrer"
+														).btn.btn-primary.btn-lg #{translate("give_feedback")}
+													.form-group
+														button.btn.btn-secondary-info.btn-secondary.btn-sm(
+															type="submit"
+															data-ol-disabled-inflight
+														)
+															span(data-ol-inflight="idle") #{translate("beta_program_opt_out_action")}
+															span(hidden data-ol-inflight="pending") #{translate("processing")}…
+											else
+												form(
+													data-ol-regular-form
+													method="post",
+													action="/beta/opt-in"
+												)
+													input(type="hidden", name="_csrf", value=csrfToken)
+													.form-group
+														button.btn.btn-primary(
+															type="submit"
+															data-ol-disabled-inflight
+														)
+															span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")}
+															span(hidden data-ol-inflight="pending") #{translate("joining")}…
+								.page-separator
+								+back-to-btns()

services/web/app/views/referal/bonus.pug

@@ -1,49 +1,47 @@
 extends ../layout-marketing
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	.content.content-alt#main-content
-		.container.bonus
+		.container#bonus
 			.row
-				.col-md-8.col-md-offset-2
+				.col-lg-8.offset-lg-2
 					.card
-						.container-fluid
-							.row
-								.col-md-10.col-md-offset-1
-									if (refered_user_count > 0)
-										p.thanks The Overleaf Bonus Program has been discontinued, but you'll continue to have access to the features you already earned.
-									else
-										p.thanks The Overleaf Bonus Program has been discontinued.
-									p.thanks Please <a href="/contact">contact us</a> if you have any questions.
-									
-							if (refered_user_count > 0)
-								.row.ab-bonus
-									.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 30px; margin-top: 20px;")
-										- for (var i = 0; i <= 10; i++) {
-											if (refered_user_count == i)
-												.number(style="left: "+i+"0%").active #{i}
-											else
-												.number(style="left: "+i+"0%") #{i}
-										- }
-	
-								.row.ab-bonus
-									.col-md-10.col-md-offset-1.bonus-banner
-										.progress
-											.progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%")
-	
-								.row.ab-bonus
-									.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 110px;")
-										.perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")}
-										.perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")}
-										.perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")}
-										.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")}
-								.row &nbsp;
-	
-								.row.ab-bonus
-									.col-md-10.col-md-offset-1.bonus-banner.bonus-status
-										if (refered_user_count == 1)
-											p.thanks You’ve introduced <strong>1</strong> person to #{settings.appName}.
+						.card-body
+							.container-fluid
+								.row
+									.col-lg-10.offset-lg-1
+										if (refered_user_count > 0)
+											p.thanks The Overleaf Bonus Program has been discontinued, but you'll continue to have access to the features you already earned.
 										else
-											p.thanks You’ve introduced <strong>#{refered_user_count}</strong> people to #{settings.appName}.
+											p.thanks The Overleaf Bonus Program has been discontinued.
+										p.thanks Please <a href="/contact">contact us</a> if you have any questions.
+										
+								if (refered_user_count > 0)
+									.row.ab-bonus
+										.col-lg-10.offset-lg-1(style="position: relative; height: 30px; margin-top: 20px;")
+											- for (var i = 0; i <= 10; i++) {
+												if (refered_user_count == i)
+													.number(style="left: "+i+"0%").active #{i}
+												else
+													.number(style="left: "+i+"0%") #{i}
+											- }
+		
+									.row.ab-bonus
+										.col-lg-10.offset-lg-1
+											.progress
+												.progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%")
+		
+									.row.ab-bonus
+										.col-lg-10.offset-lg-1(style="position: relative; height: 110px;")
+											.perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")}
+											.perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")}
+											.perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")}
+											.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")}
+									.row &nbsp;
+
+									.row.ab-bonus
+										.col-lg-10.offset-lg-1.bonus-status
+											if (refered_user_count == 1)
+												p.thanks You’ve introduced <strong>1</strong> person to #{settings.appName}.
+											else
+												p.thanks You’ve introduced <strong>#{refered_user_count}</strong> people to #{settings.appName}.

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -53,3 +53,5 @@
 @import 'admin/admin';
 @import 'admin/project-url-lookup';
 @import 'add-secondary-email-prompt';
+@import 'try-premium';
+@import 'bonus';

services/web/frontend/stylesheets/bootstrap-5/pages/bonus.scss

@@ -0,0 +1,62 @@
+#bonus {
+  margin-top: var(--spacing-06);
+
+  p.thanks {
+    margin-top: var(--spacing-04);
+    text-align: center;
+  }
+
+  .number {
+    position: absolute;
+    margin-left: -13px;
+    width: 26px;
+    padding: var(--spacing-01) 0;
+    text-align: center;
+    background-color: #ddd;
+
+    &.active {
+      background-color: var(--bg-info-01);
+      color: var(--content-primary-dark);
+    }
+
+    border-radius: 3px;
+  }
+
+  .progress {
+    margin-top: var(--spacing-05);
+    margin-left: calc(var(--spacing-06) * -1);
+    margin-right: calc(var(--spacing-06) * -1);
+    height: 30px;
+  }
+
+  .perk {
+    position: absolute;
+    background-color: var(--bg-light-tertiary);
+    border-radius: var(--border-radius-base);
+    text-align: center;
+    padding: var(--spacing-02);
+    min-width: min-content;
+    width: 110px;
+    margin-left: calc(var(--spacing-11) * -1);
+    font-size: 14px;
+
+    &::before {
+      border-bottom: var(--spacing-04) solid var(--bg-light-tertiary);
+      border-left: var(--spacing-04) solid transparent;
+      border-right: var(--spacing-04) solid transparent;
+      content: '';
+      position: absolute;
+      left: var(--spacing-10);
+      top: calc(var(--spacing-04) * -1);
+    }
+
+    &.active {
+      color: white;
+      background-color: var(--bg-info-01);
+
+      &::before {
+        border-bottom: var(--spacing-04) solid var(--border-active);
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/pages/try-premium.scss

@@ -0,0 +1,42 @@
+.try-premium-page {
+  .try-premium-logo-container {
+    padding: 0 var(--spacing-08);
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .try-premium-third-party-logo {
+    width: 36px;
+    height: 36px;
+  }
+
+  .try-premium-page-list-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: var(--spacing-06);
+  }
+
+  .try-premium-page-list {
+    padding-inline-start: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    @include media-breakpoint-up(sm) {
+      flex-direction: row;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 500px;
+    }
+
+    ul {
+      margin-bottom: 0;
+      width: 300px;
+
+      @include media-breakpoint-up(sm) {
+        width: unset;
+      }
+    }
+  }
+}