feat: refactor button with new design (#3343)

apps/core/src/components/affine/create-workspace-modal/index.tsx

@@ -79,7 +79,7 @@ const NameWorkspaceContent = ({
       <div className={style.buttonGroup}>
         <Button
           data-testid="create-workspace-close-button"
-          type="light"
+          type="primary"
           onClick={onClose}
         >
           {t.Cancel()}
@@ -155,7 +155,7 @@ const SetDBLocationContent = ({
         <Button
           disabled={opening}
           data-testid="create-workspace-customize-button"
-          type="light"
+          type="primary"
           onClick={handleSelectDBFileLocation}
         >
           {t['Customize']()}

apps/core/src/components/affine/language-menu/index.tsx

@@ -47,7 +47,7 @@ const LanguageMenuContent: FC<{
     </>
   );
 };
-export const LanguageMenu: FC<{ triggerProps: ButtonProps }> = ({
+export const LanguageMenu: FC<{ triggerProps?: ButtonProps }> = ({
   triggerProps,
 }) => {
   const i18n = useI18N();

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -99,7 +99,7 @@ export const WorkspaceDeleteModal = ({
             data-testid="delete-workspace-confirm-button"
             disabled={!allowDelete}
             onClick={handleDelete}
-            type="danger"
+            type="error"
             shape="circle"
             style={{ marginLeft: '24px' }}
           >

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/index.tsx

@@ -37,7 +37,7 @@ export const WorkspaceLeave = ({ open, onClose }: WorkspaceDeleteProps) => {
           </Button>
           <Button
             onClick={handleLeave}
-            type="danger"
+            type="error"
             shape="circle"
             style={{ marginLeft: '24px' }}
           >

apps/core/src/components/affine/new-workspace-setting-detail/export.tsx

@@ -14,7 +14,6 @@ export const ExportPanel: FC<{
     <>
       <SettingRow name={t['Export']()} desc={t['Export Description']()}>
         <Button
-          size="small"
           data-testid="export-affine-backup"
           onClick={async () => {
             const result = await window.apis?.dialog.saveDBFileAs(workspaceId);

apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -84,13 +84,12 @@ export const ProfilePanel: FC<{
         />
         {input === workspace.blockSuiteWorkspace.meta.name ? null : (
           <IconButton
-            size="middle"
             data-testid="save-workspace-name"
             onClick={() => {
               handleUpdateWorkspaceName(input);
             }}
+            active={true}
             style={{
-              color: 'var(--affine-primary-color)',
               marginLeft: '12px',
             }}
           >

apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx

@@ -74,7 +74,7 @@ const PublishPanelAffine: FC<PublishPanelAffineProps> = props => {
       <FlexWrapper justifyContent="space-between">
         <Button
           className={style.urlButton}
-          size="middle"
+          size="large"
           onClick={useCallback(() => {
             window.open(shareUrl, '_blank');
           }, [shareUrl])}
@@ -82,7 +82,7 @@ const PublishPanelAffine: FC<PublishPanelAffineProps> = props => {
         >
           {shareUrl}
         </Button>
-        <Button size="middle" onClick={copyUrl}>
+        <Button size="large" onClick={copyUrl}>
           {t['Copy']()}
         </Button>
       </FlexWrapper>

apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx

@@ -79,14 +79,13 @@ export const StoragePanel: FC<{
             <Button
               data-testid="move-folder"
               className={style.urlButton}
-              size="middle"
+              size="large"
               onClick={handleMoveTo}
             >
               {secondaryPath}
             </Button>
           </Tooltip>
           <Button
-            size="small"
             data-testid="reveal-folder"
             data-disabled={moveToInProgress}
             onClick={onRevealDBFile}
@@ -96,7 +95,6 @@ export const StoragePanel: FC<{
         </FlexWrapper>
       ) : (
         <Button
-          size="small"
           data-testid="move-folder"
           data-disabled={moveToInProgress}
           onClick={handleMoveTo}

apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -32,11 +32,7 @@ export const ThemeSettings = () => {
         [setTheme]
       )}
     >
-      <RadioButton
-        bold={true}
-        value="system"
-        data-testid="system-theme-trigger"
-      >
+      <RadioButton value="system" data-testid="system-theme-trigger">
         {t['system']()}
       </RadioButton>
       <RadioButton bold={true} value="light" data-testid="light-theme-trigger">
@@ -117,7 +113,7 @@ export const AppearanceSettings = () => {
           desc={t['Select the language for the interface.']()}
         >
           <div className={settingWrapper}>
-            <LanguageMenu triggerProps={{ size: 'small' }} />
+            <LanguageMenu />
           </div>
         </SettingRow>
         {environment.isDesktop ? (

apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx

@@ -45,7 +45,7 @@ const CommonMenu = () => {
         disablePortal={true}
         trigger="click"
       >
-        <IconButton data-testid="editor-option-menu" iconSize={[24, 24]}>
+        <IconButton data-testid="editor-option-menu">
           <MoreVerticalIcon />
         </IconButton>
       </Menu>
@@ -138,7 +138,7 @@ const PageMenu = () => {
           disablePortal={true}
           trigger="click"
         >
-          <IconButton data-testid="editor-option-menu" iconSize={[24, 24]}>
+          <IconButton data-testid="editor-option-menu">
             <MoreVerticalIcon />
           </IconButton>
         </Menu>

apps/core/src/components/blocksuite/workspace-header/header-right-items/language-menu.tsx

@@ -51,13 +51,13 @@ export const LanguageMenu: React.FC = () => {
           disablePortal={true}
         >
           <StyledButton
+            type="plain"
             icon={
               <StyledArrowDownContainer>
                 <ArrowDownSmallIcon />
               </StyledArrowDownContainer>
             }
             iconPosition="end"
-            noBorder={true}
             data-testid="language-menu-button"
           >
             <StyledCurrentLanguage>

apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx

@@ -31,7 +31,6 @@ export const TrashButtonGroup = () => {
   return (
     <>
       <Button
-        bold={true}
         shape="round"
         style={{ marginRight: '24px' }}
         onClick={() => {
@@ -41,9 +40,8 @@ export const TrashButtonGroup = () => {
         {t['Restore it']()}
       </Button>
       <Button
-        bold={true}
         shape="round"
-        type="danger"
+        type="error"
         onClick={() => {
           setOpen(true);
         }}
@@ -54,7 +52,7 @@ export const TrashButtonGroup = () => {
         title={t['TrashButtonGroupTitle']()}
         content={t['TrashButtonGroupDescription']()}
         confirmText={t['Delete']()}
-        confirmType="danger"
+        confirmType="error"
         open={open}
         onConfirm={useCallback(() => {
           jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);

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

@@ -14,8 +14,7 @@ export const Footer: FC = () => {
     <StyledFooter data-testid="workspace-list-modal-footer">
       <StyledSignInButton
         data-testid="sign-in-button"
-        noBorder
-        bold
+        type="plain"
         icon={
           <div className="circle">
             <CloudWorkspaceIcon />

apps/core/src/components/pure/shortcuts-modal/index.tsx

@@ -50,8 +50,6 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
               <ModalCloseButton
                 top={6}
                 right={6}
-                size={[24, 24]}
-                iconSize={[15, 15]}
                 onClick={() => {
                   onClose();
                 }}