style: change pin style

dappforce · Jan 31, 2024 · c3af60a · c3af60a
1 parent 3056b40
commit c3af60a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/components/posts/view-post/helpers.module.sass b/src/components/posts/view-post/helpers.module.sass
@@ -11,10 +11,3 @@
 
   @media screen and ( max-width: 768px)
     gap: $space_tiny
-
-.PinnedPostIcon
-  position: absolute
-  top: -4px
-  right: -4px
-  color: $color_muted
-  font-size: $font_big
diff --git a/src/components/posts/view-post/helpers.tsx b/src/components/posts/view-post/helpers.tsx
@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import isEmpty from 'lodash.isempty'
 import Error from 'next/error'
 import React, { FC, useState } from 'react'
-import { RiPushpinLine } from 'react-icons/ri'
+import { RiPushpin2Fill } from 'react-icons/ri'
 import { TbMessageCircle2 } from 'react-icons/tb'
 import { useIsMobileWidthOrDevice } from 'src/components/responsive'
 import { useIsMySpace } from 'src/components/spaces/helpers'
@@ -505,5 +505,13 @@ export function PinnedPostIcon({ postId }: { postId: string }) {
   const isPinned = isPinnedPost(postId)
   if (!isPinned) return null
 
-  return <RiPushpinLine className={styles.PinnedPostIcon} />
+  return (
+    <div
+      className='d-flex align-items-center GapTiny ColorMuted mb-1 FontWeightSemibold'
+      style={{ marginTop: '-12px' }}
+    >
+      <RiPushpin2Fill />
+      <span>Pinned</span>
+    </div>
+  )
 }
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
@@ -965,7 +965,6 @@ hr {
 .DfPostPreview {
   display: flex;
   flex-direction: column;
-  position: relative;
 
   .ui.button {
     min-width: initial;