feat: modify styles

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

@@ -13,7 +13,7 @@ export const StyledHeader = styled('div')({
   zIndex: '10',
 });
 
-export const StyledTitle = styled('div')({
+export const StyledTitle = styled('div')(({ theme }) => ({
   width: '720px',
   height: '100%',
   position: 'absolute',
@@ -23,8 +23,8 @@ export const StyledTitle = styled('div')({
   margin: 'auto',
 
   ...displayFlex('center', 'center'),
-  fontSize: '20px',
-});
+  fontSize: theme.font.base,
+}));
 
 export const StyledTitleWrapper = styled('div')({
   maxWidth: '720px',

packages/app/src/components/contact-modal/index.tsx

@@ -25,7 +25,7 @@ import {
   StyledLogo,
   StyledModalHeader,
   StyledModalHeaderLeft,
-  CloseButton,
+  StyledCloseButton,
   StyledModalFooter,
 } from './style';
 
@@ -87,13 +87,13 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
               <StyledLogo src={logo.src} alt="" />
               <span>Alpha</span>
             </StyledModalHeaderLeft>
-            <CloseButton
+            <StyledCloseButton
               onClick={() => {
                 onClose();
               }}
             >
               <CloseIcon width={12} height={12} />
-            </CloseButton>
+            </StyledCloseButton>
           </StyledModalHeader>
 
           <StyledContent>

packages/app/src/components/contact-modal/style.ts

@@ -1,5 +1,7 @@
 import { absoluteCenter, displayFlex, styled } from '@/styles';
 import bg from './bg.png';
+import CloseIcon from '@mui/icons-material/Close';
+
 export const StyledModalContainer = styled('div')(({ theme }) => {
   return {
     width: '100vw',
@@ -175,20 +177,36 @@ export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
   };
 });
 
-export const CloseButton = styled('div')(({ theme }) => {
+export const StyledCloseButton = styled('div')(({ theme }) => {
   return {
-    width: '30px',
-    height: '30px',
-    borderRadius: '6px',
+    width: '60px',
+    height: '60px',
     color: theme.colors.iconColor,
     cursor: 'pointer',
     ...displayFlex('center', 'center'),
+    position: 'absolute',
+    right: '0',
+    top: '0',
+
+    // TODO: we need to add @emotion/babel-plugin
+    '::after': {
+      content: '""',
+      width: '30px',
+      height: '30px',
+      borderRadius: '6px',
+      ...absoluteCenter({ horizontal: true, vertical: true }),
+    },
     ':hover': {
-      background: theme.colors.hoverBackground,
+      color: theme.colors.primaryColor,
+      '::after': {
+        background: theme.colors.hoverBackground,
+      },
     },
     svg: {
       width: '20px',
       height: '20px',
+      position: 'relative',
+      zIndex: 1,
     },
   };
 });

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -28,32 +28,32 @@ const toolbarList1 = [
   {
     flavor: 'text',
     icon: <TextIcon />,
-    toolTip: 'Text(coming soon)',
+    toolTip: 'Text (coming soon)',
     disable: true,
   },
   {
     flavor: 'shape',
     icon: <ShapeIcon />,
-    toolTip: 'Shape(coming soon)',
+    toolTip: 'Shape (coming soon)',
     disable: true,
   },
   {
     flavor: 'sticky',
     icon: <StickerIcon />,
-    toolTip: 'Sticky(coming soon)',
+    toolTip: 'Sticky (coming soon)',
     disable: true,
   },
   {
     flavor: 'pen',
     icon: <PenIcon />,
-    toolTip: 'Pen(coming soon)',
+    toolTip: 'Pen (coming soon)',
     disable: true,
   },
 
   {
     flavor: 'connector',
     icon: <ConnectorIcon />,
-    toolTip: 'Connector(coming soon)',
+    toolTip: 'Connector (coming soon)',
     disable: true,
   },
 ];
@@ -88,7 +88,7 @@ const UndoRedo = () => {
 
   return (
     <StyledToolbarWrapper>
-      <Tooltip content="undo" placement="right-start">
+      <Tooltip content="Undo" placement="right-start">
         <StyledToolbarItem
           disable={!canUndo}
           onClick={() => {
@@ -98,7 +98,7 @@ const UndoRedo = () => {
           <UndoIcon />
         </StyledToolbarItem>
       </Tooltip>
-      <Tooltip content="redo" placement="right-start">
+      <Tooltip content="Redo" placement="right-start">
         <StyledToolbarItem
           disable={!canRedo}
           onClick={() => {

packages/app/src/components/edgeless-toolbar/style.ts

@@ -1,4 +1,4 @@
-import { styled, displayFlex, fixedCenter } from '@/styles';
+import { styled, displayFlex } from '@/styles';
 
 export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
   height: '320px',
@@ -26,7 +26,7 @@ export const StyledToolbarItem = styled.div<{
   width: '36px',
   height: '36px',
   ...displayFlex('center', 'center'),
-  color: disable ? '#C0C0C0' : theme.colors.iconColor,
+  color: disable ? theme.colors.disableColor : theme.colors.iconColor,
   cursor: 'pointer',
   svg: {
     width: '36px',

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,
   };
 });

packages/app/src/components/shortcuts-modal/style.ts

@@ -6,6 +6,7 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
   paddingBottom: '28px',
   backgroundColor: theme.colors.popoverBackground,
   boxShadow: theme.shadow.popover,
+  borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
   color: theme.colors.popoverColor,
   overflow: 'auto',
   boxRadius: '10px',
@@ -71,6 +72,7 @@ export const CloseButton = styled('div')(({ theme }) => {
     },
     ':hover': {
       background: theme.colors.hoverBackground,
+      color: theme.colors.primaryColor,
     },
   };
 });