Merge pull request #18064 from overleaf/dp-interstitial

Create Interstitial component

GitOrigin-RevId: 00c9378a04b0ce17e0af409c3a85f12c1db49b42

services/web/frontend/js/features/compromised-password/components/compromised-password-root.tsx

@@ -1,6 +1,7 @@
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { Interstitial } from '@/shared/components/interstitial'
 
 export function CompromisedPasswordCard() {
   const { t } = useTranslation()
@@ -11,29 +12,28 @@ export function CompromisedPasswordCard() {
   }
 
   return (
-    <div className="compromised-password">
-      <div>
-        <h3 className="compromised-password-header">
-          {t('compromised_password')}
-        </h3>
-        <p>
-          <Trans
-            i18nKey="your_password_was_detected"
-            components={[
-              /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-              <a
-                href="https://haveibeenpwned.com/passwords"
-                target="_blank"
-                rel="noreferrer"
-              />,
-            ]}
-          />
-        </p>
-      </div>
+    <Interstitial
+      contentClassName="compromised-password-content"
+      showLogo={false}
+      title={t('compromised_password')}
+    >
+      <p>
+        <Trans
+          i18nKey="your_password_was_detected"
+          components={[
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a
+              href="https://haveibeenpwned.com/passwords"
+              target="_blank"
+              rel="noreferrer"
+            />,
+          ]}
+        />
+      </p>
 
       <Button className="btn-primary" href="/user/settings">
         {t('change_password_in_account_settings')}
       </Button>
-    </div>
+    </Interstitial>
   )
 }

services/web/frontend/js/shared/components/interstitial.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames'
+
+type InterstitialProps = {
+  className?: string
+  contentClassName?: string
+  children: React.ReactNode
+  showLogo: boolean
+  title?: string
+}
+
+export function Interstitial({
+  className,
+  contentClassName,
+  children,
+  showLogo,
+  title,
+}: InterstitialProps) {
+  return (
+    <div className={classNames('interstitial', className)}>
+      {showLogo && (
+        <img className="logo" src="/img/ol-brand/overleaf.svg" alt="Overleaf" />
+      )}
+      {title && <h1 className="h3 interstitial-header">{title}</h1>}
+      <div className={classNames(contentClassName)}>{children}</div>
+    </div>
+  )
+}

services/web/frontend/stylesheets/components/interstitial.less

@@ -0,0 +1,22 @@
+.interstitial {
+  max-width: 400px;
+  padding: 24px;
+  margin: 0 auto;
+  background: @white;
+  display: flex;
+  flex-direction: column;
+
+  .logo {
+    width: 130px;
+    margin: 0 auto;
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .interstitial-header {
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+}

services/web/frontend/stylesheets/main-style.less

@@ -74,6 +74,7 @@
 @import 'components/switcher.less';
 @import 'components/stepper.less';
 @import 'components/radio-chip.less';
+@import 'components/interstitial.less';
 
 // Components w/ JavaScript
 @import 'components/modals.less';

services/web/frontend/stylesheets/modules/overleaf-integration.less

@@ -1,17 +1,6 @@
 .onboarding-confirm-email {
-  max-width: 400px;
-  padding: 24px;
-  margin: 0 auto;
-  background: @white;
-  display: flex;
-  flex-direction: column;
   gap: 24px;
 
-  .logo {
-    width: 130px;
-    margin: 0 auto;
-  }
-
   form {
     .text-danger {
       display: flex;
@@ -155,17 +144,8 @@
   }
 }
 
-.compromised-password {
-  max-width: 400px;
-  padding: 24px;
-  margin: 0 auto;
-  background: @white;
+.compromised-password-content {
   display: flex;
   flex-direction: column;
   gap: 12px;
-
-  .compromised-password-header {
-    margin-top: 0;
-    margin-bottom: 4px;
-  }
 }