Merge pull request #23689 from overleaf/em-dp-mj-interstitial-join-project-bs5

Migrate interstitial join project page to Bootstrap 5

GitOrigin-RevId: 10f45eecb33e087373a9605074ef9f8562ca2b8f

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

@@ -502,6 +502,7 @@ async function sharingUpdatesConsent(req, res, next) {
     page: req.path,
     name: 'link-sharing-collaborator',
   })
+  await SplitTestHandler.promises.getAssignment(req, res, 'bs5-misc-pages-core')
   res.render('project/token/sharing-updates', {
     projectId,
   })

services/web/app/views/project/token/sharing-updates.pug

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

services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx

@@ -11,6 +11,7 @@ import Notification from '@/shared/components/notification'
 import { sendMB } from '@/infrastructure/event-tracking'
 
 import LeaveProjectModal from './leave-project-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 function SharingUpdatesRoot() {
   const [showModal, setShowModal] = useState(false)
@@ -67,86 +68,88 @@ function SharingUpdatesRoot() {
         handleCloseModal={() => setShowModal(false)}
       />
       <div className="row">
-        <div className="col-md-6 col-md-offset-3">
+        <div className="col-md-6 col-md-offset-3 offset-md-3">
           <div className="card sharing-updates">
-            <div className="row">
-              <div className="col-md-12">
-                <h1 className="sharing-updates-h1">
-                  {t('updates_to_project_sharing')}
-                </h1>
-              </div>
-            </div>
-
-            <div className="row row-spaced">
-              <div className="col-md-12">
-                <p>
-                  <Trans
-                    i18nKey="were_making_some_changes_to_project_sharing_this_means_you_will_be_visible"
-                    components={[
-                      // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                      <a
-                        href="/blog/changes-to-project-sharing"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                        onClick={() => {
-                          sendMB('notification-click', {
-                            name: 'link-sharing-collaborator',
-                            button: 'learn',
-                          })
-                        }}
-                      />,
-                    ]}
-                  />
-                </p>
+            <div className="card-body">
+              <div className="row">
+                <div className="col-md-12">
+                  <h1 className="sharing-updates-h1">
+                    {t('updates_to_project_sharing')}
+                  </h1>
+                </div>
               </div>
-            </div>
 
-            <div className="row row-spaced">
-              <div className="col-md-12">
-                <button
-                  className="btn btn-primary"
-                  onClick={() => joinProject()}
-                  disabled={isLoading}
-                >
-                  {t('ok_continue_to_project')}
-                </button>
+              <div className="row row-spaced">
+                <div className="col-md-12">
+                  <p>
+                    <Trans
+                      i18nKey="were_making_some_changes_to_project_sharing_this_means_you_will_be_visible"
+                      components={[
+                        // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                        <a
+                          href="/blog/changes-to-project-sharing"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                          onClick={() => {
+                            sendMB('notification-click', {
+                              name: 'link-sharing-collaborator',
+                              button: 'learn',
+                            })
+                          }}
+                        />,
+                      ]}
+                    />
+                  </p>
+                </div>
               </div>
-            </div>
 
-            {isError && (
               <div className="row row-spaced">
                 <div className="col-md-12">
-                  <Notification
-                    type="error"
-                    content={t('generic_something_went_wrong')}
-                  />
+                  <OLButton
+                    variant="primary"
+                    onClick={joinProject}
+                    disabled={isLoading}
+                  >
+                    {t('ok_continue_to_project')}
+                  </OLButton>
                 </div>
               </div>
-            )}
 
-            <div className="row row-spaced">
-              <div className="col-md-12">
-                <p>
-                  <small>
-                    <Trans
-                      i18nKey="you_can_also_choose_to_view_anonymously_or_leave_the_project"
-                      components={[
-                        // eslint-disable-next-line react/jsx-key
-                        <button
-                          className="btn btn-inline-link"
-                          onClick={() => viewProject()}
-                          disabled={isLoading || isSuccess}
-                        />,
-                        // eslint-disable-next-line react/jsx-key
-                        <button
-                          className="btn btn-inline-link"
-                          onClick={() => setShowModal(true)}
-                          disabled={isLoading || isSuccess}
-                        />,
-                      ]}
+              {isError && (
+                <div className="row row-spaced">
+                  <div className="col-md-12">
+                    <Notification
+                      type="error"
+                      content={t('generic_something_went_wrong')}
                     />
-                  </small>
-                </p>
+                  </div>
+                </div>
+              )}
+
+              <div className="row row-spaced">
+                <div className="col-md-12">
+                  <p>
+                    <small>
+                      <Trans
+                        i18nKey="you_can_also_choose_to_view_anonymously_or_leave_the_project"
+                        components={[
+                          // eslint-disable-next-line react/jsx-key
+                          <button
+                            className="btn btn-inline-link"
+                            onClick={() => viewProject()}
+                            disabled={isLoading || isSuccess}
+                          />,
+                          // eslint-disable-next-line react/jsx-key
+                          <button
+                            className="btn btn-inline-link"
+                            onClick={() => setShowModal(true)}
+                            disabled={isLoading || isSuccess}
+                          />,
+                        ]}
+                      />
+                    </small>
+                  </p>
+                </div>
               </div>
             </div>
           </div>

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

@@ -6,3 +6,20 @@
     line-height: var(--line-height-06);
   }
 }
+
+.sharing-updates {
+  h1 {
+    // heading-sm
+    font-size: var(--font-size-05);
+    line-height: var(--line-height-04);
+    color: var(--content-primary);
+  }
+
+  p {
+    color: var(--content-secondary);
+  }
+
+  small {
+    font-size: var(--font-size-02);
+  }
+}