github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-20 22:42:40 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Migrate interstitial join project page to Bootstrap 5

GitOrigin-RevId: 10f45eecb33e087373a9605074ef9f8562ca2b8f
This commit is contained in:
Eric Mc Sween 2025-02-20 08:15:53 -05:00 • committed by Copybot
parent 2710e37caf
commit 12abf74620
4 changed files with 93 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/app/src/Features/TokenAccess/TokenAccessController.mjs
View file

@ -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,
})

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

@ -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)

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

@ -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>
</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>
</div>
{isError && (
<div className="row row-spaced">
<div className="card-body">
<div className="row">
<div className="col-md-12">
<Notification
type="error"
content={t('generic_something_went_wrong')}
/>
<h1 className="sharing-updates-h1">
{t('updates_to_project_sharing')}
</h1>
</div>
</div>
)}
<div className="row row-spaced">
<div className="col-md-12">
<p>
<small>
<div className="row row-spaced">
<div className="col-md-12">
<p>
<Trans
i18nKey="you_can_also_choose_to_view_anonymously_or_leave_the_project"
i18nKey="were_making_some_changes_to_project_sharing_this_means_you_will_be_visible"
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}
// 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',
})
}}
/>,
]}
/>
</small>
</p>
</p>
</div>
</div>
<div className="row row-spaced">
<div className="col-md-12">
<OLButton
variant="primary"
onClick={joinProject}
disabled={isLoading}
>
{t('ok_continue_to_project')}
</OLButton>
</div>
</div>
{isError && (
<div className="row row-spaced">
<div className="col-md-12">
<Notification
type="error"
content={t('generic_something_went_wrong')}
/>
</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>

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

@ -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);
}
}