Finish post view count ui

dappforce · Mar 14, 2024 · b2fd289 · b2fd289
1 parent c47359d
commit b2fd289
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/src/components/posts/view-post/PostViewCount.tsx b/src/components/posts/view-post/PostViewCount.tsx
@@ -1,6 +1,6 @@
+import clsx from 'clsx'
 import { ComponentProps } from 'react'
 import { FaRegEye } from 'react-icons/fa'
-import { IconWithLabel } from 'src/components/utils'
 import { usePostViewCount } from 'src/rtk/app/hooks'
 
 export default function PostViewCount({
@@ -10,8 +10,15 @@ export default function PostViewCount({
   const viewCount = usePostViewCount(postId)
 
   return (
-    <div {...props} className={props.className}>
-      <IconWithLabel renderZeroCount icon={<FaRegEye />} count={viewCount} />
+    <div
+      {...props}
+      className={clsx(
+        'd-flex align-items-center ColorMuted FontWeightMedium GapTiny',
+        props.className,
+      )}
+    >
+      <FaRegEye className='FontLarge' />
+      <span>{viewCount}</span>
     </div>
   )
 }
diff --git a/src/components/posts/view-post/helpers.module.sass b/src/components/posts/view-post/helpers.module.sass
@@ -1,13 +1,4 @@
 @import "src/styles/subsocial-vars.scss"
-
-.PostActions
-  gap: $space_large
-  display: grid
-  width: 100%
-  grid-template-columns: 1fr 1fr 1fr 1fr
-
-  @media screen and ( max-width: 768px)
-    gap: $space_normal
 
 .PostContent
   gap: $space_small

diff --git a/src/components/posts/view-post/helpers.tsx b/src/components/posts/view-post/helpers.tsx
@@ -49,7 +49,6 @@ import { ShareDropdown } from '../share/ShareDropdown'
 import ViewPostLink from '../ViewPostLink'
 import styles from './helpers.module.sass'
 import { PostDropDownMenu } from './PostDropDownMenu'
-import PostRewardStat from './PostRewardStat'
 import PostViewCount from './PostViewCount'
 import TwitterPost from './TwitterPost'
 
@@ -337,11 +336,12 @@ export const PostActionsPanel: FC<PostActionsPanelProps> = props => {
 
   return (
     <div className={`DfActionsPanel ${withBorder && 'DfActionBorder'} ${className ?? ''}`}>
-      <div className={clsx(styles.PostActions)}>
-        <SuperLike post={struct} />
-        {preview && <CommentAction {...props} />}
+      <div className={clsx('d-flex align-items-center justify-content-between GapNormal w-100')}>
+        <div className='d-flex align-items-center GapNormal'>
+          <SuperLike post={struct} />
+          {preview && <CommentAction {...props} />}
+        </div>
         <PostViewCount postId={struct.id} />
-        <PostRewardStat postId={postDetails.id} />
       </div>
       {/* <ShareDropdown postDetails={postDetails} space={space} className='DfAction' /> */}
     </div>