change user profile page layout

src/containers/profile/ProfilePageLeft/index.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
+import { Card } from '~/components/common/Card';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { imagePresets } from '~/constants/urls';
 import { IUser } from '~/types/auth';
@@ -11,28 +12,39 @@ interface Props {
   profile: IUser;
   isLoading: boolean;
   username: string;
+  description: string;
 }
 
-const ProfilePageLeft: FC<Props> = ({ username, profile, isLoading }) => {
+const ProfilePageLeft: FC<Props> = ({
+  username,
+  profile,
+  description,
+  isLoading,
+}) => {
   return (
-    <div className={styles.wrap}>
-      <Avatar
-        username={username}
-        url={profile?.photo?.url}
-        className={styles.avatar}
-        preset={imagePresets['600']}
-      />
+    <Card className={styles.wrap} elevation={0} seamless>
+      <Card seamless>
+        <Avatar
+          username={username}
+          url={profile?.photo?.url}
+          className={styles.avatar}
+          preset={imagePresets['600']}
+        />
 
+        <div className={styles.region}>
+          <div className={styles.name}>
+            {isLoading ? <Placeholder /> : profile?.fullname}
+          </div>
+
+          <div className={styles.username}>
+            {isLoading ? <Placeholder /> : `~${profile?.username}`}
+          </div>
+        </div>
+      </Card>
       <div className={styles.region}>
-        <div className={styles.name}>
-          {isLoading ? <Placeholder /> : profile?.fullname}
-        </div>
-
-        <div className={styles.username}>
-          {isLoading ? <Placeholder /> : `~${profile?.username}`}
-        </div>
+        <div className={styles.description}>{description}</div>
       </div>
-    </div>
+    </Card>
   );
 };