chore(support): improve text, styles

src/components/BuyMeChuanChuan/index.tsx

@@ -79,7 +79,7 @@ const BuyMeChuanChuan: FC<TProps> = ({
             </SelectTitle>
 
             <SelectDesc>
-              你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers!
+              你的远程投喂将有助于开发团队在饱腹状态下工作， 冲!
             </SelectDesc>
 
             <ChuanSelector active={activeChuan} onSelect={setActiveChuan} />

src/components/Img/index.tsx

@@ -38,7 +38,7 @@ const Img: FC<IProps> = ({
   noLazy = false,
   scrollPosition = null,
   visibleByDefault = false,
-  onClick,
+  onClick = log,
 }) => {
   if (/\.(svg)$/i.test(src)) {
     // see solution in:
@@ -56,7 +56,7 @@ const Img: FC<IProps> = ({
     )
   }
   return (
-    <Fragment>
+    <div onClick={onClick}>
       {noLazy ? (
         <NormalImg
           className={className}
@@ -80,7 +80,7 @@ const Img: FC<IProps> = ({
           visibleByDefault={visibleByDefault}
         />
       )}
-    </Fragment>
+    </div>
   )
 }
 

src/components/SupportUs/Blocks.tsx

@@ -10,9 +10,14 @@ import { ICON } from '@/config'
 
 import { PAYMENT_USAGE } from '@/constant'
 import { checkout } from '@/utils/helper'
+
+import { SpaceGrow } from '@/components/Common'
+
 import {
   Wrapper,
   Block,
+  Icon,
+  FeedIcon,
   Title,
   Divider,
   Desc,
@@ -46,33 +51,44 @@ const Blocks = () => {
       />
 
       <Block onClick={() => setShowChuan(true)}>
-        <Title>远程撸串</Title>
+        <Title>
+          <FeedIcon src={`${ICON}/menu/feed.svg`} />
+          远程撸串
+          <SpaceGrow />
+        </Title>
+
         <Divider />
-        <Desc>你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers!</Desc>
+        <Desc>你的远程投喂将有助于开发团队在饱腹状态下工作， 冲！</Desc>
       </Block>
       <Block>
         <Title>
+          <Icon src={`${ICON}/menu/vip.svg`} />
           成为会员
+          <SpaceGrow />
           <LinkIcon src={`${ICON}/shape/link.svg`} />
         </Title>
         <Divider />
         <Desc>
-          成为 CP 付费会员，持续支持社区发展，同时解锁最优质的体验和服务。
+          成为 CP 付费会员，解锁本站最高质量的体验和服务，同时支持社区持续发展。
         </Desc>
       </Block>
       <Block>
         <Title>
+          <Icon src={`${ICON}/menu/sponsor.svg`} />
           团队赞助
+          <SpaceGrow />
           <MailIcon src={`${ICON}/subscribe/email-solid.svg`} />
         </Title>
         <Divider />
         <Desc>
-          你的团队推广将出现在本项目的 Github 主页以及本站的特别感谢中。
+          你的团队链接将永久出现在本项目的 Github 主页以及本站的特别感谢中。
         </Desc>
       </Block>
       <Block>
         <Title>
+          <Icon src={`${ICON}/menu/volunteer.svg`} />
           成为志愿者
+          <SpaceGrow />
           <LinkIcon src={`${ICON}/shape/link.svg`} />
         </Title>
         <Divider />
@@ -82,7 +98,9 @@ const Blocks = () => {
       </Block>
       <Block>
         <Title>
+          <Icon src={`${ICON}/social/github.svg`} />
           参与开发
+          <SpaceGrow />
           <LinkIcon src={`${ICON}/shape/link.svg`} />
         </Title>
         <Divider />

src/components/SupportUs/index.tsx

@@ -5,23 +5,73 @@
  */
 
 import { FC, memo } from 'react'
+import QRCode from 'qrcode-react'
 
 import type { TMetric } from '@/spec'
+import { ICON } from '@/config'
 import { METRIC } from '@/constant'
+import { openShareWindow } from '@/utils/helper'
+
 import { Br } from '@/components/Common'
+import Tooltip from '@/components/Tooltip'
 import ArrowLink from '@/components/Buttons/ArrowLink'
 
 import Blocks from './Blocks'
 
 import {
   Wrapper,
   InnerWrapper,
+  SupportLogo,
   Title,
   Divider,
   Desc,
+  MainDesc,
   FocusDesc,
+  SocialWrapper,
+  SocialIcon,
 } from './styles'
 
+const url = 'https://coderplanets.com'
+
+const toPlatform = (type: string): void => {
+  const title = 'CoderPlanets'
+  const digest = '可能是最性感的开发者社区'
+
+  switch (type) {
+    case 'twitter': {
+      const param = { url, text: title }
+
+      return openShareWindow('https://twitter.com/intent/tweet', param)
+    }
+
+    case 'telegram': {
+      const param = { url, text: title }
+
+      return openShareWindow('https://telegram.me/share/url', param)
+    }
+
+    case 'facebook': {
+      const param = { u: url }
+      return openShareWindow('https://facebook.com/share.php', param)
+    }
+
+    case 'douban': {
+      const param = { href: url, name: title }
+      return openShareWindow('https://shuo.douban.com/!service/share', param)
+    }
+
+    case 'weibo': {
+      const param = { url, title }
+      return openShareWindow('https://service.weibo.com/share/share.php', param)
+    }
+
+    default: {
+      /* eslint-disable-next-line */
+      return
+    }
+  }
+}
+
 type TProps = {
   metric?: TMetric
 }
@@ -30,24 +80,53 @@ const SupportUS: FC<TProps> = ({ metric = METRIC.SUPPORT_US }) => {
   return (
     <Wrapper testid="support-us-content">
       <InnerWrapper metric={metric}>
-        <Title>支持我们</Title>
+        <Title>
+          <SupportLogo src={`${ICON}/menu/lifebuoy.png`} noLazy />
+          支持我们
+        </Title>
         <Divider />
-        <Desc align>
+        <MainDesc align>
           {/* eslint-disable-next-line */}
-          编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和维护上投入更多时间。
-        </Desc>
+          编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和运营上倾注更多时间。
+        </MainDesc>
         <Br top={80} />
         <Blocks />
         <Br top={60} />
 
-        <Desc>
-          开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、开发人员生计等产生的必要费用，确保社区健壮、稳定、可持续。
+        <Desc align>
+          开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、资源以及开发人员生计等产生的必要费用，确保社区稳定、可持续，谢谢理解。
         </Desc>
         <Br top={20} />
         <Desc>
-          最后，如果你喜欢这里，还请高抬贵指将本社区转发给你身边的开发者朋友、氛围良好的交流群中，
-          <FocusDesc>Don’t tell me , tell the world ~</FocusDesc>
+          最后，如果你喜欢这里，还请高抬贵指将本社区转发给你身边的开发者朋友，以及各种社交媒体平台：
         </Desc>
+        <SocialWrapper>
+          <Tooltip content={<QRCode value={url} size={100} />} placement="top">
+            <SocialIcon src={`${ICON}/social/wechat-share.png`} />
+          </Tooltip>
+
+          <SocialIcon
+            src={`${ICON}/social/twitter-share.png`}
+            onClick={() => toPlatform('twitter')}
+          />
+          <SocialIcon
+            src={`${ICON}/social/telegram-share.png`}
+            onClick={() => toPlatform('telegram')}
+          />
+          <SocialIcon
+            src={`${ICON}/social/weibo-share.png`}
+            onClick={() => toPlatform('weibo')}
+          />
+          <SocialIcon
+            src={`${ICON}/social/douban-share.png`}
+            onClick={() => toPlatform('douban')}
+          />
+          <SocialIcon
+            src={`${ICON}/social/facebook-share.png`}
+            onClick={() => toPlatform('facebook')}
+          />
+        </SocialWrapper>
+        <FocusDesc>Don’t tell me , tell the world ~</FocusDesc>
       </InnerWrapper>
     </Wrapper>
   )

src/components/SupportUs/styles/blocks.ts

@@ -30,14 +30,21 @@ export const Block = styled.div`
 
   transition: all 0.1s;
 `
+export const Icon = styled(Img)`
+  ${css.size(16)};
+  margin-right: 10px;
+  fill: ${theme('thread.articleDigest')};
+`
+export const FeedIcon = styled(Icon)`
+  transform: rotate(-30deg);
+`
 export const Title = styled.div`
-  ${css.flex('justify-between')}
+  ${css.flex('justify-between', 'align-center')}
   color: ${theme('thread.articleTitle')};
   font-size: 18px;
 `
 export const LinkIcon = styled(Img)`
   ${css.size(18)};
-  margin-top: 5px;
   fill: ${theme('button.primary')};
   opacity: 0;
 
@@ -49,14 +56,15 @@ export const MailIcon = styled(LinkIcon)`
   ${css.size(16)};
 `
 export const Divider = styled.div`
-  width: 50px;
+  width: 100%;
   height: 2px;
-  background-color: ${theme('thread.articleDigest')};
+  background-color: #004b5d;
   margin-top: 10px;
   margin-bottom: 15px;
-  opacity: 0.6;
+  opacity: 0.5;
 `
 export const Desc = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
+  line-height: 1.85;
 `

src/components/SupportUs/styles/index.ts

@@ -1,8 +1,10 @@
 import styled from 'styled-components'
 
 import type { TTestable, TMetric } from '@/spec'
+
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
+import Img from '@/Img'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
@@ -23,17 +25,25 @@ export const ContentWrapper = styled.div`
   ${css.flexColumnGrow()};
   max-width: 100%;
 `
+export const SupportLogo = styled(Img)`
+  ${css.size(28)};
+  transform: rotate(-12deg);
+  margin-right: 12px;
+  filter: saturate(0.7);
+`
 export const Title = styled.h1`
+  ${css.flex('align-center')};
   color: ${theme('thread.articleTitle')};
   font-size: 24px;
   margin-top: 8%;
 `
 export const Divider = styled.div`
-  width: 80px;
+  width: 120px;
   height: 1px;
   background-color: ${theme('thread.articleDigest')};
   margin-top: 18px;
   margin-bottom: 30px;
+  margin-left: 5px;
   opacity: 0.6;
 `
 export const Desc = styled.div<{ align?: boolean }>`
@@ -43,24 +53,29 @@ export const Desc = styled.div<{ align?: boolean }>`
   width: 67%;
   line-height: 1.875;
 `
-export const FocusDesc = styled.span`
+export const MainDesc = styled(Desc)`
+  text-indent: 32px;
+`
+export const FocusDesc = styled.div`
   color: ${theme('thread.articleTitle')};
+  text-align: center;
+  padding-right: 20px;
   font-size: 16px;
   line-height: 1.88;
 `
-export const BlocksWrapper = styled.div`
-  ${css.flex('align-both')};
-  flex-wrap: wrap;
-  margin-left: 10px;
+export const SocialWrapper = styled.div`
+  ${css.flex('align-center')};
+  margin-top: 30px;
+  margin-bottom: 30px;
+  margin-left: -12px;
 `
-export const Block = styled.div`
-  width: 300px;
-  height: 150px;
-  border: 1px solid;
-  border-color: #004b5e;
-  margin-right: 20px;
-  background: #0d3b49;
-  border-radius: 5px;
-  margin-bottom: 20px;
-  padding: 15px;
+export const SocialIcon = styled(Img)`
+  ${css.size(24)};
+  margin-right: 15px;
+  filter: saturate(0.4);
+
+  &:hover {
+    filter: saturate(0.9);
+    cursor: pointer;
+  }
 `

src/containers/thread/ArticlesThread/styles/index.ts

@@ -20,7 +20,7 @@ export const MainWrapper = styled.div`
 `
 export const FilterWrapper = styled.div`
   ${css.flex('align-center')};
-  margin-bottom: 10px;
+  margin-bottom: 3px;
   ${css.media.mobile`margin-bottom: 4px;`};
-  margin-left: -5px;
+  margin-left: -3px;
 `