chore: update change log style (#1832)

apps/web/src/components/pure/help-island/index.tsx

@@ -1,7 +1,7 @@
 import { MuiFade, Tooltip } from '@affine/component';
 import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
-import { CloseIcon, DoneIcon } from '@blocksuite/icons';
+import { CloseIcon, NewIcon } from '@blocksuite/icons';
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
 
@@ -72,7 +72,7 @@ export const HelpIsland = ({
                   window.open('https://affine.pro', '_blank');
                 }}
               >
-                <DoneIcon />
+                <NewIcon />
               </StyledIconWrapper>
             </Tooltip>
           )}

apps/web/src/components/pure/help-island/style.ts

@@ -37,6 +37,7 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
     color: theme.colors.iconColor,
     ...displayFlex('center', 'center'),
     cursor: 'pointer',
+    fontSize: '24px',
     backgroundColor: theme.colors.pageBackground,
     borderRadius: '5px',
     width: '36px',

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

@@ -1,13 +1,13 @@
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { CloseIcon, DoneIcon } from '@blocksuite/icons';
+import { CloseIcon, NewIcon } from '@blocksuite/icons';
 import { useCallback } from 'react';
 
 import {
   useGuideHidden,
   useGuideHiddenUntilNextUpdate,
 } from '../../../../hooks/affine/use-is-first-load';
-import { StyledListItem } from '../shared-styles';
+import { StyledChangeLog, StyledChangeLogWarper } from '../shared-styles';
 import { StyledLink } from '../style';
 export const ChangeLog = () => {
   const [guideHidden, setGuideHidden] = useGuideHidden();
@@ -30,10 +30,10 @@ export const ChangeLog = () => {
     return <></>;
   }
   return (
-    <>
-      <StyledListItem data-testid="change-log">
+    <StyledChangeLogWarper>
+      <StyledChangeLog data-testid="change-log">
         <StyledLink href={'https://affine.pro'} target="_blank">
-          <DoneIcon />
+          <NewIcon />
           {t("Discover what's new!")}
         </StyledLink>
         <IconButton
@@ -44,8 +44,8 @@ export const ChangeLog = () => {
         >
           <CloseIcon />
         </IconButton>
-      </StyledListItem>
-    </>
+      </StyledChangeLog>
+    </StyledChangeLogWarper>
   );
 };
 

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

@@ -1,4 +1,10 @@
-import { alpha, displayFlex, styled, textEllipsis } from '@affine/component';
+import {
+  alpha,
+  displayFlex,
+  keyframes,
+  styled,
+  textEllipsis,
+} from '@affine/component';
 
 export const StyledListItem = styled('div')<{
   active?: boolean;
@@ -100,3 +106,70 @@ export const StyledCollapseItem = styled('div')<{
         },
   };
 });
+
+const slideIn = keyframes({
+  '0%': {
+    height: '0px',
+  },
+  '50%': {
+    height: '36px',
+  },
+  '100%': {
+    height: '32px',
+  },
+});
+const slideIn2 = keyframes({
+  '0%': {
+    transform: 'translateX(100%)',
+  },
+  '50%': {
+    transform: 'translateX(100%)',
+  },
+  '80%': {
+    transform: 'translateX(-10%)',
+  },
+  '100%': {
+    transform: 'translateX(0%)',
+  },
+});
+
+export const StyledChangeLog = styled('div')(({ theme }) => {
+  return {
+    width: '110%',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    color: theme.colors.primaryColor,
+    backgroundColor: theme.colors.hoverBackground,
+    border: `1px solid ${theme.colors.primaryColor}`,
+    borderRight: 'none',
+    padding: '0 0 0 16px',
+    borderRadius: '16px 0 0 16px',
+    cursor: 'pointer',
+    zIndex: 1001,
+    position: 'absolute',
+    userSelect: 'none',
+    transition: 'all 0.3s',
+    animation: `${slideIn2} 1s ease-in-out forwards `,
+    '> svg, a > svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+      color: theme.colors.primaryColor,
+    },
+    button: {
+      marginRight: '10%',
+    },
+  };
+});
+export const StyledChangeLogWarper = styled('div')(({ theme }) => {
+  return {
+    width: 'calc(100% + 4px)',
+    height: '0px',
+    animation: `${slideIn} .5s ease-in-out forwards`,
+    ...displayFlex('flex-start', 'center'),
+    marginBottom: '4px',
+    position: 'relative',
+    userSelect: 'none',
+    transition: 'all 0.3s',
+    overflow: 'hidden',
+  };
+});

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

@@ -34,7 +34,7 @@ export const StyledSliderBar = styled('div')(({ theme }) => {
     flexShrink: 0,
     display: 'flex',
     flexDirection: 'column',
-    overflow: 'hidden',
+    // overflow: 'hidden',
   };
 });
 export const StyledSidebarSwitchWrapper = styled('div')(() => {
@@ -52,8 +52,8 @@ export const StyledSidebarSwitchWrapper = styled('div')(() => {
 export const StyledSliderBarInnerWrapper = styled('div')(() => {
   return {
     flexGrow: 1,
-    overflowX: 'hidden',
-    overflowY: 'auto',
+    // overflowX: 'hidden',
+    // overflowY: 'auto',
     position: 'relative',
   };
 });