style(help-center): add share-list concept (#1023)

Author: mydearxym

src/containers/content/HelpCenterContent/Footer/Reaction.tsx

@@ -6,6 +6,10 @@ import { ICON } from '@/config'
 
 import {
   Wrapper,
+  RateWrapper,
+  ShareWrapper,
+  ShareList,
+  ShareIcon,
   Title,
   BoxWrapper,
   Button,
@@ -27,19 +31,28 @@ const Reaction: React.FC<TProps> = ({ visibles }) => {
   const { uselessClicked } = visibles
   return (
     <Wrapper>
-      <Title>这些信息是否有用？</Title>
-      <BoxWrapper>
-        <Button onClick={usefulOnClick}>
-          <UsefulIcon src={`${ICON}/useful-color.svg`} />
-          <UsefulText>有用</UsefulText>
-        </Button>
-        <UselessWrapper>
-          <UselessButton active={uselessClicked} onClick={uselessOnClick}>
-            <CryIcon src={`${ICON}/shape/cry.svg`} active={uselessClicked} />
-          </UselessButton>
-          <UselessText>没有帮助</UselessText>
-        </UselessWrapper>
-      </BoxWrapper>
+      <RateWrapper>
+        <Title>这些信息是否有用？</Title>
+        <BoxWrapper>
+          <Button onClick={usefulOnClick}>
+            <UsefulIcon src={`${ICON}/useful-color.svg`} />
+            <UsefulText>有用</UsefulText>
+          </Button>
+          <UselessWrapper>
+            <UselessButton active={uselessClicked} onClick={uselessOnClick}>
+              <CryIcon src={`${ICON}/shape/cry.svg`} active={uselessClicked} />
+            </UselessButton>
+            <UselessText>没有帮助</UselessText>
+          </UselessWrapper>
+        </BoxWrapper>
+      </RateWrapper>
+      <ShareWrapper>
+        <ShareList>
+          <ShareIcon src={`${ICON}/social/weichat.svg`} />
+          <ShareIcon src={`${ICON}/social/twitter.svg`} />
+          <ShareIcon src={`${ICON}/social/zhihu.svg`} />
+        </ShareList>
+      </ShareWrapper>
     </Wrapper>
   )
 }

src/containers/content/HelpCenterContent/styles/footer/reaction.ts

@@ -5,9 +5,16 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
+  ${css.flex()};
   margin-bottom: 25px;
+  margin-right: 30px;
 `
+export const RateWrapper = styled.div`
+  flex-grow: 1;
+`
+// reactions
 export const Title = styled.div`
+  font-size: 14px;
   margin-bottom: 14px;
 `
 export const BoxWrapper = styled.div`
@@ -64,3 +71,23 @@ export const UselessText = styled.span`
 
   transition: opacity 0.25s ease-in-out;
 `
+
+export const ShareWrapper = styled.div`
+  ${css.flexColumn('justify-end')};
+`
+export const ShareList = styled.div`
+  ${css.flex('align-center')};
+  margin-bottom: 6px;
+`
+export const ShareIcon = styled(Img)`
+  fill: ${theme('banner.desc')};
+  ${css.size(16)};
+  margin-left: 12px;
+
+  &:hover {
+    fill: ${theme('banner.title')};
+    cursor: pointer;
+  }
+
+  transition: all 0.25s;
+`