From dd19c947a98c9eba6799b86af1d9214a918317ec Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 6 Feb 2023 16:33:45 +0800 Subject: [PATCH 01/10] fix: text is not center in login button, fixed #789 --- .../src/components/login-modal/GoogleIcon.tsx | 28 ++++++ .../app/src/components/login-modal/Icons.tsx | 40 -------- .../login-modal/LoginOptionButton.tsx | 99 ------------------- .../app/src/components/login-modal/google.svg | 6 -- .../app/src/components/login-modal/index.tsx | 40 +++++--- packages/app/src/ui/button/styles.ts | 4 + 6 files changed, 56 insertions(+), 161 deletions(-) create mode 100644 packages/app/src/components/login-modal/GoogleIcon.tsx delete mode 100644 packages/app/src/components/login-modal/Icons.tsx delete mode 100644 packages/app/src/components/login-modal/LoginOptionButton.tsx delete mode 100644 packages/app/src/components/login-modal/google.svg diff --git a/packages/app/src/components/login-modal/GoogleIcon.tsx b/packages/app/src/components/login-modal/GoogleIcon.tsx new file mode 100644 index 0000000000..f0454955cb --- /dev/null +++ b/packages/app/src/components/login-modal/GoogleIcon.tsx @@ -0,0 +1,28 @@ +export const GoogleIcon = () => { + 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 ( - - - Google - - - ); -}; - -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/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%', From f47af2d5469cbe5f19c70b4d92ebeea0d234256d Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 6 Feb 2023 16:34:14 +0800 Subject: [PATCH 02/10] fix: add hint in sinout button, fixed #790 --- .../src/components/workspace-modal/Footer.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index 8fd8df83b7..6517af5cfe 100644 --- a/packages/app/src/components/workspace-modal/Footer.tsx +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -5,7 +5,7 @@ import { IconButton } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles'; import { useTranslation } from '@affine/i18n'; - +import { Tooltip } from '@/ui/tooltip'; export const Footer = ({ onLogin, onLogout, @@ -31,13 +31,15 @@ export const Footer = ({

{user.email}

- { - onLogout(); - }} - > - - + + { + onLogout(); + }} + > + + + )} From 56f10bbf50deaec5671336c0d180c7671cdac096 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 6 Feb 2023 16:55:54 +0800 Subject: [PATCH 03/10] fix: refactor login button, fixed #793 --- .../src/components/workspace-modal/Footer.tsx | 16 +++++--- .../src/components/workspace-modal/styles.ts | 41 ++++++++----------- 2 files changed, 28 insertions(+), 29 deletions(-) diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index 6517af5cfe..9a591e197c 100644 --- a/packages/app/src/components/workspace-modal/Footer.tsx +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -3,7 +3,7 @@ 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 = ({ @@ -44,16 +44,20 @@ export const Footer = ({ )} {!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..3c48b5e062 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 } from '@/styles'; +import { Button } from '@/ui/button'; export const StyledSplitLine = styled.div(({ theme }) => { return { @@ -80,28 +81,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 +139,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'), + }, + }; +}); From de43f3f0e26525c5bd001b05ab5357629f965018 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 6 Feb 2023 17:27:26 +0800 Subject: [PATCH 04/10] fix: long text style error in workspace card, fixed #811 --- packages/app/src/components/workspace-modal/styles.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/app/src/components/workspace-modal/styles.ts b/packages/app/src/components/workspace-modal/styles.ts index 3c48b5e062..950067f93d 100644 --- a/packages/app/src/components/workspace-modal/styles.ts +++ b/packages/app/src/components/workspace-modal/styles.ts @@ -1,5 +1,6 @@ -import { displayFlex, displayInlineFlex, styled } from '@/styles'; +import { displayFlex, displayInlineFlex, styled, textEllipsis } from '@/styles'; import { Button } from '@/ui/button'; +import text from '*.md'; export const StyledSplitLine = styled.div(({ theme }) => { return { @@ -30,6 +31,8 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => { fontWeight: 600, lineHeight: '24px', marginBottom: '10px', + maxWidth: '200px', + ...textEllipsis(1), }; }); From ab4feb04ba1872dfed03d7dba1d7475b19209aca Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 6 Feb 2023 18:23:38 +0800 Subject: [PATCH 05/10] fix: limit workspace name length when created, fixed #809 --- packages/app/src/components/create-workspace/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 11aa3de52b..2c17e6a241 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -58,7 +58,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => { onKeyDown={handleKeyDown} placeholder={t('Set a Workspace name')} onChange={value => { - setWorkspaceName(value); + setWorkspaceName(value.slice(0, 15)); }} >