From 34c1d2a67408b4d4673dd411ec676f9f309ec71f Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 21 Dec 2023 04:27:49 +0000
Subject: [PATCH] feat(core): responsive for onboarding (#5361)

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

feat(core): responsive for onboarding
---
 .../onboarding/steps/edgeless-switch.css.ts       |  3 +++
 .../affine/onboarding/steps/edgeless-switch.tsx   | 10 +++++++++-
 .../src/components/affine/onboarding/style.css.ts | 15 ++++++++++++---
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts
index 477eb6190..39e9d102f 100644
--- a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts
+++ b/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,
diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx
index 4b3e3597a..bee79e655 100644
--- a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx
+++ b/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
diff --git a/packages/frontend/core/src/components/affine/onboarding/style.css.ts b/packages/frontend/core/src/components/affine/onboarding/style.css.ts
index 67c8dfbb1..2f8ba3b56 100644
--- a/packages/frontend/core/src/components/affine/onboarding/style.css.ts
+++ b/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',
+});