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 (
-
-
- 
-
-
- );
-};
-
-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%',