From dd19c947a98c9eba6799b86af1d9214a918317ec Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 6 Feb 2023 16:33:45 +0800 Subject: [PATCH] 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 000000000..f0454955c --- /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 12356f60d..000000000 --- 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 f104efc58..000000000 --- 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 23af746fe..000000000 --- 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 8c15c2441..880ebe6e3 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 8310f3cfa..74f609240 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%',