chore: update change log style (#1832)

apps/electron/yarn.lock

@@ -40,7 +40,7 @@ __metadata:
     "@blocksuite/blocks": 0.0.0-20230406032111-01cf598b-nightly
     "@blocksuite/editor": 0.0.0-20230406032111-01cf598b-nightly
     "@blocksuite/global": 0.0.0-20230406032111-01cf598b-nightly
-    "@blocksuite/icons": 2.1.4
+    "@blocksuite/icons": 2.1.5
     "@blocksuite/store": 0.0.0-20230406032111-01cf598b-nightly
     "@emotion/cache": ^11.10.7
     "@emotion/react": ^11.10.6
@@ -1754,13 +1754,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@blocksuite/icons@npm:2.1.4":
+"@blocksuite/icons@npm:2.1.5":
-  version: 2.1.4
+  version: 2.1.5
-  resolution: "@blocksuite/icons@npm:2.1.4"
+  resolution: "@blocksuite/icons@npm:2.1.5"
   peerDependencies:
     "@types/react": ^18.0.25
     react: ^18.2.0
-  checksum: 0eff10845afa389fb23ce73838ee0697eaa2af60313e4ee0c139ee14a9bf103a92057c6af6c3eccb40636751d1fb94aa872533cb41f6e25fed4c3ecc530c28bc
+  checksum: 8452d3f6d6375e597840b240a492f1e414e69f8d7ed677c17ded6409f5a273dfc36509b264e78bdb67d1938cb666575dd5c354d4df189e557b588709a68e019f
   languageName: node
   linkType: hard
 

apps/web/package.json

@@ -19,7 +19,7 @@
     "@affine/workspace": "workspace:*",
     "@blocksuite/blocks": "0.0.0-20230406032111-01cf598b-nightly",
     "@blocksuite/editor": "0.0.0-20230406032111-01cf598b-nightly",
-    "@blocksuite/icons": "^2.1.4",
+    "@blocksuite/icons": "^2.1.5",
     "@blocksuite/store": "0.0.0-20230406032111-01cf598b-nightly",
     "@emotion/cache": "^11.10.7",
     "@emotion/react": "^11.10.6",

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 (
-    <>
+    <StyledChangeLogWarper>
-      <StyledListItem data-testid="change-log">
+      <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',
+    // overflowX: 'hidden',
-    overflowY: 'auto',
+    // overflowY: 'auto',
     position: 'relative',
   };
 });

packages/component/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/blocks": "0.0.0-20230406032111-01cf598b-nightly",
     "@blocksuite/editor": "0.0.0-20230406032111-01cf598b-nightly",
     "@blocksuite/global": "0.0.0-20230406032111-01cf598b-nightly",
-    "@blocksuite/icons": "2.1.4",
+    "@blocksuite/icons": "2.1.5",
     "@blocksuite/store": "0.0.0-20230406032111-01cf598b-nightly",
     "@emotion/cache": "^11.10.7",
     "@emotion/react": "^11.10.6",

yarn.lock

@@ -40,7 +40,7 @@ __metadata:
     "@blocksuite/blocks": 0.0.0-20230406032111-01cf598b-nightly
     "@blocksuite/editor": 0.0.0-20230406032111-01cf598b-nightly
     "@blocksuite/global": 0.0.0-20230406032111-01cf598b-nightly
-    "@blocksuite/icons": 2.1.4
+    "@blocksuite/icons": 2.1.5
     "@blocksuite/store": 0.0.0-20230406032111-01cf598b-nightly
     "@emotion/cache": ^11.10.7
     "@emotion/react": ^11.10.6
@@ -166,7 +166,7 @@ __metadata:
     "@affine/workspace": "workspace:*"
     "@blocksuite/blocks": 0.0.0-20230406032111-01cf598b-nightly
     "@blocksuite/editor": 0.0.0-20230406032111-01cf598b-nightly
-    "@blocksuite/icons": ^2.1.4
+    "@blocksuite/icons": ^2.1.5
     "@blocksuite/store": 0.0.0-20230406032111-01cf598b-nightly
     "@emotion/cache": ^11.10.7
     "@emotion/react": ^11.10.6
@@ -1791,13 +1791,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@blocksuite/icons@npm:2.1.4, @blocksuite/icons@npm:^2.1.4":
+"@blocksuite/icons@npm:2.1.5, @blocksuite/icons@npm:^2.1.5":
-  version: 2.1.4
+  version: 2.1.5
-  resolution: "@blocksuite/icons@npm:2.1.4"
+  resolution: "@blocksuite/icons@npm:2.1.5"
   peerDependencies:
     "@types/react": ^18.0.25
     react: ^18.2.0
-  checksum: 0eff10845afa389fb23ce73838ee0697eaa2af60313e4ee0c139ee14a9bf103a92057c6af6c3eccb40636751d1fb94aa872533cb41f6e25fed4c3ecc530c28bc
+  checksum: 8452d3f6d6375e597840b240a492f1e414e69f8d7ed677c17ded6409f5a273dfc36509b264e78bdb67d1938cb666575dd5c354d4df189e557b588709a68e019f
   languageName: node
   linkType: hard