style: adjust about thread (#1290)

* refactor(about-thread): imporeve the status icons

* refactor(about-thread): adjust status & members block

Author: mydearxym

src/containers/thread/AboutThread/BasicStates/index.tsx

@@ -56,31 +56,31 @@ const BasicStates: FC = () => {
           <UsersIcon />
         </UsersWrapper>
         <Title>参与者</Title>
-        <Desc>参与反馈的用户总数</Desc>
+        <Desc>参与互动的用户总和</Desc>
         <Num>28</Num>
       </Block>
       <Block>
         <ContentWrapper>
           <ContentIcon />
         </ContentWrapper>
         <Title>内容</Title>
-        <Desc>所有内容总数</Desc>
+        <Desc>所有板块内容总和</Desc>
         <Num>12k</Num>
       </Block>
       <Block>
         <CommentsWrapper>
           <CommentIcon />
         </CommentsWrapper>
         <Title>评论</Title>
-        <Desc>所有评论总数</Desc>
+        <Desc>所有评论总和</Desc>
         <Num>237</Num>
       </Block>
       <Block>
         <EmojisWrapper>
           <EmojiIcon />
         </EmojisWrapper>
         <Title>表情</Title>
-        <Desc>收到的 Emoji 总数</Desc>
+        <Desc>收到的 Emoji 总和</Desc>
         <Num>374</Num>
       </Block>
     </Wrapper>

src/containers/thread/AboutThread/Members.tsx

@@ -5,9 +5,9 @@ import { mockUsers } from '@/utils/mock'
 import {
   Wrapper,
   Block,
+  BottomBlock,
   Header,
   Title,
-  Count,
   Row,
   Admin,
   AdminInfo,
@@ -23,7 +23,6 @@ const Members: FC = () => {
       <Block>
         <Header>
           <Title>团队成员</Title>
-          <Count>23</Count>
         </Header>
 
         <Row>
@@ -39,10 +38,9 @@ const Members: FC = () => {
         </Row>
       </Block>
 
-      <Block>
+      <BottomBlock>
         <Header>
           <Title>参与者</Title>
-          <Count>1839</Count>
         </Header>
         <Row>
           {mockUsers(15).map((user) => (
@@ -52,7 +50,7 @@ const Members: FC = () => {
             <NormalAvatar key={user.id} src={user.avatar} />
           ))}
         </Row>
-      </Block>
+      </BottomBlock>
     </Wrapper>
   )
 }

src/containers/thread/AboutThread/styles/basic_states/index.ts

@@ -2,20 +2,19 @@ import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
 import css, { theme } from '@/utils/css'
-import PostSVG from '@/icons/Post'
+import PostSVG from '@/icons/EditPen'
 import CommentSVG from '@/icons/Comment'
-import UserSVG from '@/icons/User'
-import EmojiSVG from '@/icons/Emoji'
+import UserSVG from '@/icons/Users'
+import EmojiSVG from '@/icons/Heart'
 import PulseSVG from '@/icons/Pulse'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
   ${css.flex()};
   width: calc(100% + 38px);
-  /* border: 1px solid; */
   margin-top: 30px;
-  margin-bottom: 16px;
+  margin-bottom: 22px;
 `
 export const Block = styled.div`
   ${css.flexColumn('align-start')};
@@ -39,48 +38,53 @@ export const CommentsWrapper = styled(IconWrapper)`
   background: #f9dfc9;
 `
 export const EmojisWrapper = styled(IconWrapper)`
-  background: #bcede5;
+  background: #ffd5dc;
 `
 export const TrendWrapper = styled(IconWrapper)`
-  background: #dfdfdf;
+  background: #def0ba;
 `
 export const UsersIcon = styled(UserSVG)`
-  ${css.size(12)};
+  ${css.size(14)};
   fill: #2f71ff;
 `
 export const ContentIcon = styled(PostSVG)`
-  ${css.size(14)};
+  ${css.size(12)};
   fill: #860075;
+  margin-top: 1px;
 `
 export const CommentIcon = styled(CommentSVG)`
   ${css.size(15)};
   fill: #e75908;
+  margin-left: 1px;
+  margin-top: 1px;
 `
 export const EmojiIcon = styled(EmojiSVG)`
   ${css.size(14)};
-  fill: #00a88b;
+  fill: #ff1717;
 `
 export const TrendIcon = styled(PulseSVG)`
   ${css.size(14)};
-  fill: ${theme('thread.articleTitle')};
+  fill: #2a7c43;
 `
 export const Title = styled.div`
-  color: ${theme('thread.articleTitle')};
+  color: ${theme('thread.articleDigest')};
   font-weight: 600;
   font-size: 13px;
+  margin-bottom: 2px;
 `
 export const Desc = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 10px;
+  opacity: 0.8;
 `
 export const Num = styled.div`
   color: ${theme('thread.articleTitle')};
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 600;
   margin-top: 5px;
 `
 export const TrendLineWrapper = styled.div`
-  margin-top: 8px;
+  margin-top: 6px;
   margin-left: -5px;
   width: 100%;
 `

src/containers/thread/AboutThread/styles/members.ts

@@ -27,6 +27,11 @@ export const Block = styled.div`
   margin-bottom: 30px;
   width: 600px;
 `
+export const BottomBlock = styled(Block)`
+  border-top: 1px solid;
+  border-top-color: #eae9e9; // to-theme
+  padding-top: 30px;
+`
 export const Header = styled.div`
   ${css.flex('align-center')};
   margin-bottom: 30px;

src/widgets/Icons/Heart.tsx

@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const Heart = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M938.667 362.667A234.667 234.667 0 0 0 704 128a271.36 271.36 0 0 0-192 88.32A271.36 271.36 0 0 0 320 128 234.667 234.667 0 0 0 85.333 362.667c0 167.253 202.667 352 298.667 448l97.28 97.28a32 32 0 0 0 22.613 9.386h16.214a32 32 0 0 0 22.613-9.386l97.28-97.28c96-96 298.667-280.747 298.667-448z" />
+    </svg>
+  )
+}
+
+export default memo(Heart)

src/widgets/Icons/Users.tsx

@@ -0,0 +1,19 @@
+import { memo, SVGProps } from 'react'
+
+const Users = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M350.26 512a170.65 170.65 0 1 0 0-341.3 170.65 170.65 0 0 0 0 341.351zm581.12 118.22a170.598 170.598 0 0 0-120.73-49.92H589.21a131.84 131.84 0 0 1 85.35 49.92 170.7 170.7 0 0 1 50.74 121.191v68.25a34.15 34.15 0 0 1-34.151 34.15h256a34.15 34.15 0 0 0 34.15-34.15v-68.25a170.65 170.65 0 0 0-49.92-121.19z" />
+      <path d="M503.91 581.99a169.472 169.472 0 0 0-17.05 0H213.35A170.65 170.65 0 0 0 42.7 752.691v68.25a34.15 34.15 0 0 0 34.151 34.15h546.56a34.15 34.15 0 0 0 34.1-34.15v-68.25a170.65 170.65 0 0 0-153.6-170.7zM729.6 512a113.51 113.51 0 1 0 0-227.02 113.51 113.51 0 0 0 0 227.02z" />
+    </svg>
+  )
+}
+
+export default memo(Users)