diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx
index 11aa3de52b..2c374a9900 100644
--- a/packages/app/src/components/create-workspace/index.tsx
+++ b/packages/app/src/components/create-workspace/index.tsx
@@ -57,6 +57,8 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
{
setWorkspaceName(value);
}}
diff --git a/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx b/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx
index 5f32ed0417..fff76d86d8 100644
--- a/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx
+++ b/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx
@@ -63,7 +63,7 @@ export const EnableWorkspaceModal = ({
onClose();
}}
>
- {t('Skip')}
+ {t('Not now')}
diff --git a/packages/app/src/components/header/header-right-items/SyncUser.tsx b/packages/app/src/components/header/header-right-items/SyncUser.tsx
index 60af1b461a..0923de9893 100644
--- a/packages/app/src/components/header/header-right-items/SyncUser.tsx
+++ b/packages/app/src/components/header/header-right-items/SyncUser.tsx
@@ -1,15 +1,41 @@
-import { CloudUnsyncedIcon, CloudInsyncIcon } from '@blocksuite/icons';
+import { CloudUnsyncedIcon } from '@blocksuite/icons';
import { useModal } from '@/providers/GlobalModalProvider';
import { useAppState } from '@/providers/app-state-provider';
import { IconButton } from '@/ui/button';
+// Temporary solution to use this component, since the @blocksuite/icons has not been published yet
+const DefaultSyncIcon = () => {
+ return (
+
+ );
+};
export const SyncUser = () => {
const { triggerLoginModal } = useModal();
const appState = useAppState();
return appState.user ? (
-
+
) : (
{
+ return (
+
+ );
+};
diff --git a/packages/app/src/components/login-modal/Icons.tsx b/packages/app/src/components/login-modal/Icons.tsx
deleted file mode 100644
index 12356f60d3..0000000000
--- a/packages/app/src/components/login-modal/Icons.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CloudUnsyncedIcon } from '@blocksuite/icons';
-import { styled } from '@/styles';
-import GoogleSvg from './google.svg';
-
-export const GoogleIcon = () => {
- return (
-
-
- 
-
-
- );
-};
-
-const GoogleIconWrapper = styled('div')(({ theme }) => ({
- background: theme.colors.pageBackground,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
-}));
-
-export const StayLogOutIcon = () => {
- return (
-
-
-
- );
-};
-
-const StayLogOutWrapper = styled('div')(({ theme }) => {
- return {
- width: '48px',
- height: '48px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- fontSize: '24px',
- background: theme.colors.hoverBackground,
- };
-});
diff --git a/packages/app/src/components/login-modal/LoginOptionButton.tsx b/packages/app/src/components/login-modal/LoginOptionButton.tsx
deleted file mode 100644
index f104efc58b..0000000000
--- a/packages/app/src/components/login-modal/LoginOptionButton.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { styled } from '@/styles';
-import { Button } from '@/ui/button';
-import { GoogleIcon, StayLogOutIcon } from './Icons';
-import { useTranslation } from '@affine/i18n';
-export const GoogleLoginButton = () => {
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
- {t('Continue with Google')}
-
-
- );
-};
-
-export const StayLogOutButton = () => {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
- {t('Stay logged out')}
- {t('All changes are saved locally')}
-
-
-
- );
-};
-
-const StyledGoogleButton = styled('div')(({ theme }) => {
- return {
- width: '284px',
- height: '40px',
- marginTop: '30px',
- fontSize: '16px',
- cursor: 'pointer',
- borderRadius: '40px',
- border: `1px solid ${theme.colors.iconColor}`,
- overflow: 'hidden',
- ':hover': {
- border: `1px solid ${theme.colors.primaryColor}`,
- },
- };
-});
-
-const StyledStayLogOutButton = styled(Button)(() => {
- return {
- width: '361px',
- height: '56px',
- padding: '4px',
- ':hover': {
- borderColor: '#6880FF',
- },
- };
-});
-
-const ButtonWrapper = styled('div')({
- display: 'flex',
- flexDirection: 'row',
- width: '100%',
-});
-
-const IconWrapper = styled('div')({
- flex: '0 48px',
- borderRadius: '5px',
- overflow: 'hidden',
- marginRight: '12px',
- marginTop: '8px',
-});
-
-const TextWrapper = styled('div')({
- flex: 1,
- textAlign: 'left',
- height: '40px',
- lineHeight: '40px',
-});
-
-const Title = styled('h1')(() => {
- return {
- fontSize: '18px',
- lineHeight: '26px',
- fontWeight: 500,
- };
-});
-
-const Description = styled('p')(() => {
- return {
- fontSize: '16px',
- lineHeight: '22px',
- fontWeight: 400,
- };
-});
diff --git a/packages/app/src/components/login-modal/google.svg b/packages/app/src/components/login-modal/google.svg
deleted file mode 100644
index 23af746fed..0000000000
--- a/packages/app/src/components/login-modal/google.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx
index 8c15c24417..880ebe6e38 100644
--- a/packages/app/src/components/login-modal/index.tsx
+++ b/packages/app/src/components/login-modal/index.tsx
@@ -1,8 +1,9 @@
-import { styled } from '@/styles';
+import { positionAbsolute, styled } from '@/styles';
import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { GoogleLoginButton } from './LoginOptionButton';
+import { Button } from '@/ui/button';
import { useAppState } from '@/providers/app-state-provider';
import { useTranslation } from '@affine/i18n';
+import { GoogleIcon } from './GoogleIcon';
interface LoginModalProps {
open: boolean;
onClose: () => void;
@@ -13,34 +14,41 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
const { t } = useTranslation();
return (
-
-
- {
- onClose();
- }}
- />
-
+
+ {
+ onClose();
+ }}
+ />
{t('Sign in')}
{t('Set up an AFFiNE account to sync data')}
- {
await login();
onClose();
}}
>
-
-
+
+ {t('Continue with Google')}
+
);
};
-const Header = styled('div')({
- position: 'relative',
- height: '44px',
+const StyledLoginButton = styled(Button)(() => {
+ return {
+ width: '284px',
+ marginTop: '30px',
+ position: 'relative',
+ svg: {
+ ...positionAbsolute({ left: '18px', top: '0', bottom: '0' }),
+ margin: 'auto',
+ },
+ };
});
const Content = styled('div')({
diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx
index 8fd8df83b7..9a591e197c 100644
--- a/packages/app/src/components/workspace-modal/Footer.tsx
+++ b/packages/app/src/components/workspace-modal/Footer.tsx
@@ -3,9 +3,9 @@ import { FlexWrapper } from '@/ui/layout';
import { WorkspaceAvatar } from '@/components/workspace-avatar';
import { IconButton } from '@/ui/button';
import { useAppState } from '@/providers/app-state-provider';
-import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles';
+import { StyledFooter, StyleUserInfo, StyledSignInButton } from './styles';
import { useTranslation } from '@affine/i18n';
-
+import { Tooltip } from '@/ui/tooltip';
export const Footer = ({
onLogin,
onLogout,
@@ -31,27 +31,33 @@ export const Footer = ({
{user.email}
- {
- onLogout();
- }}
- >
-
-
+
+ {
+ onLogout();
+ }}
+ >
+
+
+
)}
{!user && (
-
+
+
+ }
onClick={async () => {
onLogin();
}}
>
-
-
-
{t('Sign in')}
-
+
)}
);
diff --git a/packages/app/src/components/workspace-modal/styles.ts b/packages/app/src/components/workspace-modal/styles.ts
index 6796c3a57b..7c2cc9a378 100644
--- a/packages/app/src/components/workspace-modal/styles.ts
+++ b/packages/app/src/components/workspace-modal/styles.ts
@@ -1,4 +1,5 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, displayInlineFlex, styled, textEllipsis } from '@/styles';
+import { Button } from '@/ui/button';
export const StyledSplitLine = styled.div(({ theme }) => {
return {
@@ -29,6 +30,8 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
+ maxWidth: '200px',
+ ...textEllipsis(1),
};
});
@@ -80,28 +83,6 @@ export const StyleUserInfo = styled.div(({ theme }) => {
};
});
-export const StyleSignIn = styled.div(({ theme }) => {
- return {
- cursor: 'pointer',
- fontSize: '16px',
- fontWeight: 700,
- color: theme.colors.iconColor,
- span: {
- display: 'inline-block',
- width: '40px',
- height: '40px',
- borderRadius: '40px',
- backgroundColor: theme.colors.innerHoverBackground,
- textAlign: 'center',
- lineHeight: '44px',
- marginRight: '16px',
- svg: {
- fill: theme.colors.primaryColor,
- },
- },
- };
-});
-
export const StyledModalHeaderLeft = styled.div(() => {
return { ...displayFlex('flex-start', 'center') };
});
@@ -160,3 +141,19 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
...displayFlex('space-between', 'center'),
};
});
+
+export const StyledSignInButton = styled(Button)(({ theme }) => {
+ return {
+ fontWeight: 700,
+ paddingLeft: 0,
+ '.circle': {
+ width: '40px',
+ height: '40px',
+ borderRadius: '20px',
+ backgroundColor: theme.colors.innerHoverBackground,
+ flexShrink: 0,
+ marginRight: '16px',
+ ...displayInlineFlex('center', 'center'),
+ },
+ };
+});
diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index 5b5bc26843..ca2cf197b7 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -85,8 +85,8 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
height={32}
value={workspaceName}
placeholder={t('Workspace Name')}
- maxLength={14}
- minLength={1}
+ maxLength={15}
+ minLength={0}
disabled={!isOwner}
onChange={handleChangeWorkSpaceName}
>
diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts
index 8310f3cfaa..74f6092402 100644
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -145,6 +145,7 @@ export const StyledButton = styled('button', {
shouldForwardProp: prop => {
return ![
'hoverBackground',
+ 'shape',
'hoverColor',
'hoverStyle',
'type',
@@ -203,6 +204,9 @@ export const StyledButton = styled('button', {
'.affine-button-icon': {
color: theme.colors.iconColor,
},
+ '.affine-button-icon__fixed': {
+ color: theme.colors.iconColor,
+ },
'>span': {
marginLeft: '5px',
width: '100%',
diff --git a/packages/app/src/ui/input/Input.tsx b/packages/app/src/ui/input/Input.tsx
index 1ca8b8684f..0b4610d86a 100644
--- a/packages/app/src/ui/input/Input.tsx
+++ b/packages/app/src/ui/input/Input.tsx
@@ -38,8 +38,9 @@ export const Input = (props: inputProps) => {
if (
(maxLength && e.target.value.length > maxLength) ||
(minLength && e.target.value.length < minLength)
- )
+ ) {
return;
+ }
setValue(e.target.value);
onChange && onChange(e.target.value);
};
diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json
index d7c00b1d30..448a19db5c 100644
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@@ -128,7 +128,7 @@
"Enable AFFiNE Cloud Description": "If enabled, the data in this workspace will be backed up and synchronised via AFFiNE Cloud.",
"Enable": "Enable",
"Sign in and Enable": "Sign in and Enable",
- "Skip": "Skip",
+ "Not now": "Not now",
"Publishing": "Publishing to web requires AFFiNE Cloud service.",
"Share with link": "Share with link",
"Copy Link": "Copy Link",
diff --git a/packages/i18n/src/resources/zh-Hans.json b/packages/i18n/src/resources/zh-Hans.json
index c2b70cba98..93f4a2e351 100644
--- a/packages/i18n/src/resources/zh-Hans.json
+++ b/packages/i18n/src/resources/zh-Hans.json
@@ -128,7 +128,7 @@
"Enable AFFiNE Cloud Description": "如启用，此工作区中的数据将通过AFFiNE Cloud进行备份和同步。",
"Enable": "启动",
"Sign in and Enable": "登录并启用",
- "Skip": "跳过",
+ "Not now": "下次再说",
"Publishing": "发布到web需要AFFiNE云服务。",
"Share with link": "通过链接分享",
"Copy Link": "复制链接",