From 8c23a8ddbfd28a1ec4a4f7a6eb962b10efdafba3 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Tue, 18 Jul 2023 22:44:15 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20import=20statement=20?=
 =?UTF-8?q?and=20define=20CSS=20styles=20for=20Avatar=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add import statement for 'createStyles' from 'antd-style' in 'AvatarWithUpload/index.tsx'
- Define 'useStyle' constant containing CSS styles for Avatar component

feat: Remove unused constant and update component wrapping in Conversation

- Remove 'useStyles' constant and associated CSS styles from 'Conversation/index.tsx'
- Remove 'Flexbox' component wrapping 'ChatInput' component

feat: Update styles for Flexbox component in index page

- Set height of 'Flexbox' component to '100vh'
- Set 'overflow' style to 'hidden'
- Set 'position' style to 'relative'
---
 src/features/AvatarWithUpload/index.tsx    | 20 +++++++++++++++++++-
 src/pages/chat/[id]/Conversation/index.tsx | 16 +---------------
 src/pages/chat/[id]/index.page.tsx         |  2 +-
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/features/AvatarWithUpload/index.tsx b/src/features/AvatarWithUpload/index.tsx
index eb4eabfdf1..3113f44fa6 100644
--- a/src/features/AvatarWithUpload/index.tsx
+++ b/src/features/AvatarWithUpload/index.tsx
@@ -1,24 +1,42 @@
 import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
+const useStyle = createStyles(
+  ({ css, token }) => css`
+    cursor: pointer;
+    border-radius: 50%;
+    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
+
+    &:hover {
+      box-shadow: 0 0 0 3px ${token.colorText};
+    }
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+);
+
 interface AvatarWithUploadProps {
   size?: number;
 }
 
 export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
   const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
+  const { styles } = useStyle();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {
     setSettings({ avatar });
   });
 
   return (
-    <div style={{ maxHeight: size, maxWidth: size }}>
+    <div className={styles} style={{ maxHeight: size, maxWidth: size }}>
       <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
         {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
       </Upload>
diff --git a/src/pages/chat/[id]/Conversation/index.tsx b/src/pages/chat/[id]/Conversation/index.tsx
index 2f2aff752c..93b8330633 100644
--- a/src/pages/chat/[id]/Conversation/index.tsx
+++ b/src/pages/chat/[id]/Conversation/index.tsx
@@ -1,30 +1,16 @@
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import ChatInput from '@/pages/chat/[id]/Conversation/Input';
 
 import ChatList from './ChatList';
 
-const useStyles = createStyles(({ css, token }) => ({
-  input: css`
-    position: sticky;
-    z-index: 10;
-    bottom: 0;
-    background: ${token.colorBgLayout};
-  `,
-}));
-
 const Conversation = () => {
-  const { styles } = useStyles();
   return (
     <>
       <div style={{ flex: 1, overflowY: 'scroll' }}>
         <ChatList />
       </div>
-      <Flexbox className={styles.input}>
-        <ChatInput />
-      </Flexbox>
+      <ChatInput />
     </>
   );
 };
diff --git a/src/pages/chat/[id]/index.page.tsx b/src/pages/chat/[id]/index.page.tsx
index e910e656fd..de71d0e7fe 100644
--- a/src/pages/chat/[id]/index.page.tsx
+++ b/src/pages/chat/[id]/index.page.tsx
@@ -24,7 +24,7 @@ const Chat = memo(() => {
         <title>{pageTitle}</title>
       </Head>
 
-      <Flexbox flex={1}>
+      <Flexbox flex={1} height={'100vh'} style={{ overflow: 'hidden', position: 'relative' }}>
         <Header />
         <Flexbox
           id={'lobe-conversion-container'}