feat: modify styles

packages/app/src/components/editor-mode-switch/index.tsx

@@ -38,20 +38,25 @@ const EdgelessItem = ({ active }: { active?: boolean }) => {
 const AnimateRadioItem = ({
   active,
   status,
-  icon,
+  icon: propsIcon,
   label,
   isLeft,
   ...props
 }: AnimateRadioItemProps) => {
+  const icon = (
+    <StyledIcon shrink={status === 'shrink'} isLeft={isLeft}>
+      {cloneElement(propsIcon, {
+        active,
+      })}
+    </StyledIcon>
+  );
   return (
     <StyledRadioItem active={active} status={status} {...props}>
-      <StyledIcon shrink={status === 'shrink'} isLeft={isLeft}>
-        {cloneElement(icon, {
-          active,
-        })}
-      </StyledIcon>
-
-      <StyledLabel shrink={status !== 'stretch'}>{label}</StyledLabel>
+      {isLeft ? icon : null}
+      <StyledLabel shrink={status !== 'stretch'} isLeft={isLeft}>
+        {label}
+      </StyledLabel>
+      {isLeft ? null : icon}
     </StyledRadioItem>
   );
 };

packages/app/src/components/editor-mode-switch/style.ts

@@ -99,12 +99,23 @@ export const StyledRadioItem = styled('div')<{
 
 export const StyledLabel = styled('div')<{
   shrink: boolean;
-}>(({ shrink }) => {
+  isLeft: boolean;
+}>(({ shrink, isLeft }) => {
   const animateScaleStretch = keyframes`${toString(
-    spring({ scale: 0 }, { scale: 1 }, { preset: 'gentle' })
+    spring(
+      { width: '0px' },
+      { width: isLeft ? '65px' : '75px' },
+      { preset: 'gentle' }
+    )
   )}`;
   const animateScaleShrink = keyframes(
-    `${toString(spring({ scale: 1 }, { scale: 0 }, { preset: 'gentle' }))}`
+    `${toString(
+      spring(
+        { width: isLeft ? '65px' : '75px' },
+        { width: '0px' },
+        { preset: 'gentle' }
+      )
+    )}`
   );
   const shrinkStyle = shrink
     ? {
@@ -117,10 +128,12 @@ export const StyledLabel = styled('div')<{
   return {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: isLeft ? 'flex-start' : 'flex-end',
     fontSize: '16px',
     flexShrink: '0',
     transition: `transform ${ANIMATE_DURATION}ms`,
     fontWeight: 'normal',
+    overflow: 'hidden',
     ...shrinkStyle,
   };
 });