feat: refactor button with new design (#3343)

packages/component/src/components/share-menu/disable-public-link/index.tsx

@@ -1,10 +1,9 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import { Modal, ModalCloseButton } from '../../..';
+import { Button } from '../../../ui/button';
 import {
-  StyledButton,
   StyledButtonContent,
-  StyledDangerButton,
   StyledModalHeader,
   StyledModalWrapper,
   StyledTextContent,
@@ -33,8 +32,9 @@ export const PublicLinkDisableModal = ({
         </StyledTextContent>
 
         <StyledButtonContent>
-          <StyledButton onClick={onClose}>{t['Cancel']()}</StyledButton>
-          <StyledDangerButton
+          <Button onClick={onClose}>{t['Cancel']()}</Button>
+          <Button
+            type="error"
             data-testid="disable-public-link-confirm-button"
             onClick={() => {
               onConfirmDisable();
@@ -43,7 +43,7 @@ export const PublicLinkDisableModal = ({
             style={{ marginLeft: '24px' }}
           >
             {t['Disable']()}
-          </StyledDangerButton>
+          </Button>
         </StyledButtonContent>
       </StyledModalWrapper>
     </Modal>

packages/component/src/components/share-menu/disable-public-link/style.ts

@@ -1,4 +1,4 @@
-import { styled, TextButton } from '../../..';
+import { styled } from '../../..';
 
 export const StyledModalWrapper = styled('div')(() => {
   return {
@@ -40,24 +40,3 @@ export const StyledButtonContent = styled('div')(() => {
     justifyContent: 'center',
   };
 });
-export const StyledButton = styled(TextButton)(() => {
-  return {
-    color: 'var(--affine-primary-color)',
-    height: '32px',
-    background: '#F3F0FF',
-    border: 'none',
-    borderRadius: '8px',
-    padding: '4px 20px',
-  };
-});
-export const StyledDangerButton = styled(TextButton)(() => {
-  return {
-    color: '#FF631F',
-    height: '32px',
-    background:
-      'linear-gradient(0deg, rgba(255, 99, 31, 0.1), rgba(255, 99, 31, 0.1)), #FFFFFF;',
-    border: 'none',
-    borderRadius: '8px',
-    padding: '4px 20px',
-  };
-});

packages/component/src/components/share-menu/share-menu.tsx

@@ -9,12 +9,13 @@ import type { FC } from 'react';
 import { useRef } from 'react';
 import { useCallback, useState } from 'react';
 
+import { Button } from '../../ui/button';
 import { Menu } from '../../ui/menu/menu';
 import { Export } from './export';
 import { containerStyle, indicatorContainerStyle, tabStyle } from './index.css';
 import { SharePage } from './share-page';
 import { ShareWorkspace } from './share-workspace';
-import { StyledIndicator, StyledShareButton, TabItem } from './styles';
+import { StyledIndicator, TabItem } from './styles';
 type SharePanel = 'SharePage' | 'Export' | 'ShareWorkspace';
 const MenuItems: Record<SharePanel, FC<ShareMenuProps>> = {
   SharePage: SharePage,
@@ -134,15 +135,15 @@ export const ShareMenu: FC<ShareMenuProps> = props => {
         setOpen(false);
       }}
     >
-      <StyledShareButton
+      <Button
         data-testid="share-menu-button"
         onClick={() => {
           setOpen(!open);
         }}
-        isShared={isPublic}
+        type={isPublic ? 'primary' : undefined}
       >
         <div>{isPublic ? 'Shared' : 'Share'}</div>
-      </StyledShareButton>
+      </Button>
     </Menu>
   );
 };

packages/component/src/components/share-menu/share-page.tsx

@@ -7,7 +7,7 @@ import type { FC } from 'react';
 import { useState } from 'react';
 import { useCallback, useMemo } from 'react';
 
-import { toast } from '../..';
+import { Button, toast } from '../..';
 import { PublicLinkDisableModal } from './disable-public-link';
 import {
   descriptionStyle,
@@ -15,26 +15,22 @@ import {
   menuItemStyle,
 } from './index.css';
 import type { ShareMenuProps } from './share-menu';
-import {
-  StyledButton,
-  StyledDisableButton,
-  StyledInput,
-  StyledLinkSpan,
-} from './styles';
+import { StyledDisableButton, StyledInput, StyledLinkSpan } from './styles';
 
 export const LocalSharePage: FC<ShareMenuProps> = props => {
   const t = useAFFiNEI18N();
   return (
     <div className={menuItemStyle}>
       <div className={descriptionStyle}>{t['Shared Pages Description']()}</div>
-      <StyledButton
+      <Button
+        type="primary"
         data-testid="share-menu-enable-affine-cloud-button"
         onClick={() => {
           props.onEnableAffineCloud(props.workspace as LocalWorkspace);
         }}
       >
         {t['Enable AFFiNE Cloud']()}
-      </StyledButton>
+      </Button>
     </div>
   );
 };
@@ -74,20 +70,20 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
           value={isPublic ? sharingUrl : 'https://app.affine.pro/xxxx'}
         />
         {!isPublic && (
-          <StyledButton
+          <Button
             data-testid="affine-share-create-link"
             onClick={onClickCreateLink}
           >
             {t['Create']()}
-          </StyledButton>
+          </Button>
         )}
         {isPublic && (
-          <StyledButton
+          <Button
             data-testid="affine-share-copy-link"
             onClick={onClickCopyLink}
           >
             {t['Copy Link']()}
-          </StyledButton>
+          </Button>
         )}
       </div>
       <div className={descriptionStyle}>

packages/component/src/components/share-menu/share-workspace.tsx

@@ -6,9 +6,9 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { FC } from 'react';
 
+import { Button } from '../../ui/button';
 import { descriptionStyle, menuItemStyle } from './index.css';
 import type { ShareMenuProps } from './share-menu';
-import { StyledButton } from './styles';
 
 const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
   const t = useAFFiNEI18N();
@@ -17,14 +17,14 @@ const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
       <div className={descriptionStyle}>
         {t['Share Menu Public Workspace Description1']()}
       </div>
-      <StyledButton
+      <Button
         data-testid="share-menu-enable-affine-cloud-button"
         onClick={() => {
           props.onOpenWorkspaceSettings(props.workspace);
         }}
       >
         {t['Open Workspace Settings']()}
-      </StyledButton>
+      </Button>
     </div>
   );
 };
@@ -42,14 +42,14 @@ const ShareAffineWorkspace: FC<
           ? t['Share Menu Public Workspace Description2']()
           : t['Share Menu Public Workspace Description1']()}
       </div>
-      <StyledButton
+      <Button
         data-testid="share-menu-publish-to-web-button"
         onClick={() => {
           props.onOpenWorkspaceSettings(props.workspace);
         }}
       >
         {t['Open Workspace Settings']()}
-      </StyledButton>
+      </Button>
     </div>
   );
 };

packages/component/src/components/share-menu/styles.ts

@@ -1,34 +1,4 @@
-import { Button, displayFlex, styled, TextButton } from '../..';
-
-export const StyledShareButton = styled(TextButton, {
-  shouldForwardProp: (prop: string) => prop !== 'isShared',
-})<{ isShared?: boolean }>(({ isShared }) => {
-  return {
-    padding: '4px 8px',
-    marginLeft: '4px',
-    marginRight: '16px',
-    border: `1px solid ${
-      isShared ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)'
-    }`,
-    color: isShared
-      ? 'var(--affine-primary-color)'
-      : 'var(--affine-icon-color)',
-    borderRadius: '8px',
-    ':hover': {
-      border: `1px solid ${'var(--affine-primary-color)'}`,
-    },
-    span: {
-      ...displayFlex('center', 'center'),
-    },
-  };
-});
-
-export const StyledTabsWrapper = styled('div')(() => {
-  return {
-    ...displayFlex('space-around', 'center'),
-    position: 'relative',
-  };
-});
+import { Button, displayFlex, styled } from '../..';
 
 export const TabItem = styled('li')<{ isActive?: boolean }>(({ isActive }) => {
   {
@@ -99,16 +69,6 @@ export const StyledInput = styled('input')(() => {
     marginRight: '10px',
   };
 });
-export const StyledButton = styled(TextButton)(() => {
-  return {
-    color: 'var(--affine-primary-color)',
-    height: '32px',
-    background: '#F3F0FF',
-    border: 'none',
-    borderRadius: '8px',
-    padding: '4px 20px',
-  };
-});
 export const StyledDisableButton = styled(Button)(() => {
   return {
     color: '#FF631F',