fix: refactor login button, fixed #793

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 && (
-        <StyleSignIn
+        <StyledSignInButton
+          noBorder
+          bold
+          icon={
+            <div className="circle">
+              <CloudInsyncIcon fontSize={16} />
+            </div>
+          }
           onClick={async () => {
             onLogin();
           }}
         >
-          <span>
-            <CloudInsyncIcon fontSize={16} />
-          </span>
           {t('Sign in')}
-        </StyleSignIn>
+        </StyledSignInButton>
       )}
     </StyledFooter>
   );

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