chore: update change log style (#1846)

apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import {
   useGuideHidden,
@@ -13,13 +13,16 @@ export const ChangeLog = () => {
   const [guideHidden, setGuideHidden] = useGuideHidden();
   const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
     useGuideHiddenUntilNextUpdate();
+  const [isClose, setIsClose] = useState(false);
   const { t } = useTranslation();
   const onCloseWhatsNew = useCallback(() => {
-    setGuideHiddenUntilNextUpdate({
-      ...guideHiddenUntilNextUpdate,
-      changeLog: true,
-    });
-    setGuideHidden({ ...guideHidden, changeLog: true });
+    setTimeout(() => {
+      setGuideHiddenUntilNextUpdate({
+        ...guideHiddenUntilNextUpdate,
+        changeLog: true,
+      });
+      setGuideHidden({ ...guideHidden, changeLog: true });
+    }, 300);
   }, [
     guideHidden,
     guideHiddenUntilNextUpdate,
@@ -30,14 +33,15 @@ export const ChangeLog = () => {
     return <></>;
   }
   return (
-    <StyledChangeLogWarper>
-      <StyledChangeLog data-testid="change-log">
+    <StyledChangeLogWarper isClose={isClose}>
+      <StyledChangeLog data-testid="change-log" isClose={isClose}>
         <StyledLink href={'https://affine.pro'} target="_blank">
           <NewIcon />
           {t("Discover what's new!")}
         </StyledLink>
         <IconButton
           onClick={() => {
+            setIsClose(true);
             onCloseWhatsNew();
           }}
           data-testid="change-log-close-button"

apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts

@@ -133,7 +133,32 @@ const slideIn2 = keyframes({
   },
 });
 
-export const StyledChangeLog = styled('div')(({ theme }) => {
+const slideOut = keyframes({
+  '0%': {
+    height: '32px',
+  },
+  '60%': {
+    height: '32px',
+  },
+  '80%': {
+    height: '32px',
+  },
+  '100%': {
+    height: '0px',
+  },
+});
+const slideOut2 = keyframes({
+  '0%': {
+    transform: 'translateX(0%)',
+  },
+  '100%': {
+    transform: 'translateX(100%)',
+  },
+});
+
+export const StyledChangeLog = styled('div')<{
+  isClose?: boolean;
+}>(({ theme, isClose }) => {
   return {
     width: '110%',
     height: '32px',
@@ -142,29 +167,36 @@ export const StyledChangeLog = styled('div')(({ theme }) => {
     backgroundColor: theme.colors.hoverBackground,
     border: `1px solid ${theme.colors.primaryColor}`,
     borderRight: 'none',
-    padding: '0 0 0 16px',
+    marginLeft: '8px',
+    paddingLeft: '8px',
     borderRadius: '16px 0 0 16px',
     cursor: 'pointer',
     zIndex: 1001,
     position: 'absolute',
     userSelect: 'none',
     transition: 'all 0.3s',
-    animation: `${slideIn2} 1s ease-in-out forwards `,
+    animation: isClose
+      ? `${slideOut2} .3s ease-in-out forwards`
+      : `${slideIn2} 1s ease-in-out forwards`,
     '> svg, a > svg': {
       fontSize: '20px',
       marginRight: '12px',
       color: theme.colors.primaryColor,
     },
     button: {
-      marginRight: '10%',
+      marginRight: '12%',
     },
   };
 });
-export const StyledChangeLogWarper = styled('div')(({ theme }) => {
+export const StyledChangeLogWarper = styled('div')<{
+  isClose?: boolean;
+}>(({ isClose }) => {
   return {
     width: 'calc(100% + 4px)',
     height: '0px',
-    animation: `${slideIn} .5s ease-in-out forwards`,
+    animation: isClose
+      ? `${slideOut} .3s ease-in-out forwards`
+      : `${slideIn} 1s ease-in-out forwards`,
     ...displayFlex('flex-start', 'center'),
     marginBottom: '4px',
     position: 'relative',