fix(core): onboarding switch active state is invisible (#7928)

close AF-1262

Author: CatsJuice

packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx

@@ -16,7 +16,7 @@ export const switchButtons = style({
 
   selectors: {
     // indicator
-    '&::after': {
+    '&::before': {
       content: '',
       width: '48px',
       height: '48px',
@@ -26,16 +26,22 @@ export const switchButtons = style({
       transition: 'transform 0.15s ease',
       boxShadow: 'var(--affine-shadow-1)',
     },
-    '&[data-mode="edgeless"]::after': {
+    '&[data-mode="edgeless"]::before': {
       transform: `translateX(64px)`,
     },
   },
 });
 
 export const switchButton = style({
+  width: 24,
+  height: 24,
   transform: 'scale(2)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   boxShadow: 'none',
   opacity: 0.6,
+  cursor: 'pointer',
   selectors: {
     '&:nth-child(1)': {
       transformOrigin: 'left',

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

@@ -30,13 +30,11 @@ export const EdgelessSwitchButtons = ({
       <PageSwitchItem
         className={styles.switchButton}
         data-active={mode === 'page'}
-        active={mode === 'page'}
         onClick={onSwitchToPageMode}
       />
       <EdgelessSwitchItem
         className={styles.switchButton}
         data-active={mode === 'edgeless'}
-        active={mode === 'edgeless'}
         onClick={onSwitchToEdgelessMode}
       />
     </div>