feat(post-component): update name, sub handle, date and body text des…

…ign (#2206)

src/components/messenger/feed/components/post/index.tsx

@@ -18,21 +18,25 @@ export const Post = ({ avatarUrl, text, nickname, author, timestamp }: PostProps
 
   return (
     <div className={styles.Container}>
-      <div>
+      <div className={styles.Avatar}>
         <Avatar size='regular' imageURL={avatarUrl} />
       </div>
       <ZUIPost
         className={styles.Post}
-        body={multilineText}
+        body={<div className={styles.Body}>{multilineText}</div>}
         details={
-          <>
+          <div className={styles.UserDetails}>
             {/* @ts-ignore */}
-            <Name variant='name'>{nickname}</Name>
+            <Name className={styles.Name} variant='name'>
+              {nickname}
+            </Name>
             {/* @ts-ignore */}
-            <Name variant='username'>{author}</Name>
-          </>
+            <Name className={styles.UserName} variant='username'>
+              {author}
+            </Name>
+          </div>
         }
-        options={<Timestamp timestamp={timestamp} />}
+        options={<Timestamp className={styles.Date} timestamp={timestamp} />}
       />
     </div>
   );

src/components/messenger/feed/components/post/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../../../../glass';
+
 .Container {
   display: flex;
   gap: 8px;
@@ -7,3 +9,36 @@
   padding: 0;
   flex: 1;
 }
+
+.Body {
+  font-size: 14px;
+}
+
+.Avatar {
+  pointer-events: none;
+}
+
+.UserDetails {
+  display: flex;
+  flex-direction: column;
+}
+
+.Name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 14px;
+}
+
+.UserName {
+  font-size: 12px;
+  line-height: normal;
+
+  @include glass-text-secondary-color;
+}
+
+.Date {
+  font-size: 12px;
+  line-height: normal;
+
+  @include glass-text-secondary-color;
+}