feat(core): add responsive styles to registration page (#5044)

The responsive style of the login and registration page has been adjusted, with special treatment given to the input.
work for #4843

packages/frontend/core/src/pages/upgrade-success.css.ts

@@ -1,87 +1,9 @@
 import { style } from '@vanilla-extract/css';
-
-export const root = style({
-  height: '100vh',
-  width: '100vw',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  fontSize: 'var(--affine-font-base)',
-  position: 'relative',
-});
-
-export const affineLogo = style({
-  color: 'inherit',
-});
-
-export const topNav = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '16px 120px',
-});
-
-export const topNavLinks = style({
-  display: 'flex',
-  columnGap: 4,
-});
-
-export const topNavLink = style({
-  color: 'var(--affine-text-primary-color)',
-  fontSize: 'var(--affine-font-sm)',
-  fontWeight: 500,
-  textDecoration: 'none',
-  padding: '4px 18px',
-});
-
-export const tryAgainLink = style({
-  color: 'var(--affine-link-color)',
-  fontWeight: 500,
-  textDecoration: 'none',
-  fontSize: 'var(--affine-font-sm)',
-});
-
-export const centerContent = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  marginTop: 40,
-});
-
-export const prompt = style({
-  marginTop: 20,
-  marginBottom: 12,
-});
-
-export const body = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-  flexWrap: 'wrap',
-  gap: '48px',
-  padding: '0 20px',
-});
-
-export const leftContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '548px',
-  gap: '28px',
-});
-export const leftContentTitle = style({
-  fontSize: 'var(--affine-font-title)',
-  fontWeight: 700,
-  minHeight: '44px',
-});
 export const leftContentText = style({
   fontSize: 'var(--affine-font-base)',
   fontWeight: 400,
   lineHeight: '1.6',
+  maxWidth: '548px',
 });
 
 export const mail = style({

packages/frontend/core/src/pages/upgrade-success.tsx

@@ -1,8 +1,7 @@
-import { Empty } from '@affine/component';
+import { AuthPageContainer } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { Logo1Icon } from '@blocksuite/icons';
 import { useCallback } from 'react';
 
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
@@ -11,93 +10,40 @@ import * as styles from './upgrade-success.css';
 export const UpgradeSuccess = () => {
   const t = useAFFiNEI18N();
 
-  const openDownloadLink = useCallback(() => {
-    const url = `https://affine.pro/download`;
-    open(url, '_blank');
-  }, []);
-
   const { jumpToIndex } = useNavigateHelper();
   const openAffine = useCallback(() => {
     jumpToIndex();
   }, [jumpToIndex]);
 
-  return (
-    <div className={styles.root}>
-      <div className={styles.topNav}>
-        <a href="/" rel="noreferrer" className={styles.affineLogo}>
-          <Logo1Icon width={24} height={24} />
-        </a>
-
-        <div className={styles.topNavLinks}>
-          <a
-            href="https://affine.pro"
-            target="_blank"
-            rel="noreferrer"
-            className={styles.topNavLink}
-          >
-            {t['com.affine.other-page.nav.official-website']()}
-          </a>
-          <a
-            href="https://community.affine.pro/home"
-            target="_blank"
-            rel="noreferrer"
-            className={styles.topNavLink}
-          >
-            {t['com.affine.other-page.nav.affine-community']()}
-          </a>
-          <a
-            href="https://affine.pro/blog"
-            target="_blank"
-            rel="noreferrer"
-            className={styles.topNavLink}
-          >
-            {t['com.affine.other-page.nav.blog']()}
-          </a>
-          <a
-            href="https://affine.pro/about-us"
-            target="_blank"
-            rel="noreferrer"
-            className={styles.topNavLink}
-          >
-            {t['com.affine.other-page.nav.contact-us']()}
-          </a>
-        </div>
-
-        <Button onClick={openDownloadLink}>
-          {t['com.affine.auth.open.affine.download-app']()}
-        </Button>
-      </div>
-      <div className={styles.body}>
-        <div className={styles.leftContainer}>
-          <div className={styles.leftContentTitle}>
-            {t['com.affine.payment.upgrade-success-page.title']()}
-          </div>
-          <div className={styles.leftContentText}>
-            {t['com.affine.payment.upgrade-success-page.text']()}
-            <div>
-              <Trans
-                i18nKey={'com.affine.payment.upgrade-success-page.support'}
-                components={{
-                  1: (
-                    <a
-                      href="mailto:support@toeverything.info"
-                      className={styles.mail}
-                    />
-                  ),
-                }}
+  const subtitle = (
+    <div className={styles.leftContentText}>
+      {t['com.affine.payment.upgrade-success-page.text']()}
+      <div>
+        <Trans
+          i18nKey={'com.affine.payment.upgrade-success-page.support'}
+          components={{
+            1: (
+              <a
+                href="mailto:support@toeverything.info"
+                className={styles.mail}
               />
-            </div>
-          </div>
-          <div>
-            <Button type="primary" size="extraLarge" onClick={openAffine}>
-              {t['com.affine.other-page.nav.open-affine']()}
-            </Button>
-          </div>
-        </div>
-        <Empty />
+            ),
+          }}
+        />
       </div>
     </div>
   );
+
+  return (
+    <AuthPageContainer
+      title={t['com.affine.payment.upgrade-success-page.title']()}
+      subtitle={subtitle}
+    >
+      <Button type="primary" size="extraLarge" onClick={openAffine}>
+        {t['com.affine.other-page.nav.open-affine']()}
+      </Button>
+    </AuthPageContainer>
+  );
 };
 
 export const Component = () => {