feat: modify style

packages/app/src/components/Header/index.tsx

@@ -13,6 +13,7 @@ import { Popover } from '@/components/popover';
 import { useTheme } from '@/styles';
 import { useEditor } from '@/components/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
+import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
 
 const DarkModeSwitch = () => {
   const { changeMode, mode } = useTheme();
@@ -39,9 +40,17 @@ const DarkModeSwitch = () => {
 };
 
 const PopoverContent = () => {
-  const { editor } = useEditor();
+  const { editor, mode, setMode } = useEditor();
   return (
-    <div>
+    <>
+      <StyledMoreMenuItem
+        onClick={() => {
+          setMode(mode === 'page' ? 'edgeless' : 'page');
+        }}
+      >
+        {mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
+        Convert to {mode === 'page' ? 'edgeless' : 'page'}
+      </StyledMoreMenuItem>
       <StyledMoreMenuItem
         onClick={() => {
           editor && editor.contentParser.onExportHtml();
@@ -58,7 +67,7 @@ const PopoverContent = () => {
         <ExportIcon />
         Export to markdown
       </StyledMoreMenuItem>
-    </div>
+    </>
   );
 };
 

packages/app/src/components/Header/styles.ts

@@ -22,7 +22,6 @@ export const StyledTitle = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontWeight: '600',
   fontSize: '20px',
 });
 

packages/app/src/components/popover/index.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
-import type { CSSProperties, PropsWithChildren } from 'react';
+import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
+import Grow from '@mui/material/Grow';
+
 import { styled } from '@/styles';
 
 type PopoverProps = {
-  popoverContent?: React.ReactNode;
+  popoverContent?: ReactNode;
   style?: CSSProperties;
 };
 
@@ -17,8 +19,9 @@ const StyledPopoverWrapper = styled('div')({
   bottom: '0',
   right: '0',
   paddingTop: '46px',
+  zIndex: 1000,
 });
-const StyledPopover = styled('div')<{ show: boolean }>(({ show }) => {
+const StyledPopover = styled('div')(() => {
   return {
     width: '248px',
     background: '#fff',
@@ -26,7 +29,6 @@ const StyledPopover = styled('div')<{ show: boolean }>(({ show }) => {
       '0px 1px 10px -6px rgba(24, 39, 75, 0.5), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
     borderRadius: '10px 0px 10px 10px',
     padding: '8px 4px',
-    display: show ? 'block' : 'none',
     position: 'absolute',
     top: '46px',
     right: '0',
@@ -52,9 +54,11 @@ export const Popover = ({
       style={style}
     >
       {children}
-      <StyledPopoverWrapper>
-        <StyledPopover show={show}>{popoverContent}</StyledPopover>
-      </StyledPopoverWrapper>
+      <Grow in={show}>
+        <StyledPopoverWrapper>
+          <StyledPopover>{popoverContent}</StyledPopover>
+        </StyledPopoverWrapper>
+      </Grow>
     </StyledPopoverContainer>
   );
 };

packages/app/src/pages/affine.tsx

@@ -1,136 +1,5 @@
-import type { ReactNode } from 'react';
-import { useRef, useState, useEffect } from 'react';
-import { styled } from '@/styles';
-import { PaperIcon, EdgelessIcon } from '@/components/Header/icons';
-export const StyledHeader = styled('div')({
-  height: '60px',
-  width: '100vw',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  padding: '0 22px',
-  borderBottom: '1px solid #e5e5e5',
-});
-
-export const StyledAnimateRadio = styled('div')<{ shrink: boolean }>(
-  ({ shrink }) => {
-    const shrinkStyle = shrink
-      ? {
-          width: '66px',
-          background: 'transparent',
-          '::after': {
-            opacity: '0',
-          },
-        }
-      : {};
-    return {
-      border: '1px solid #e5e5e5',
-      width: '132px',
-      height: '36px',
-      borderRadius: '18px',
-      background: '#F1F3FF',
-      position: 'relative',
-      display: 'flex',
-      transition: 'all .3s',
-      '::after': {
-        content: '""',
-        width: '1px',
-        height: '14px',
-        background: '#D0D7E3',
-        position: 'absolute',
-        left: '0',
-        right: '0',
-        top: '0',
-        bottom: '0',
-        margin: 'auto',
-      },
-      ...shrinkStyle,
-    };
-  }
-);
-
-export const StyledAnimateRadioItem = styled('div')<{
-  active: boolean;
-  shrink: boolean;
-}>(({ shrink }) => {
-  const shrinkStyle = shrink
-    ? {
-        width: '100%',
-        display: 'none',
-      }
-    : {};
-  return {
-    width: '66px',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    ...shrinkStyle,
-  };
-});
-
-type AnimateRadioProps = {
-  labelLeft: ReactNode;
-  labelRight: ReactNode;
-};
-
-const AnimateRadio = ({ labelLeft, labelRight }: AnimateRadioProps) => {
-  const [active, setActive] = useState('left');
-  const [isHover, setIsHover] = useState(false);
-  const isAnimating = useRef(false);
-  const stretch = () => {
-    !isAnimating.current && setIsHover(true);
-  };
-  const shrink = () => {
-    !isAnimating.current && setIsHover(false);
-  };
-
-  useEffect(() => {
-    // isAnimating.current = true;
-    // setTimeout(() => {
-    //   isAnimating.current = false;
-    // }, 500);
-  }, [isHover]);
-
-  return (
-    <StyledAnimateRadio
-      shrink={isHover}
-      onMouseEnter={() => {
-        stretch();
-      }}
-      onMouseLeave={() => {
-        shrink();
-      }}
-    >
-      <StyledAnimateRadioItem
-        active={active === 'left'}
-        shrink={isHover && active === 'right'}
-        onClick={() => {
-          setActive('left');
-        }}
-      >
-        {labelLeft}
-      </StyledAnimateRadioItem>
-      <StyledAnimateRadioItem
-        active={active === 'right'}
-        shrink={isHover && active === 'left'}
-        onClick={() => {
-          setActive('right');
-        }}
-      >
-        {labelRight}
-      </StyledAnimateRadioItem>
-    </StyledAnimateRadio>
-  );
-};
-
 const Affine = () => {
-  return (
-    <StyledHeader>
-      <AnimateRadio labelLeft={<PaperIcon />} labelRight={<EdgelessIcon />} />
-    </StyledHeader>
-  );
+  return <div>affine page</div>;
 };
 
 export default Affine;