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

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: '0 10px',
-  color: 'var(--affine-text-primary-color)',
-  border: '1px solid',
-  backgroundColor: 'var(--affine-white)',
+  padding: '4px 10px',
+  color: 'var(--affine-icon-color)',
+  border: '1px solid var(--affine-border-color)',
+  backgroundColor: 'var(--affine-white-10)',
   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',
+    },
   },
 });