feat(core): responsive for onboarding (#5361)

fix(core): use light-theme for onboarding back button

feat(core): responsive for onboarding

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts

@@ -14,6 +14,9 @@ export const edgelessSwitchWindow = style({
   fontFamily: 'var(--affine-font-family)',
   color: onboardingVars.paper.textColor,
 
+  maxWidth: 'calc(100vw - 48px)',
+  maxHeight: 'calc(100vh - 48px)',
+
   selectors: {
     '&[data-mode="edgeless"]': {
       width: onboardingVars.edgeless.w,

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx

@@ -224,7 +224,15 @@ export const EdgelessSwitch = ({
 
           <div data-no-drag className={styles.noDragWrapper}>
             <header className={styles.header}>
-              <Button size="extraLarge" onClick={onBack}>
+              <Button
+                style={{
+                  background: 'white',
+                  borderColor: '#E3E2E4',
+                  color: '#424149',
+                }}
+                size="extraLarge"
+                onClick={onBack}
+              >
                 Back
               </Button>
               <EdgelessSwitchButtons

packages/frontend/core/src/components/affine/onboarding/style.css.ts

@@ -133,16 +133,25 @@ export const paperLocation = style({
 export const tipsWrapper = style({
   position: 'absolute',
   width: `calc(${onboardingVars.article.w} - 48px)`,
-  top: `calc(-${onboardingVars.article.h} / 2 + 24px)`,
+  maxWidth: 'calc(100vw - 96px)',
+  bottom: 0,
+  height: `calc(${onboardingVars.article.h} / 2 - 24px)`,
+  maxHeight: 'calc(50vh - 48px)',
   pointerEvents: 'none',
   display: 'flex',
   justifyContent: 'center',
   opacity: 0,
-  transition: '0.3s ease 1s',
+  transition: '0.3s ease',
   selectors: {
     '&[data-visible="true"]': {
-      pointerEvents: 'auto',
       opacity: 1,
     },
   },
 });
+globalStyle(`${tipsWrapper} > *`, {
+  display: 'inline-block',
+  height: 'fit-content',
+});
+globalStyle(`${tipsWrapper}[data-visible="true"] > *`, {
+  pointerEvents: 'auto',
+});