diff --git a/apps/electron/yarn.lock b/apps/electron/yarn.lock
index a36e2c89e6..7f074ac731 100644
--- a/apps/electron/yarn.lock
+++ b/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":
- version: 2.1.4
- resolution: "@blocksuite/icons@npm:2.1.4"
+"@blocksuite/icons@npm:2.1.5":
+ version: 2.1.5
+ 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
diff --git a/apps/web/package.json b/apps/web/package.json
index b37f9272a1..e1eb99a07f 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx
index 2b29876d67..fdc2f97ff7 100644
--- a/apps/web/src/components/pure/help-island/index.tsx
+++ b/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');
}}
>
-
+
)}
diff --git a/apps/web/src/components/pure/help-island/style.ts b/apps/web/src/components/pure/help-island/style.ts
index 5d62865e9c..87a17c4af2 100644
--- a/apps/web/src/components/pure/help-island/style.ts
+++ b/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',
diff --git a/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx
index 9bb7e3971a..261b5d8c87 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx
+++ b/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 (
- <>
-
+
+
-
+
{t("Discover what's new!")}
{
>
-
- >
+
+
);
};
diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
index 8d8838a5ef..46b3e4b051 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
+++ b/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',
+ };
+});
diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts
index b8d4532f94..54cca18d25 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/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',
};
});
diff --git a/packages/component/package.json b/packages/component/package.json
index 6587dca4bb..d594e90e35 100644
--- a/packages/component/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index f3b13fac17..1c6445c81c 100644
--- a/yarn.lock
+++ b/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":
- version: 2.1.4
- resolution: "@blocksuite/icons@npm:2.1.4"
+"@blocksuite/icons@npm:2.1.5, @blocksuite/icons@npm:^2.1.5":
+ version: 2.1.5
+ 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