feat(core): expose skip login button to web (#8115)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/634cce16-bba2-480f-9126-94b22a782a9a.png)

Allow user skip login page on client

packages/frontend/mobile/src/views/sign-in/layout.css.ts

@@ -1,5 +1,3 @@
-import { cssVar } from '@toeverything/theme';
-import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
@@ -18,44 +16,3 @@ export const content = style({
   alignItems: 'stretch',
   gap: 24,
 });
-
-export const skipDivider = style({
-  display: 'flex',
-  gap: 12,
-  alignItems: 'center',
-  height: 20,
-  marginTop: 12,
-  marginBottom: 12,
-});
-
-export const skipDividerLine = style({
-  flex: 1,
-  height: 0,
-  borderBottom: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
-});
-
-export const skipDividerText = style({
-  color: cssVarV2('text/secondary'),
-  fontSize: cssVar('fontXs'),
-});
-
-export const skipText = style({
-  color: cssVarV2('text/primary'),
-  fontSize: cssVar('fontXs'),
-  fontWeight: 500,
-});
-
-export const skipLink = style({
-  color: cssVarV2('text/link'),
-  fontSize: cssVar('fontXs'),
-});
-
-export const skipLinkIcon = style({
-  color: cssVarV2('text/link'),
-});
-
-export const skipSection = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-});

packages/frontend/mobile/src/views/sign-in/layout.tsx

@@ -1,40 +1,13 @@
-import { Button } from '@affine/component';
-import { useI18n } from '@affine/i18n';
-import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
 import type { PropsWithChildren } from 'react';
 
 import { SignInBackground } from './background';
 import * as styles from './layout.css';
 
-export const MobileSignInLayout = ({
-  children,
-  onSkip,
-}: PropsWithChildren<{
-  onSkip: () => void;
-}>) => {
-  const t = useI18n();
+export const MobileSignInLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className={styles.root}>
       <SignInBackground />
       <div className={styles.content}>{children}</div>
-      <div className={styles.skipDivider}>
-        <div className={styles.skipDividerLine} />
-        <span className={styles.skipDividerText}>or</span>
-        <div className={styles.skipDividerLine} />
-      </div>
-      <div className={styles.skipSection}>
-        <div className={styles.skipText}>
-          {t['com.affine.mobile.sign-in.skip.hint']()}
-        </div>
-        <Button
-          variant="plain"
-          onClick={onSkip}
-          className={styles.skipLink}
-          suffix={<ArrowRightBigIcon className={styles.skipLinkIcon} />}
-        >
-          {t['com.affine.mobile.sign-in.skip.link']()}
-        </Button>
-      </div>
     </div>
   );
 };

packages/frontend/mobile/src/views/sign-in/mobile-sign-in.tsx

@@ -4,8 +4,8 @@ import { MobileSignInLayout } from './layout';
 
 export const MobileSignIn = ({ onSkip }: { onSkip: () => void }) => {
   return (
-    <MobileSignInLayout onSkip={onSkip}>
-      <AuthPanel />
+    <MobileSignInLayout>
+      <AuthPanel onSkip={onSkip} />
     </MobileSignInLayout>
   );
 };