chore: adjust style of CloudUserAvatar (#8548)

close PD-1774 ![CleanShot 2024-10-18 at 17 59 52@2x](https://github.com/user-attachments/assets/ac73fa27-25ab-4136-9008-7abde4491f92)
toeverything · Oct 19, 2024 · 3ca052c · 3ca052c
1 parent 675a010
commit 3ca052c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+export const userWrapper = style({
+  display: 'flex',
+  gap: '8px',
+});
diff --git a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
@@ -5,6 +5,8 @@ import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useEffect, useMemo } from 'react';
 
+import { userWrapper } from './created-updated-by.css';
+
 const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
   const cloudDocMetaService = useService(CloudDocMetaService);
   const cloudDocMeta = useLiveData(cloudDocMetaService.cloudDocMeta.meta$);
@@ -46,10 +48,10 @@ const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
   }
   if (user) {
     return (
-      <>
-        <Avatar url={user.avatarUrl || ''} name={user.name} size={20} />
+      <div className={userWrapper}>
+        <Avatar url={user.avatarUrl || ''} name={user.name} size={22} />
         <span>{user.name}</span>
-      </>
+      </div>
     );
   }
   return <NoRecordValue />;