fix: post author centering

zer0-os · Sep 2, 2024 · f5540e8 · f5540e8
1 parent f4f00a4
commit f5540e8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/messenger/feed/components/post/index.tsx b/src/components/messenger/feed/components/post/index.tsx
@@ -25,7 +25,7 @@ export const Post = ({ avatarUrl, text, nickname, author, timestamp }: PostProps
   );
 
   return (
-    <div className={styles.Container}>
+    <div className={styles.Container} has-author={author ? '' : null}>
       <div className={styles.Avatar}>
         <Avatar size='regular' imageURL={avatarUrl} />
       </div>
@@ -38,10 +38,14 @@ export const Post = ({ avatarUrl, text, nickname, author, timestamp }: PostProps
             <Name className={styles.Name} variant='name'>
               {nickname}
             </Name>
-            {/* @ts-ignore */}
-            <Name className={styles.UserName} variant='username'>
-              {author}
-            </Name>
+            {author && (
+              <>
+                {/* @ts-ignore */}
+                <Name className={styles.UserName} variant='username'>
+                  {author}
+                </Name>
+              </>
+            )}
           </>
         }
         options={<Timestamp className={styles.Date} timestamp={timestamp} />}

diff --git a/src/components/messenger/feed/components/post/styles.module.scss b/src/components/messenger/feed/components/post/styles.module.scss
@@ -3,6 +3,19 @@
 .Container {
   display: flex;
   gap: 8px;
+
+  &:not([has-author]) {
+    [class*='_Header'] {
+      align-items: center;
+      margin-top: 8px;
+    }
+  }
+
+  &[has-author] {
+    [class*='_Header'] {
+      margin-top: 4px;
+    }
+  }
 }
 
 .Post {