fix(component): adjust dialog and input style (#4566)

apps/core/package.json

@@ -40,7 +40,7 @@
     "@mui/material": "^5.14.13",
     "@radix-ui/react-select": "^2.0.0",
     "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.43",
+    "@toeverything/components": "^0.0.45",
     "async-call-rpc": "^6.3.1",
     "css-spring": "^4.1.0",
     "cssnano": "^6.0.1",

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

@@ -3,7 +3,11 @@ import { DebugLogger } from '@affine/debug';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { HelpIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
-import { Modal } from '@toeverything/components/modal';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+  Modal,
+} from '@toeverything/components/modal';
 import { Tooltip } from '@toeverything/components/tooltip';
 import type {
   LoadDBFileResult,
@@ -34,14 +38,13 @@ interface ModalProps {
   onCreate: (id: string) => void;
 }
 
-interface NameWorkspaceContentProps {
+interface NameWorkspaceContentProps extends ConfirmModalProps {
-  onClose: () => void;
   onConfirmName: (name: string) => void;
 }
 
 const NameWorkspaceContent = ({
   onConfirmName,
-  onClose,
+  ...props
 }: NameWorkspaceContentProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
 
@@ -59,11 +62,23 @@ const NameWorkspaceContent = ({
   );
   const t = useAFFiNEI18N();
   return (
-    <div className={style.content}>
+    <ConfirmModal
-      <div className={style.contentTitle}>
+      defaultOpen={true}
-        {t['com.affine.nameWorkspace.title']()}
+      title={t['com.affine.nameWorkspace.title']()}
-      </div>
+      description={t['com.affine.nameWorkspace.description']()}
-      <p>{t['com.affine.nameWorkspace.description']()}</p>
+      cancelText={t['com.affine.nameWorkspace.button.cancel']()}
+      confirmButtonOptions={{
+        type: 'primary',
+        disabled: !workspaceName,
+        ['data-testid' as string]: 'create-workspace-create-button',
+        children: t['com.affine.nameWorkspace.button.create'](),
+      }}
+      closeButtonOptions={{
+        ['data-testid' as string]: 'create-workspace-close-button',
+      }}
+      onConfirm={handleCreateWorkspace}
+      {...props}
+    >
       <Input
         ref={ref => {
           if (ref) {
@@ -76,24 +91,9 @@ const NameWorkspaceContent = ({
         maxLength={64}
         minLength={0}
         onChange={setWorkspaceName}
+        size="large"
       />
-      <div className={style.buttonGroup}>
+    </ConfirmModal>
-        <Button data-testid="create-workspace-close-button" onClick={onClose}>
-          {t['com.affine.nameWorkspace.button.cancel']()}
-        </Button>
-        <Button
-          data-testid="create-workspace-create-button"
-          disabled={!workspaceName}
-          style={{
-            opacity: !workspaceName ? 0.5 : 1,
-          }}
-          type="primary"
-          onClick={handleCreateWorkspace}
-        >
-          {t['com.affine.nameWorkspace.button.create']()}
-        </Button>
-      </div>
-    </div>
   );
 };
 
@@ -342,15 +342,6 @@ export const CreateWorkspaceModal = ({
     [createLocalWorkspace, onCreate]
   );
 
-  const nameWorkspaceNode =
-    step === 'name-workspace' ? (
-      <NameWorkspaceContent
-        // go to previous step instead?
-        onClose={onClose}
-        onConfirmName={onConfirmName}
-      />
-    ) : null;
-
   const setDBLocationNode =
     step === 'set-db-location' ? (
       <SetDBLocationContent
@@ -377,6 +368,15 @@ export const CreateWorkspaceModal = ({
     },
     [onClose]
   );
+  if (step === 'name-workspace') {
+    return (
+      <NameWorkspaceContent
+        open={mode !== false && !!step}
+        onOpenChange={onOpenChange}
+        onConfirmName={onConfirmName}
+      />
+    );
+  }
 
   return (
     <Modal
@@ -388,7 +388,6 @@ export const CreateWorkspaceModal = ({
       }}
     >
       <div className={style.header}></div>
-      {nameWorkspaceNode}
       {setDBLocationNode}
       {setSyncingModeNode}
     </Modal>

apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx

@@ -38,7 +38,6 @@ export const EnableAffineCloudModal = ({
 
   return (
     <ConfirmModal
-      width={480}
       title={t['Enable AFFiNE Cloud']()}
       description={t['Enable AFFiNE Cloud Description']()}
       cancelText={t['com.affine.enableAffineCloudModal.button.cancel']()}

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

@@ -8,9 +8,9 @@ import {
   type ConfirmModalProps,
 } from '@toeverything/components/modal';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { StyledInputContent, StyledWorkspaceName } from './style';
+import * as styles from './style.css';
 
 interface WorkspaceDeleteProps extends ConfirmModalProps {
   workspace: AffineOfficialWorkspace;
@@ -20,6 +20,7 @@ export const WorkspaceDeleteModal = ({
   workspace,
   ...props
 }: WorkspaceDeleteProps) => {
+  const { onConfirm } = props;
   const [workspaceName] = useBlockSuiteWorkspaceName(
     workspace.blockSuiteWorkspace
   );
@@ -27,6 +28,12 @@ export const WorkspaceDeleteModal = ({
   const allowDelete = deleteStr === workspaceName;
   const t = useAFFiNEI18N();
 
+  const handleOnEnter = useCallback(() => {
+    if (allowDelete) {
+      return onConfirm?.();
+    }
+  }, [allowDelete, onConfirm]);
+
   return (
     <ConfirmModal
       title={`${t['com.affine.workspaceDelete.title']()}?`}
@@ -42,23 +49,23 @@ export const WorkspaceDeleteModal = ({
       {workspace.flavour === WorkspaceFlavour.LOCAL ? (
         <Trans i18nKey="com.affine.workspaceDelete.description">
           Deleting (
-          <StyledWorkspaceName>
+          <span className={styles.workspaceName}>
             {{ workspace: workspaceName } as any}
-          </StyledWorkspaceName>
+          </span>
           ) cannot be undone, please proceed with caution. All contents will be
           lost.
         </Trans>
       ) : (
         <Trans i18nKey="com.affine.workspaceDelete.description2">
           Deleting (
-          <StyledWorkspaceName>
+          <span className={styles.workspaceName}>
             {{ workspace: workspaceName } as any}
-          </StyledWorkspaceName>
+          </span>
           ) will delete both local and cloud data, this operation cannot be
           undone, please proceed with caution.
         </Trans>
       )}
-      <StyledInputContent>
+      <div className={styles.inputContent}>
         <Input
           ref={ref => {
             if (ref) {
@@ -67,11 +74,11 @@ export const WorkspaceDeleteModal = ({
           }}
           onChange={setDeleteStr}
           data-testid="delete-workspace-input"
+          onEnter={handleOnEnter}
           placeholder={t['com.affine.workspaceDelete.placeholder']()}
-          width={315}
+          size="large"
-          height={42}
         />
-      </StyledInputContent>
+      </div>
     </ConfirmModal>
   );
 };

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const modalWrapper = style({
+  position: 'relative',
+  padding: '0px',
+  width: '560px',
+  background: 'var(--affine-background-overlay-panel-color)',
+  borderRadius: '12px',
+});
+
+export const modalHeader = style({
+  margin: '44px 0px 12px 0px',
+  width: '560px',
+  fontWeight: '600',
+  fontSize: '20px;',
+  textAlign: 'center',
+});
+
+export const inputContent = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  margin: '24px 0',
+  fontSize: 'var(--affine-font-base)',
+});
+
+export const workspaceName = style({
+  fontWeight: '600',
+});

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts

@@ -1,38 +0,0 @@
-import { styled } from '@affine/component';
-
-export const StyledModalWrapper = styled('div')(() => {
-  return {
-    position: 'relative',
-    padding: '0px',
-    width: '560px',
-    background: 'var(--affine-background-overlay-panel-color)',
-    borderRadius: '12px',
-    // height: '312px',
-  };
-});
-
-export const StyledModalHeader = styled('div')(() => {
-  return {
-    margin: '44px 0px 12px 0px',
-    width: '560px',
-    fontWeight: '600',
-    fontSize: '20px;',
-    textAlign: 'center',
-  };
-});
-
-export const StyledInputContent = styled('div')(() => {
-  return {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    margin: '24px 0',
-    fontSize: 'var(--affine-font-base)',
-  };
-});
-
-export const StyledWorkspaceName = styled('span')(() => {
-  return {
-    fontWeight: '600',
-  };
-});

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

@@ -88,12 +88,13 @@ export const AvatarAndName = () => {
   const user = useCurrentUser();
   const [input, setInput] = useState<string>(user.name);
 
-  const handleUpdateUserName = useCallback(
+  const allowUpdate = !!input && input !== user.name;
-    (newName: string) => {
+  const handleUpdateUserName = useCallback(() => {
-      user.update({ name: newName }).catch(console.error);
+    if (!allowUpdate) {
-    },
+      return;
-    [user]
+    }
-  );
+    user.update({ name: input }).catch(console.error);
+  }, [allowUpdate, input, user]);
 
   return (
     <>
@@ -119,20 +120,19 @@ export const AvatarAndName = () => {
                 width={280}
                 height={28}
                 onChange={setInput}
+                onEnter={handleUpdateUserName}
               />
-              {input && input === user.name ? null : (
+              {allowUpdate ? (
                 <Button
                   data-testid="save-user-name"
-                  onClick={() => {
+                  onClick={handleUpdateUserName}
-                    handleUpdateUserName(input);
-                  }}
                   style={{
                     marginLeft: '12px',
                   }}
                 >
                   {t['com.affine.editCollection.save']()}
                 </Button>
-              )}
+              ) : null}
             </FlexWrapper>
           </div>
         </FlexWrapper>

packages/component/package.json

@@ -38,7 +38,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@toeverything/hooks": "workspace:*",
     "@toeverything/infra": "workspace:*",
-    "@toeverything/theme": "^0.7.18",
+    "@toeverything/theme": "^0.7.20",
     "@vanilla-extract/dynamic": "^2.0.3",
     "check-password-strength": "^2.0.7",
     "clsx": "^2.0.0",

packages/component/src/components/member-components/invite-modal.tsx

@@ -48,7 +48,6 @@ export const InviteModal = ({
     <ConfirmModal
       open={open}
       onOpenChange={setOpen}
-      width={480}
       title={t['Invite Members']()}
       description={t['Invite Members Message']()}
       cancelText={t['com.affine.inviteModal.button.cancel']()}

packages/component/src/components/page-list/view/create-collection.tsx

@@ -226,10 +226,12 @@ export const EditCollection = ({
         </div>
         <div style={{ marginTop: 20 }}>
           <Input
+            size="large"
             data-testid="input-collection-title"
             placeholder={t['com.affine.editCollection.untitledCollection']()}
             defaultValue={value.name}
             onChange={name => onChange({ ...value, name })}
+            onEnter={onSaveCollection}
           />
         </div>
       </ScrollableContainer>

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

@@ -9,7 +9,6 @@ export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
 
   return (
     <ConfirmModal
-      width={480}
       title={t['com.affine.publicLinkDisableModal.title']()}
       description={t['com.affine.publicLinkDisableModal.description']()}
       cancelText={t['com.affine.publicLinkDisableModal.button.cancel']()}

packages/component/src/ui/input/input.tsx

@@ -79,7 +79,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     >
       {preFix}
       <input
-        className={clsx(input)}
+        className={clsx(input, {
+          large: size === 'large',
+          'extra-large': size === 'extraLarge',
+        })}
         ref={ref}
         disabled={disabled}
         style={inputStyle}

packages/component/src/ui/input/style.css.ts

@@ -8,16 +8,17 @@ export const inputWrapper = style({
   },
   width: widthVar,
   height: 28,
-  lineHeight: '22px',
+  padding: '4px 10px',
-  padding: '0 10px',
+  color: 'var(--affine-icon-color)',
-  color: 'var(--affine-text-primary-color)',
+  border: '1px solid var(--affine-border-color)',
-  border: '1px solid',
+  backgroundColor: 'var(--affine-white-10)',
-  backgroundColor: 'var(--affine-white)',
   borderRadius: 8,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: 'var(--affine-font-base)',
+  gap: 8,
+  // icon size
+  fontSize: '16px',
 
   selectors: {
     '&.no-border': {
@@ -26,10 +27,14 @@ export const inputWrapper = style({
     // size
     '&.large': {
       height: 32,
+      // icon size
+      fontSize: '20px',
     },
     '&.extra-large': {
       height: 40,
-      fontWeight: 600,
+      padding: '8px 10px',
+      // icon size
+      fontSize: '20px',
     },
     // color
     '&.disabled': {
@@ -44,20 +49,20 @@ export const inputWrapper = style({
     '&.warning': {
       borderColor: 'var(--affine-warning-color)',
     },
-    '&.default': {
-      borderColor: 'var(--affine-border-color)',
-    },
     '&.default.focus': {
       borderColor: 'var(--affine-primary-color)',
-      boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
+      boxShadow: 'var(--affine-active-shadow)',
     },
   },
 });
 
 export const input = style({
-  height: '100%',
   width: '0',
   flex: 1,
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '20px',
+  fontWeight: '500',
+  color: 'var(--affine-text-primary-color)',
   boxSizing: 'border-box',
   // prevent default style
   WebkitAppearance: 'none',
@@ -72,5 +77,9 @@ export const input = style({
     '&:disabled': {
       color: 'var(--affine-text-disable-color)',
     },
+    '&.large, &.extra-large': {
+      fontSize: 'var(--affine-font-base)',
+      lineHeight: '24px',
+    },
   },
 });

plugins/copilot/package.json

@@ -17,7 +17,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43",
+    "@toeverything/components": "^0.0.45",
     "@vanilla-extract/css": "^1.13.0",
     "clsx": "^2.0.0",
     "idb": "^7.1.1",

plugins/hello-world/package.json

@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43"
+    "@toeverything/components": "^0.0.45"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*"

plugins/image-preview/package.json

@@ -17,8 +17,8 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43",
+    "@toeverything/components": "^0.0.45",
-    "@toeverything/theme": "^0.7.18",
+    "@toeverything/theme": "^0.7.20",
     "clsx": "^2.0.0",
     "foxact": "^0.2.20",
     "react-error-boundary": "^4.0.11",

plugins/outline/package.json

@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43"
+    "@toeverything/components": "^0.0.45"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*",

yarn.lock

@@ -208,7 +208,7 @@ __metadata:
     "@testing-library/react": ^14.0.0
     "@toeverything/hooks": "workspace:*"
     "@toeverything/infra": "workspace:*"
-    "@toeverything/theme": ^0.7.18
+    "@toeverything/theme": ^0.7.20
     "@types/react": ^18.2.22
     "@types/react-datepicker": ^4.15.0
     "@types/react-dnd": ^3.0.2
@@ -258,7 +258,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
     "@types/marked": ^5.0.1
     "@vanilla-extract/css": ^1.13.0
     clsx: ^2.0.0
@@ -311,7 +311,7 @@ __metadata:
     "@sentry/webpack-plugin": ^2.7.1
     "@svgr/webpack": ^8.1.0
     "@swc/core": ^1.3.87
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
     "@types/lodash-es": ^4.17.9
     "@types/webpack-env": ^1.18.1
     async-call-rpc: ^6.3.1
@@ -471,7 +471,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
   languageName: unknown
   linkType: soft
 
@@ -497,8 +497,8 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
-    "@toeverything/theme": ^0.7.18
+    "@toeverything/theme": ^0.7.20
     clsx: ^2.0.0
     foxact: ^0.2.20
     react-error-boundary: ^4.0.11
@@ -596,7 +596,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
     jotai: ^2.4.3
     react: 18.2.0
     react-dom: 18.2.0
@@ -12413,9 +12413,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/components@npm:^0.0.43":
+"@toeverything/components@npm:^0.0.45":
-  version: 0.0.43
+  version: 0.0.45
-  resolution: "@toeverything/components@npm:0.0.43"
+  resolution: "@toeverything/components@npm:0.0.45"
   dependencies:
     "@blocksuite/icons": ^2.1.33
     "@radix-ui/react-dialog": ^1.0.4
@@ -12427,7 +12427,7 @@ __metadata:
     clsx: ^2
     react: ^18
     react-dom: ^18
-  checksum: 37e59ca10be31be25464a8445fbb0e4c74abe4208d0484541986fb63b3b777d63015be0a3b2dea7e8be5fd1456f3dabc0fc1df232d3e7fbcbc6f8aff4fcbab5a
+  checksum: 79d81a2cd31ed3bac11204d62967846eda39ff3809f6ecb40fa1c4cf5ec6dae1cfd31f7568193feaaf199b04b1125af30f06034903ec4cfe282bb13af701db64
   languageName: node
   linkType: hard
 
@@ -12530,10 +12530,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@toeverything/theme@npm:^0.7.18":
+"@toeverything/theme@npm:^0.7.20":
-  version: 0.7.18
+  version: 0.7.20
-  resolution: "@toeverything/theme@npm:0.7.18"
+  resolution: "@toeverything/theme@npm:0.7.20"
-  checksum: 61e7e2d6f6eab6c09feabea6466aa69faa5e440f5cd2b85f6e264424dc0d88368a8c4f1c8df05309dca7bd27f1cd2566c83e66c3e83ace7dfa2ac61e598da92b
+  checksum: 04fa54b180a0a486f6266578dac15b64ce615754426e2a836a43bc942292df687ab7582a3d4ebcc1629b20f92ad1ae65da60b742525ba39099a217f4c6db4ea1
   languageName: node
   linkType: hard