fix: ui issues (#3738)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/core/src/components/pure/footer/index.tsx

@@ -1,11 +1,12 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloudWorkspaceIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
 import { useSetAtom } from 'jotai';
 import { type CSSProperties, forwardRef } from 'react';
 
 import { openDisableCloudAlertModalAtom } from '../../../atoms';
 import { stringToColour } from '../../../utils';
-import { StyledFooter, StyledSignInButton } from './styles';
+import { StyledFooter } from './styles';
 
 export const Footer = () => {
   const t = useAFFiNEI18N();
@@ -13,13 +14,13 @@ export const Footer = () => {
 
   return (
     <StyledFooter data-testid="workspace-list-modal-footer">
-      <StyledSignInButton
+      <Button
         data-testid="sign-in-button"
         type="plain"
         icon={
-          <div className="circle">
-            <CloudWorkspaceIcon />
-          </div>
+          <CloudWorkspaceIcon
+            style={{ color: 'var(--affine-primary-color)' }}
+          />
         }
         onClick={async () => {
           if (!runtimeConfig.enableCloud) {
@@ -28,7 +29,7 @@ export const Footer = () => {
         }}
       >
         {t['Sign in']()}
-      </StyledSignInButton>
+      </Button>
     </StyledFooter>
   );
 };

apps/core/src/components/pure/footer/styles.ts

@@ -1,10 +1,4 @@
-import {
-  displayFlex,
-  displayInlineFlex,
-  styled,
-  textEllipsis,
-} from '@affine/component';
-import { Button } from '@toeverything/components/button';
+import { displayFlex, styled, textEllipsis } from '@affine/component';
 export const StyleWorkspaceInfo = styled('div')(() => {
   return {
     marginLeft: '15px',
@@ -116,21 +110,3 @@ export const StyledModalHeader = styled('div')(() => {
     ...displayFlex('space-between', 'center'),
   };
 });
-
-export const StyledSignInButton = styled(Button)(() => {
-  return {
-    fontWeight: 600,
-    paddingLeft: 0,
-    '.circle': {
-      width: '40px',
-      height: '40px',
-      borderRadius: '20px',
-      backgroundColor: 'var(--affine-hover-color)',
-      color: 'var(--affine-primary-color)',
-      fontSize: '24px',
-      flexShrink: 0,
-      marginRight: '16px',
-      ...displayInlineFlex('center', 'center'),
-    },
-  };
-});