Merge pull request #21566 from overleaf/td-bs5-website-redesign

Add website redesign query string override to arbitrary BS5 pages

GitOrigin-RevId: 72816f00d6e2e92dab21035097abc540689af1d3

services/web/app/src/infrastructure/ExpressLocals.js

@@ -373,6 +373,11 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
     next()
   })
 
+  webRouter.use(function (req, res, next) {
+    res.locals.websiteRedesignOverride = req.query.redesign === 'enabled'
+    next()
+  })
+
   webRouter.use(function (req, res, next) {
     res.locals.ExposedSettings = {
       isOverleaf: Settings.overleaf != null,

services/web/app/views/layout-base.pug

@@ -77,7 +77,7 @@ html(
 
 	body(class={
 		'thin-footer': showThinFooter,
-		'website-redesign': isWebsiteRedesign === true
+		'website-redesign': isWebsiteRedesign === true || websiteRedesignOverride
 	}, data-theme="default")
 		if(settings.recaptcha && settings.recaptcha.siteKeyV3)
 			script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render=" + settings.recaptcha.siteKeyV3, defer=deferScripts)

services/web/frontend/js/features/project-list/components/welcome-message.tsx

@@ -6,7 +6,7 @@ import type { Nullable } from '../../../../../types/utils'
 import WelcomeMessageLink from './welcome-message-new/welcome-message-link'
 import WelcomeMessageCreateNewProjectDropdown from './welcome-message-new/welcome-message-create-new-project-dropdown'
 import getMeta from '@/utils/meta'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 
 export default function WelcomeMessage() {
   const { t } = useTranslation()
@@ -17,7 +17,7 @@ export default function WelcomeMessage() {
 
   return (
     <>
-      <OLCard>
+      <OLPageContentCard>
         <div className="welcome-new-wrapper">
           <div className="welcome text-center">
             <h2 className="welcome-title">{t('welcome_to_sl')}</h2>
@@ -43,7 +43,7 @@ export default function WelcomeMessage() {
             </div>
           </div>
         </div>
-      </OLCard>
+      </OLPageContentCard>
       <NewProjectButtonModal
         modal={activeModal}
         onHide={() => setActiveModal(null)}

services/web/frontend/js/features/settings/components/root.tsx

@@ -21,7 +21,7 @@ import useScrollToIdOnLoad from '../../../shared/hooks/use-scroll-to-id-on-load'
 import { SSOAlert } from './emails/sso-alert'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 
 function SettingsPageRoot() {
   const { isReady } = useWaitForI18n()
@@ -48,7 +48,7 @@ function SettingsPageContent() {
 
   return (
     <UserProvider>
-      <OLCard>
+      <OLPageContentCard>
         <div className="page-header">
           <h1>{t('account_settings')}</h1>
         </div>
@@ -92,7 +92,7 @@ function SettingsPageContent() {
             </>
           ) : null}
         </div>
-      </OLCard>
+      </OLPageContentCard>
     </UserProvider>
   )
 }

services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 
 function Canceled() {
@@ -11,7 +11,7 @@ function Canceled() {
     <div className="container">
       <OLRow>
         <OLCol lg={{ span: 8, offset: 2 }}>
-          <OLCard>
+          <OLPageContentCard>
             <div className="page-header">
               <h2>{t('subscription_canceled')}</h2>
             </div>
@@ -35,7 +35,7 @@ function Canceled() {
                 &lt; {t('back_to_your_projects')}
               </a>
             </p>
-          </OLCard>
+          </OLPageContentCard>
         </OLCol>
       </OLRow>
     </div>

services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx

@@ -10,7 +10,7 @@ import ManagedInstitutions from './managed-institutions'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import getMeta from '../../../../utils/meta'
 import PremiumFeaturesLink from './premium-features-link'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
@@ -37,7 +37,7 @@ function SubscriptionDashboard() {
               type="warning"
             />
           )}
-          <OLCard>
+          <OLPageContentCard>
             <div className="page-header">
               <h1>{t('your_subscription')}</h1>
             </div>
@@ -53,7 +53,7 @@ function SubscriptionDashboard() {
               {!hasDisplayedSubscription &&
                 (hasSubscription ? <ContactSupport /> : <FreePlan />)}
             </div>
-          </OLCard>
+          </OLPageContentCard>
         </OLCol>
       </OLRow>
     </div>

services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx

@@ -9,7 +9,7 @@ import JoinGroup from './join-group'
 import AcceptedInvite from './accepted-invite'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 
 export type InviteViewTypes =
   | 'invite'
@@ -74,7 +74,7 @@ export default function GroupInvite() {
 
       <OLRow className="row row-spaced">
         <OLCol lg={{ span: 8, offset: 2 }}>
-          <OLCard>
+          <OLPageContentCard>
             <div className="page-header">
               <h1 className="text-center">
                 <Trans
@@ -90,7 +90,7 @@ export default function GroupInvite() {
               </h1>
             </div>
             <GroupInviteViews />
-          </OLCard>
+          </OLPageContentCard>
         </OLCol>
       </OLRow>
     </div>

services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx

@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import GroupInvitesItemFooter from './group-invites-item-footer'
 import type { TeamInvite } from '../../../../../../types/team-invite'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
 
@@ -15,7 +15,7 @@ export default function GroupInvitesItem({
   return (
     <OLRow className="row-spaced">
       <OLCol lg={{ span: 8, offset: 2 }} className="text-center">
-        <OLCard>
+        <OLPageContentCard>
           <div className="page-header">
             <h2>
               <Trans
@@ -31,7 +31,7 @@ export default function GroupInvitesItem({
             </h2>
           </div>
           <GroupInvitesItemFooter teamInvite={teamInvite} />
-        </OLCard>
+        </OLPageContentCard>
       </OLCol>
     </OLRow>
   )

services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx

@@ -5,7 +5,7 @@ import getMeta from '../../../../utils/meta'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import OLCol from '@/features/ui/components/ol/ol-col'
-import OLCard from '@/features/ui/components/ol/ol-card'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 
 function SuccessfulSubscription() {
@@ -21,7 +21,7 @@ function SuccessfulSubscription() {
     <div className="container">
       <OLRow>
         <OLCol lg={{ span: 8, offset: 2 }}>
-          <OLCard>
+          <OLPageContentCard>
             <div className="page-header">
               <h2>{t('thanks_for_subscribing')}</h2>
             </div>
@@ -106,7 +106,7 @@ function SuccessfulSubscription() {
                 &lt; {t('back_to_your_projects')}
               </a>
             </p>
-          </OLCard>
+          </OLPageContentCard>
         </OLCol>
       </OLRow>
     </div>

services/web/frontend/js/features/ui/components/ol/ol-card.tsx → services/web/frontend/js/features/ui/components/ol/ol-page-content-card.tsx

@@ -1,20 +1,20 @@
-import { Card, CardBody, CardProps } from 'react-bootstrap-5'
+import { Card, CardBody } from 'react-bootstrap-5'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { FC } from 'react'
+import classNames from 'classnames'
 
 // This wraps the Bootstrap 5 Card component but is restricted to the very
 // basic way we're using it, which is as a container for page content. The
 // Bootstrap 3 equivalent in our codebase is a div with class "card"
-const OLCard: FC<CardProps> = ({ children, ...rest }) => {
+const OLPageContentCard: FC<{ className?: string }> = ({
+  children,
+  className,
+}) => {
   return (
     <BootstrapVersionSwitcher
-      bs3={
-        <div className="card" {...rest}>
-          {children}
-        </div>
-      }
+      bs3={<div className={classNames('card', className)}>{children}</div>}
       bs5={
-        <Card {...rest}>
+        <Card className={classNames('page-content-card', className)}>
           <CardBody>{children}</CardBody>
         </Card>
       }
@@ -22,4 +22,4 @@ const OLCard: FC<CardProps> = ({ children, ...rest }) => {
   )
 }
 
-export default OLCard
+export default OLPageContentCard

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

@@ -340,7 +340,8 @@ footer.site-footer {
   }
 }
 
-.website-redesign-fat-footer {
+.website-redesign-fat-footer,
+.website-redesign .fat-footer {
   .fat-footer-container {
     @include media-breakpoint-down(sm) {
       margin: var(--spacing-11) 0;

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

@@ -211,7 +211,8 @@
   }
 }
 
-.website-redesign-navbar {
+.website-redesign-navbar,
+.website-redesign .navbar-default {
   --navbar-title-color: var(--content-primary);
   --navbar-title-color-hover: var(--content-secondary);
   --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -232,11 +232,21 @@
   .card {
     --bs-card-bg: var(--neutral-10);
     --bs-card-border-radius: var(--border-radius-large);
-    --bs-card-spacer-y: var(--spacing-08);
-    --bs-card-spacer-x: var(--spacing-08);
+
+    &.page-content-card {
+      --bs-card-bg: transparent;
+    }
   }
 
   .badge-premium {
     --badge-font-weight: 600;
   }
+
+  .content-alt {
+    background-color: var(--bg-light-primary);
+  }
+
+  .page-header {
+    border-bottom-width: 0;
+  }
 }