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

Add website redesign query string override to arbitrary BS5 pages GitOrigin-RevId: 72816f00d6e2e92dab21035097abc540689af1d3
2024-11-21 20:47:08 -05:00 · 2024-11-04 16:10:49 +00:00 · 2024-11-04 16:10:49 +00:00 · f57704b844
commit f57704b844
parent 571ece201f
13 changed files with 52 additions and 35 deletions
--- a/services/web/app/src/infrastructure/ExpressLocals.js
+++ b/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,
--- a/services/web/app/views/layout-base.pug
+++ b/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)
--- a/services/web/frontend/js/features/project-list/components/welcome-message.tsx
+++ b/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)}
--- a/services/web/frontend/js/features/settings/components/root.tsx
+++ b/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>
  )
 }
--- a/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx
+++ b/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>
--- a/services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx
+++ b/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>
--- a/services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx
+++ b/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>
--- a/services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx
+++ b/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>
  )
--- a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
+++ b/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>
--- a/services/web/frontend/js/features/ui/components/ol/ol-page-content-card.tsx
+++ b/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
--- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
+++ b/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;
--- a/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
+++ b/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');
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
+++ b/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;
+  }
 }