[web] migrate token access page to bs5 (#23474)

GitOrigin-RevId: 2a6c148aa52bfa109ba8a072ff7fb6dbd559ebb3

services/web/app/src/Features/TokenAccess/TokenAccessController.mjs

@@ -20,6 +20,7 @@ import { getSafeAdminDomainRedirect } from '../Helpers/UrlHelper.js'
 import UserGetter from '../User/UserGetter.js'
 import Settings from '@overleaf/settings'
 import LimitationsManager from '../Subscription/LimitationsManager.js'
+import SplitTestHandler from '../SplitTests/SplitTestHandler.js'
 
 const orderedPrivilegeLevels = [
   PrivilegeLevels.NONE,
@@ -111,6 +112,13 @@ async function tokenAccessPage(req, res, next) {
       }
     }
 
+    // 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'
+    )
     res.render('project/token/access-react', {
       postUrl: makePostUrl(token),
     })

services/web/app/views/project/token/access-react.pug

@@ -7,6 +7,8 @@ block vars
 	- var suppressFooter = true
 	- var suppressCookieBanner = true
 	- var suppressSkipToContent = true
+	- bootstrap5PageStatus = 'enabled'
+	- bootstrap5PageSplitTest = 'misc-b2c-pages-bs5'
 		
 block append meta
 	meta(name="ol-postUrl" data-type="string" content=postUrl)

services/web/frontend/js/features/token-access/components/require-accept-screen.tsx

@@ -18,45 +18,47 @@ export const RequireAcceptScreen: FC<{
       <div className="row">
         <div className="col-md-12">
           <div className="card">
-            <div className="text-centered link-sharing-invite">
-              <div className="link-sharing-invite-header">
-                <p>
-                  {t('youre_joining')}
-                  <br />
-                  <em>
-                    <strong>
-                      {requireAcceptData.projectName || 'This project'}
-                    </strong>
-                  </em>
-                  {user && (
-                    <>
-                      <br />
-                      {t('as_email', { email: user.email })}
-                    </>
-                  )}
-                </p>
+            <div className="card-body">
+              <div className="text-center link-sharing-invite">
+                <div className="link-sharing-invite-header">
+                  <p>
+                    {t('youre_joining')}
+                    <br />
+                    <em>
+                      <strong>
+                        {requireAcceptData.projectName || 'This project'}
+                      </strong>
+                    </em>
+                    {user && (
+                      <>
+                        <br />
+                        {t('as_email', { email: user.email })}
+                      </>
+                    )}
+                  </p>
+                </div>
               </div>
-            </div>
 
-            <div className="row row-spaced text-center">
-              <div className="col-md-12">
-                <p>
-                  {t(
-                    'your_name_and_email_address_will_be_visible_to_the_project_owner_and_other_editors'
-                  )}
-                </p>
+              <div className="row row-spaced text-center">
+                <div className="col-md-12">
+                  <p>
+                    {t(
+                      'your_name_and_email_address_will_be_visible_to_the_project_owner_and_other_editors'
+                    )}
+                  </p>
+                </div>
               </div>
-            </div>
 
-            <div className="row row-spaced text-center">
-              <div className="col-md-12">
-                <button
-                  className="btn btn-lg btn-primary"
-                  type="submit"
-                  onClick={() => sendPostRequest(true)}
-                >
-                  {t('ok_join_project')}
-                </button>
+              <div className="row row-spaced text-center">
+                <div className="col-md-12">
+                  <button
+                    className="btn btn-lg btn-primary"
+                    type="submit"
+                    onClick={() => sendPostRequest(true)}
+                  >
+                    {t('ok_join_project')}
+                  </button>
+                </div>
               </div>
             </div>
           </div>

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

@@ -38,3 +38,4 @@
 @import 'collapsible-file-header';
 @import 'panel-heading';
 @import 'menu-bar';
+@import 'invite';

services/web/frontend/stylesheets/bootstrap-5/components/invite.scss

@@ -0,0 +1,8 @@
+.link-sharing-invite {
+  font-family: 'Noto Sans', sans-serif;
+
+  .link-sharing-invite-header {
+    font-size: var(--font-size-07);
+    line-height: var(--line-height-06);
+  }
+}