Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit c87633a

Browse files
mydearxymmydearxym
authored
chore(support): improve text, styles (#1149)
* chore(support): improve text, styles * fix(support): add icon & img click issue * style(support): mini adjust * style(support): style & fm mini adjust
1 parent 0347182 commit c87633a

File tree

9 files changed

+186
-62
lines changed

9 files changed

+186
-62
lines changed

‎src/components/BuyMeChuanChuan/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const BuyMeChuanChuan: FC<TProps> = ({
7979
</SelectTitle>
8080

8181
<SelectDesc>
82-
你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers!
82+
你的远程投喂将有助于开发团队在饱腹状态下工作， 冲!
8383
</SelectDesc>
8484

8585
<ChuanSelector active={activeChuan} onSelect={setActiveChuan} />

‎src/components/Img/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Img: FC<IProps> = ({
3838
noLazy = false,
3939
scrollPosition = null,
4040
visibleByDefault = false,
41-
onClick,
41+
onClick = log,
4242
}) => {
4343
if (/\.(svg)$/i.test(src)) {
4444
// see solution in:
@@ -56,7 +56,7 @@ const Img: FC<IProps> = ({
5656
)
5757
}
5858
return (
59-
<Fragment>
59+
<div onClick={onClick}>
6060
{noLazy ? (
6161
<NormalImg
6262
className={className}
@@ -80,7 +80,7 @@ const Img: FC<IProps> = ({
8080
visibleByDefault={visibleByDefault}
8181
/>
8282
)}
83-
</Fragment>
83+
</div>
8484
)
8585
}
8686

‎src/components/SupportUs/Blocks.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,14 @@ import { ICON } from '@/config'
1010

1111
import { PAYMENT_USAGE } from '@/constant'
1212
import { checkout } from '@/utils/helper'
13+
14+
import { SpaceGrow } from '@/components/Common'
15+
1316
import {
1417
Wrapper,
1518
Block,
19+
Icon,
20+
FeedIcon,
1621
Title,
1722
Divider,
1823
Desc,
@@ -46,33 +51,44 @@ const Blocks = () => {
4651
/>
4752

4853
<Block onClick={() => setShowChuan(true)}>
49-
<Title>远程撸串</Title>
54+
<Title>
55+
<FeedIcon src={`${ICON}/menu/feed.svg`} />
56+
远程撸串
57+
<SpaceGrow />
58+
</Title>
59+
5060
<Divider />
51-
<Desc>你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers!</Desc>
61+
<Desc>你的远程投喂将有助于开发团队在饱腹状态下工作， 冲！</Desc>
5262
</Block>
5363
<Block>
5464
<Title>
65+
<Icon src={`${ICON}/menu/vip.svg`} />
5566
成为会员
67+
<SpaceGrow />
5668
<LinkIcon src={`${ICON}/shape/link.svg`} />
5769
</Title>
5870
<Divider />
5971
<Desc>
60-
成为 CP 付费会员，持续支持社区发展，同时解锁最优质的体验和服务。
72+
成为 CP 付费会员，解锁本站最高质量的体验和服务，同时支持社区持续发展。
6173
</Desc>
6274
</Block>
6375
<Block>
6476
<Title>
77+
<Icon src={`${ICON}/menu/sponsor.svg`} />
6578
团队赞助
79+
<SpaceGrow />
6680
<MailIcon src={`${ICON}/subscribe/email-solid.svg`} />
6781
</Title>
6882
<Divider />
6983
<Desc>
70-
你的团队推广将出现在本项目的 Github 主页以及本站的特别感谢中。
84+
你的团队链接将永久出现在本项目的 Github 主页以及本站的特别感谢中。
7185
</Desc>
7286
</Block>
7387
<Block>
7488
<Title>
89+
<Icon src={`${ICON}/menu/volunteer.svg`} />
7590
成为志愿者
91+
<SpaceGrow />
7692
<LinkIcon src={`${ICON}/shape/link.svg`} />
7793
</Title>
7894
<Divider />
@@ -82,7 +98,9 @@ const Blocks = () => {
8298
</Block>
8399
<Block>
84100
<Title>
101+
<Icon src={`${ICON}/social/github.svg`} />
85102
参与开发
103+
<SpaceGrow />
86104
<LinkIcon src={`${ICON}/shape/link.svg`} />
87105
</Title>
88106
<Divider />

‎src/components/SupportUs/index.tsx‎

Lines changed: 87 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,73 @@
55
*/
66

77
import { FC, memo } from 'react'
8+
import QRCode from 'qrcode-react'
89

910
import type { TMetric } from '@/spec'
11+
import { ICON } from '@/config'
1012
import { METRIC } from '@/constant'
13+
import { openShareWindow } from '@/utils/helper'
14+
1115
import { Br } from '@/components/Common'
16+
import Tooltip from '@/components/Tooltip'
1217
import ArrowLink from '@/components/Buttons/ArrowLink'
1318

1419
import Blocks from './Blocks'
1520

1621
import {
1722
Wrapper,
1823
InnerWrapper,
24+
SupportLogo,
1925
Title,
2026
Divider,
2127
Desc,
28+
MainDesc,
2229
FocusDesc,
30+
SocialWrapper,
31+
SocialIcon,
2332
} from './styles'
2433

34+
const url = 'https://coderplanets.com'
35+
36+
const toPlatform = (type: string): void => {
37+
const title = 'CoderPlanets'
38+
const digest = '可能是最性感的开发者社区'
39+
40+
switch (type) {
41+
case 'twitter': {
42+
const param = { url, text: title }
43+
44+
return openShareWindow('https://twitter.com/intent/tweet', param)
45+
}
46+
47+
case 'telegram': {
48+
const param = { url, text: title }
49+
50+
return openShareWindow('https://telegram.me/share/url', param)
51+
}
52+
53+
case 'facebook': {
54+
const param = { u: url }
55+
return openShareWindow('https://facebook.com/share.php', param)
56+
}
57+
58+
case 'douban': {
59+
const param = { href: url, name: title }
60+
return openShareWindow('https://shuo.douban.com/!service/share', param)
61+
}
62+
63+
case 'weibo': {
64+
const param = { url, title }
65+
return openShareWindow('https://service.weibo.com/share/share.php', param)
66+
}
67+
68+
default: {
69+
/* eslint-disable-next-line */
70+
return
71+
}
72+
}
73+
}
74+
2575
type TProps = {
2676
metric?: TMetric
2777
}
@@ -30,24 +80,53 @@ const SupportUS: FC<TProps> = ({ metric = METRIC.SUPPORT_US }) => {
3080
return (
3181
<Wrapper testid="support-us-content">
3282
<InnerWrapper metric={metric}>
33-
<Title>支持我们</Title>
83+
<Title>
84+
<SupportLogo src={`${ICON}/menu/lifebuoy.png`} noLazy />
85+
支持我们
86+
</Title>
3487
<Divider />
35-
<Desc align>
88+
<MainDesc align>
3689
{/* eslint-disable-next-line */}
37-
编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和维护上投入更多时间。
38-
</Desc>
90+
编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和运营上倾注更多时间。
91+
</MainDesc>
3992
<Br top={80} />
4093
<Blocks />
4194
<Br top={60} />
4295

43-
<Desc>
44-
开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、开发人员生计等产生的必要费用，确保社区健壮、稳定、可持续。
96+
<Desc align>
97+
开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、资源以及开发人员生计等产生的必要费用，确保社区稳定、可持续，谢谢理解。
4598
</Desc>
4699
<Br top={20} />
47100
<Desc>
48-
最后，如果你喜欢这里，还请高抬贵指将本社区转发给你身边的开发者朋友、氛围良好的交流群中，
49-
<FocusDesc>Don’t tell me , tell the world ~</FocusDesc>
101+
最后，如果你喜欢这里，还请高抬贵指将本社区转发给你身边的开发者朋友，以及各种社交媒体平台：
50102
</Desc>
103+
<SocialWrapper>
104+
<Tooltip content={<QRCode value={url} size={100} />} placement="top">
105+
<SocialIcon src={`${ICON}/social/wechat-share.png`} />
106+
</Tooltip>
107+
108+
<SocialIcon
109+
src={`${ICON}/social/twitter-share.png`}
110+
onClick={() => toPlatform('twitter')}
111+
/>
112+
<SocialIcon
113+
src={`${ICON}/social/telegram-share.png`}
114+
onClick={() => toPlatform('telegram')}
115+
/>
116+
<SocialIcon
117+
src={`${ICON}/social/weibo-share.png`}
118+
onClick={() => toPlatform('weibo')}
119+
/>
120+
<SocialIcon
121+
src={`${ICON}/social/douban-share.png`}
122+
onClick={() => toPlatform('douban')}
123+
/>
124+
<SocialIcon
125+
src={`${ICON}/social/facebook-share.png`}
126+
onClick={() => toPlatform('facebook')}
127+
/>
128+
</SocialWrapper>
129+
<FocusDesc>Don’t tell me , tell the world ~</FocusDesc>
51130
</InnerWrapper>
52131
</Wrapper>
53132
)

‎src/components/SupportUs/styles/blocks.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,21 @@ export const Block = styled.div`
3030
3131
transition: all 0.1s;
3232
`
33+
export const Icon = styled(Img)`
34+
${css.size(16)};
35+
margin-right: 10px;
36+
fill: ${theme('thread.articleDigest')};
37+
`
38+
export const FeedIcon = styled(Icon)`
39+
transform: rotate(-30deg);
40+
`
3341
export const Title = styled.div`
34-
${css.flex('justify-between')}
42+
${css.flex('justify-between', 'align-center')}
3543
color: ${theme('thread.articleTitle')};
3644
font-size: 18px;
3745
`
3846
export const LinkIcon = styled(Img)`
3947
${css.size(18)};
40-
margin-top: 5px;
4148
fill: ${theme('button.primary')};
4249
opacity: 0;
4350
@@ -49,14 +56,15 @@ export const MailIcon = styled(LinkIcon)`
4956
${css.size(16)};
5057
`
5158
export const Divider = styled.div`
52-
width: 50px;
59+
width: 100%;
5360
height: 2px;
54-
background-color: ${theme('thread.articleDigest')};
61+
background-color: #004b5d;
5562
margin-top: 10px;
5663
margin-bottom: 15px;
57-
opacity: 0.6;
64+
opacity: 0.5;
5865
`
5966
export const Desc = styled.div`
6067
color: ${theme('thread.articleDigest')};
6168
font-size: 14px;
69+
line-height: 1.85;
6270
`

‎src/components/SupportUs/styles/index.ts‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import styled from 'styled-components'
22

33
import type { TTestable, TMetric } from '@/spec'
4+
45
import { theme } from '@/utils/themes'
56
import css from '@/utils/css'
7+
import Img from '@/Img'
68

79
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
810
'data-test-id': testid,
@@ -23,17 +25,25 @@ export const ContentWrapper = styled.div`
2325
${css.flexColumnGrow()};
2426
max-width: 100%;
2527
`
28+
export const SupportLogo = styled(Img)`
29+
${css.size(28)};
30+
transform: rotate(-12deg);
31+
margin-right: 12px;
32+
filter: saturate(0.7);
33+
`
2634
export const Title = styled.h1`
35+
${css.flex('align-center')};
2736
color: ${theme('thread.articleTitle')};
2837
font-size: 24px;
2938
margin-top: 8%;
3039
`
3140
export const Divider = styled.div`
32-
width: 80px;
41+
width: 120px;
3342
height: 1px;
3443
background-color: ${theme('thread.articleDigest')};
3544
margin-top: 18px;
3645
margin-bottom: 30px;
46+
margin-left: 5px;
3747
opacity: 0.6;
3848
`
3949
export const Desc = styled.div<{ align?: boolean }>`
@@ -43,24 +53,29 @@ export const Desc = styled.div<{ align?: boolean }>`
4353
width: 67%;
4454
line-height: 1.875;
4555
`
46-
export const FocusDesc = styled.span`
56+
export const MainDesc = styled(Desc)`
57+
text-indent: 32px;
58+
`
59+
export const FocusDesc = styled.div`
4760
color: ${theme('thread.articleTitle')};
61+
text-align: center;
62+
padding-right: 20px;
4863
font-size: 16px;
4964
line-height: 1.88;
5065
`
51-
export const BlocksWrapper = styled.div`
52-
${css.flex('align-both')};
53-
flex-wrap: wrap;
54-
margin-left: 10px;
66+
export const SocialWrapper = styled.div`
67+
${css.flex('align-center')};
68+
margin-top: 30px;
69+
margin-bottom: 30px;
70+
margin-left: -12px;
5571
`
56-
export const Block = styled.div`
57-
width: 300px;
58-
height: 150px;
59-
border: 1px solid;
60-
border-color: #004b5e;
61-
margin-right: 20px;
62-
background: #0d3b49;
63-
border-radius: 5px;
64-
margin-bottom: 20px;
65-
padding: 15px;
72+
export const SocialIcon = styled(Img)`
73+
${css.size(24)};
74+
margin-right: 15px;
75+
filter: saturate(0.4);
76+
77+
&:hover {
78+
filter: saturate(0.9);
79+
cursor: pointer;
80+
}
6681
`

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const MainWrapper = styled.div`
2020
`
2121
export const FilterWrapper = styled.div`
2222
${css.flex('align-center')};
23-
margin-bottom: 10px;
23+
margin-bottom: 3px;
2424
${css.media.mobile`margin-bottom: 4px;`};
25-
margin-left: -5px;
25+
margin-left: -3px;
2626
`

0 commit comments

Comments
 (0)