style: postItem with community label & adjust looks

Author: mydearxym

src/components/AvatarsRow/styles/more_item.ts

@@ -26,6 +26,7 @@ export const Wrapper = styled(BaseAvatarItem)`
 
 type TNumbersMore = { size: string; total: number }
 export const NumbersMore = styled(AvatarsMore)<TNumbersMore>`
+  background: #123d4c;
   color: ${theme('thread.articleTitle')};
   height: ${({ size }) => getAvatarSize(size)};
   width: ${({ total }) => getMoreTextWidth(total)};

src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx

@@ -10,17 +10,20 @@ type TProps = {
 }
 
 const ActiveBadge: FC<TProps> = ({ item }) => {
+  const isArchived = item.commentsCount === 24
+  const path = isArchived ? 'article/archived.svg' : 'shape/activity.svg'
+
   return (
     <Wrapper hasComments={item.commentsCount > 0}>
       <IconButton
-        path="shape/activity.svg"
+        path={path}
         size={14}
         hint={<Hint>最后回复: 2020-03-11 14:33</Hint>}
         mRight={6}
         hintPlacement="bottom"
         hintDelay={0}
       />
-      4天前
+      <div>4天前</div>
     </Wrapper>
   )
 }

src/components/PostItem/DigestView/DesktopView/Body.tsx

@@ -17,6 +17,7 @@ import {
   PublishTime,
   Extra,
   LeftPart,
+  CommunityLabel,
   AuthorName,
   ItemWrapper,
   ViewsIcon,
@@ -31,6 +32,8 @@ const Body: FC<TProps> = ({ item }) => {
     <Wrapper>
       <Extra>
         <LeftPart>
+          <CommunityLabel>Elixir</CommunityLabel>
+          <Dot radius={3} space={8} />
           <AuthorName>{item.author.nickname}</AuthorName>
           <Dot radius={3} space={8} />
           <PublishTime>

src/components/PostItem/DigestView/DesktopView/Header.tsx

@@ -16,6 +16,7 @@ import {
   Brief,
   Title,
   TagListWrapper,
+  Participants,
 } from '../../styles/digest_view/header'
 
 type TProps = {
@@ -39,10 +40,12 @@ const Header: FC<TProps> = ({ item }) => {
           <InlineTags data={item.tags} />
         </TagListWrapper>
       </Brief>
-      <AvatarsRow
-        users={item.commentsParticipators}
-        total={item.commentsCount}
-      />
+      <Participants>
+        <AvatarsRow
+          users={item.commentsParticipators}
+          total={item.commentsCount}
+        />
+      </Participants>
     </Wrapper>
   )
 }

src/components/PostItem/styles/digest_view/active_badge.ts

@@ -11,7 +11,7 @@ export const Wrapper = styled.div<{ hasComments: boolean }>`
   top: 6px;
   right: 0;
   color: ${theme('thread.articleTitle')};
-  margin-right: 6px;
+  margin-right: 1px;
   margin-top: 8px;
 
   ${Main}:hover & {

src/components/PostItem/styles/digest_view/body.ts

@@ -22,6 +22,23 @@ export const Extra = styled.li`
 export const LeftPart = styled.div`
   ${css.flex('align-center')};
 `
+
+export const CommunityLabel = styled.div`
+  padding-left: 14px;
+  position: relative;
+  font-weight: bold;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 1px;
+    top: 4px;
+    width: 6px;
+    height: 10px;
+    border-radius: 4px;
+    background-color: #49a5a0;
+  }
+`
 export const AuthorName = styled.div`
   color: ${theme('thread.extraInfo')};
   font-size: 13px;

src/components/PostItem/styles/digest_view/header.ts

@@ -50,3 +50,7 @@ export const LinkIcon = styled(Img)`
   ${css.size(12)};
 `
 export const TagListWrapper = styled.div``
+
+export const Participants = styled.div`
+  margin-top: 2px;
+`

src/components/PostItem/styles/index.ts

@@ -17,8 +17,8 @@ export const Wrapper = styled.article<TWrapper>`
   position: relative;
   opacity: ${({ entry, activeId, c11n }) => getOpacity(entry, activeId, c11n)};
 
-  padding-top: ${({ c11n }) => (c11n.contentDivider ? '10px' : '6px')};
-  padding-bottom: ${({ c11n }) => (c11n.contentDivider ? '10px' : '6px')};
+  padding-top: ${({ c11n }) => (c11n.contentDivider ? '10px' : '8px')};
+  padding-bottom: ${({ c11n }) => (c11n.contentDivider ? '14px' : '8px')};
   border-bottom: ${({ c11n }) => (c11n.contentDivider ? '1px solid' : '0')};
   border-bottom-color: ${theme('thread.articleDivider')};