From 48c2a38b88a40ae34d6596294c0f6ee06bd4072a Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 25 Oct 2023 11:09:28 +0800
Subject: [PATCH 1/3] style: update share type

---
 src/widgets/Share/index.tsx       | 14 +++++++++++---
 src/widgets/Share/styles/index.ts |  8 +++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/widgets/Share/index.tsx b/src/widgets/Share/index.tsx
index 00d4a55db..f6dc3efea 100644
--- a/src/widgets/Share/index.tsx
+++ b/src/widgets/Share/index.tsx
@@ -20,7 +20,7 @@ import useViewingArticle from '@/hooks/useViewingArticle'
 import Tooltip from '@/widgets/Tooltip'
 import { toast } from '@/signal'
 
-import { SITE_SHARE_TYPE } from './constant'
+import { SITE_SHARE_TYPE, SHARE_TYPE } from './constant'
 import { parseLinksData, toPlatform } from './helper'
 import { Wrapper, Panel, LinkTip, QRTip, Icon } from './styles'
 
@@ -62,13 +62,21 @@ const Share: FC<TProps> = ({ modalOffset = '', ...restProps }) => {
           <Panel>
             <QRCode value={articleLink} size={120} />
 
-            <QRTip>打开自带扫一扫，即可将本内容分享到应用</QRTip>
+            <QRTip>打开微信 &gt; 发现 &gt; 扫一扫，即可将本文分享到微信。</QRTip>
           </Panel>
         }
         placement="bottom"
         delay={200}
       >
-        <Icon.QRCode />
+        <Icon.WeChat />
+      </Tooltip>
+
+      <Tooltip content={<LinkTip>分享到微博</LinkTip>} placement="bottom" delay={500}>
+        <Icon.Weibo
+          onClick={() => {
+            toPlatform(article, SHARE_TYPE.WEIBO, articleLink)
+          }}
+        />
       </Tooltip>
 
       <Tooltip content={<LinkTip>更多分享</LinkTip>} placement="bottom" delay={500}>
diff --git a/src/widgets/Share/styles/index.ts b/src/widgets/Share/styles/index.ts
index 9135b06a5..8575dc4ee 100644
--- a/src/widgets/Share/styles/index.ts
+++ b/src/widgets/Share/styles/index.ts
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import LinkSVG from '@/icons/Link'
 import QRCodeSVG from '@/icons/QRCodeSolid'
 import MoreSVG from '@/icons/ShareArrow'
+import WeiboRawSVG from '@/icons/social/WeiboRaw'
+import WeChatRawSVG from '@/icons/social/WeChatRaw'
 
 import { WithMargin } from '@/widgets/Common'
 
@@ -31,7 +33,7 @@ const commonIcon = (comp) => {
   return styled(comp)`
     ${css.size(18)};
     fill: ${theme('hint')};
-    opacity: 0.65;
+    opacity: 0.85;
     margin-left: 15px;
     cursor: pointer;
 
@@ -50,4 +52,8 @@ export const Icon = {
   `,
   More: commonIcon(MoreSVG),
   QRCode: commonIcon(QRCodeSVG),
+  WeChat: commonIcon(WeChatRawSVG),
+  Weibo: styled(commonIcon(WeiboRawSVG))`
+    margin-top: -3px;
+  `,
 }

From 1d40829094d6bc08577cd1e132cc6be768bcf0cb Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 25 Oct 2023 16:19:43 +0800
Subject: [PATCH 2/3] style(upvote-button): add primary concept

---
 .../LandingPage/EnjoyDev/UpdateBtn.tsx        |  2 +-
 src/spec/theme.d.ts                           |  2 ++
 src/widgets/AnimatedCount/AnimatedCount.tsx   | 28 +++++++++++++------
 src/widgets/AnimatedCount/index.tsx           | 17 +++++------
 src/widgets/AnimatedCount/styles/index.ts     |  3 +-
 src/widgets/Article/Post/SideInfo.tsx         |  6 +++-
 src/widgets/ColorSelector/index.tsx           |  1 +
 src/widgets/Upvote/ArticleLayout.tsx          | 11 ++++----
 src/widgets/Upvote/CommentLayout.tsx          |  2 +-
 src/widgets/Upvote/DefaultLayout.tsx          |  7 +++--
 src/widgets/Upvote/PostListLayout.tsx         |  2 +-
 src/widgets/Upvote/PostMinimalLayout.tsx      |  8 ++++--
 src/widgets/Upvote/SimpleLayout.tsx           |  2 +-
 src/widgets/Upvote/StickerLayout.tsx          |  2 +-
 src/widgets/Upvote/UpvoteBtn.tsx              |  6 +++-
 src/widgets/Upvote/styles/article_layout.ts   | 24 ++++++++++------
 src/widgets/Upvote/styles/default_layout.ts   | 17 +++++++----
 src/widgets/Upvote/styles/metric.ts           | 10 ++-----
 .../Upvote/styles/post_minimal_layout.ts      | 16 +++++++----
 src/widgets/Upvote/styles/upvote_btn.ts       | 12 ++++----
 utils/themes/index.ts                         |  4 +--
 utils/themes/skins/day.ts                     |  3 +-
 utils/themes/skins/night.ts                   |  3 +-
 23 files changed, 117 insertions(+), 71 deletions(-)

diff --git a/src/containers/content/LandingPage/EnjoyDev/UpdateBtn.tsx b/src/containers/content/LandingPage/EnjoyDev/UpdateBtn.tsx
index 7f206488e..6bb1d1266 100644
--- a/src/containers/content/LandingPage/EnjoyDev/UpdateBtn.tsx
+++ b/src/containers/content/LandingPage/EnjoyDev/UpdateBtn.tsx
@@ -29,7 +29,7 @@ const UpdateBtn: FC<TProps> = ({ text = '投票', num = 13, delay, dividerColor,
       <UpvoteIcon color={mainColor} />
       <Text color={mainColor}>{text}</Text>
       <Num>
-        <AnimatedCount count={count} color={mainColor} />
+        <AnimatedCount count={count} />
       </Num>
     </Wrapper>
   )
diff --git a/src/spec/theme.d.ts b/src/spec/theme.d.ts
index c5940b6b7..ae5c46beb 100755
--- a/src/spec/theme.d.ts
+++ b/src/spec/theme.d.ts
@@ -11,6 +11,8 @@ export type TThemeMap = {
     category: string // TODO: 'dark' | 'light'
   }
   htmlBg?: string
+  link?: string
+  blackActive?: string
   alphaBg?: string
   rainbow?: {
     red: string
diff --git a/src/widgets/AnimatedCount/AnimatedCount.tsx b/src/widgets/AnimatedCount/AnimatedCount.tsx
index 640903f29..df84da7ac 100755
--- a/src/widgets/AnimatedCount/AnimatedCount.tsx
+++ b/src/widgets/AnimatedCount/AnimatedCount.tsx
@@ -1,6 +1,9 @@
 import { FC, memo } from 'react'
 
+import type { TThemeName, TThemeMap, TColorName } from '@/spec'
 import SIZE from '@/constant/size'
+import { COLOR_NAME } from '@/constant/colors'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import useTheme from '@/hooks/useTheme'
 
 import FlipNumbers from 'react-flip-numbers'
@@ -9,22 +12,29 @@ import type { TProps } from '.'
 import { Wrapper } from './styles'
 import { getFontSize, getFlipNumOffset } from './styles/metric'
 
-const AnimatedCount: FC<TProps> = ({
-  count = 0,
-  size = SIZE.SMALL,
-  active = false,
-  color = '',
-}) => {
+const getCountColor = (active: boolean, themeMap: TThemeMap, primaryColor: TColorName): string => {
+  if (primaryColor === COLOR_NAME.BLACK) {
+    return themeMap.blackActive
+  }
+
+  return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.article.digest
+}
+
+const AnimatedCount: FC<TProps> = ({ count = 0, size = SIZE.SMALL, $active = false }) => {
+  const primaryColor = usePrimaryColor()
+  const { themeMap } = useTheme()
+
   const numSize = getFontSize(size)
   const offset = getFlipNumOffset(size)
-  const { themeMap } = useTheme()
+
+  const countColor = getCountColor($active, themeMap, primaryColor)
 
   return (
-    <Wrapper $active={active} count={count}>
+    <Wrapper $active={$active} count={count} key={countColor}>
       <FlipNumbers
         height={numSize}
         width={numSize - offset}
-        color={color || themeMap.article.info}
+        color={countColor}
         perspective={400}
         duration={0.8}
         numbers={String(count)}
diff --git a/src/widgets/AnimatedCount/index.tsx b/src/widgets/AnimatedCount/index.tsx
index f65e31c5d..51ca4ef02 100755
--- a/src/widgets/AnimatedCount/index.tsx
+++ b/src/widgets/AnimatedCount/index.tsx
@@ -1,10 +1,13 @@
 import { FC, memo } from 'react'
 
-import type { TSize } from '@/spec'
+import type { TActive, TSize } from '@/spec'
+
 import SIZE from '@/constant/size'
-import { Wrapper } from './styles'
 
 import AnimatedCount from './AnimatedCount'
+
+import { Wrapper } from './styles'
+
 // @ts-ignore
 // const LoadingValueContext = createContext()
 
@@ -31,14 +34,12 @@ import AnimatedCount from './AnimatedCount'
 export type TProps = {
   count?: number
   size?: TSize
-  active?: boolean
-  color?: string
-}
+} & TActive
 
-const Count: FC<TProps> = ({ count = 0, size = SIZE.SMALL, active = false, color = '' }) => {
+const Count: FC<TProps> = ({ count = 0, size = SIZE.SMALL, $active = false }) => {
   return (
-    <Wrapper $active={active} count={count}>
-      <AnimatedCount count={count} size={size} active={active} color={color} />
+    <Wrapper $active={$active} count={count}>
+      <AnimatedCount count={count} size={size} $active={$active} />
     </Wrapper>
     // <LoadingValueContext.Provider value={{ count, size, active }}>
     //   <AnimatedCount count={count} size={size} active={active} />
diff --git a/src/widgets/AnimatedCount/styles/index.ts b/src/widgets/AnimatedCount/styles/index.ts
index cf4ec582b..7f09d0dfe 100755
--- a/src/widgets/AnimatedCount/styles/index.ts
+++ b/src/widgets/AnimatedCount/styles/index.ts
@@ -7,6 +7,7 @@ type TWrapper = { count: number } & TActive
 export const Wrapper = styled.div<TWrapper>`
   font-weight: ${({ count }) => (count > 0 ? 500 : 400)};
   opacity: ${({ count }) => (count === 0 ? 0.85 : 1)};
-  filter: brightness(1.2);
+  /* filter: brightness(1.2); */
+  color: tomato;
 `
 export const holder = 1
diff --git a/src/widgets/Article/Post/SideInfo.tsx b/src/widgets/Article/Post/SideInfo.tsx
index 0ee3b9595..9b1da6bc5 100644
--- a/src/widgets/Article/Post/SideInfo.tsx
+++ b/src/widgets/Article/Post/SideInfo.tsx
@@ -5,6 +5,8 @@ import type { TPost } from '@/spec'
 import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd'
 import { AVATAR_LAYOUT } from '@/constant/layout'
 
+import { mockUsers } from '@/mock'
+
 import { Br } from '@/widgets/Common'
 import Upvote from '@/widgets/Upvote'
 import ArticleCatState from '@/widgets/ArticleCatState'
@@ -31,12 +33,14 @@ const SideInfo: FC<TProps> = ({ article }) => {
   const { insertedAt, articleTags, upvotesCount, meta, viewerHasUpvoted } = article
   const { latestUpvotedUsers } = meta
 
+  const users = mockUsers(5)
+
   return (
     <Wrapper>
       <InnerWrapper>
         <Upvote
           count={upvotesCount}
-          avatarList={meta.latestUpvotedUsers}
+          avatarList={users}
           viewerHasUpvoted={viewerHasUpvoted}
           type="article"
           bottom={35}
diff --git a/src/widgets/ColorSelector/index.tsx b/src/widgets/ColorSelector/index.tsx
index cb00a155c..7d0c64e6e 100755
--- a/src/widgets/ColorSelector/index.tsx
+++ b/src/widgets/ColorSelector/index.tsx
@@ -46,6 +46,7 @@ const ColorSelector: FC<TProps> = ({
     <Tooltip
       placement={placement}
       trigger="click"
+      hideOnClick={false}
       offset={offset}
       content={
         <Wrapper testid={testid}>
diff --git a/src/widgets/Upvote/ArticleLayout.tsx b/src/widgets/Upvote/ArticleLayout.tsx
index 13882b2b5..6de4050ef 100755
--- a/src/widgets/Upvote/ArticleLayout.tsx
+++ b/src/widgets/Upvote/ArticleLayout.tsx
@@ -32,16 +32,17 @@ const Upvote: FC<TProps> = ({
 }) => {
   const primaryColor = usePrimaryColor()
   const { themeMap } = useTheme()
-  const numColor = themeMap.rainbow[primaryColor.toLowerCase()]
 
   return (
     <Wrapper testid={testid}>
-      <Button color={primaryColor}>
-        <UpvoteIcon color={primaryColor} />
+      <Button color={primaryColor} $active={viewerHasUpvoted}>
+        <UpvoteIcon color={primaryColor} $active={viewerHasUpvoted} />
         <CountWrapper>
-          <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" color={numColor} />
+          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </CountWrapper>
-        <Alias color={primaryColor}>票</Alias>
+        <Alias color={primaryColor} $active={viewerHasUpvoted}>
+          票
+        </Alias>
       </Button>
     </Wrapper>
   )
diff --git a/src/widgets/Upvote/CommentLayout.tsx b/src/widgets/Upvote/CommentLayout.tsx
index deba1706a..eb503644d 100755
--- a/src/widgets/Upvote/CommentLayout.tsx
+++ b/src/widgets/Upvote/CommentLayout.tsx
@@ -46,7 +46,7 @@ const Upvote: FC<TProps> = ({
         <Alias>{alias}</Alias>
         {count !== 0 && (
           <CountWrapper>
-            <AnimatedCount count={count} active={viewerHasUpvoted} size="small" />
+            <AnimatedCount count={count} $active={viewerHasUpvoted} size="small" />
           </CountWrapper>
         )}
       </Button>
diff --git a/src/widgets/Upvote/DefaultLayout.tsx b/src/widgets/Upvote/DefaultLayout.tsx
index a83d5d983..fa1c4f74c 100755
--- a/src/widgets/Upvote/DefaultLayout.tsx
+++ b/src/widgets/Upvote/DefaultLayout.tsx
@@ -8,6 +8,7 @@ import { FC } from 'react'
 import type { TUser } from '@/spec'
 import { buildLog } from '@/logger'
 
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import Facepile from '@/widgets/Facepile'
 
 import AnimatedCount from '../AnimatedCount'
@@ -43,16 +44,18 @@ const Upvote: FC<TProps> = ({
   onAction = log,
   avatarList,
 }) => {
+  const primaryColor = usePrimaryColor()
+
   const noOne = count === 0
 
   return (
     <Wrapper testid={testid}>
-      <Button>
+      <Button $active={viewerHasUpvoted} color={primaryColor}>
         <UpvoteBtnWrapper>
           <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
         </UpvoteBtnWrapper>
         <Count>
-          <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" />
+          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </Count>
       </Button>
       {!noOne && (
diff --git a/src/widgets/Upvote/PostListLayout.tsx b/src/widgets/Upvote/PostListLayout.tsx
index afd424b78..abd97843f 100755
--- a/src/widgets/Upvote/PostListLayout.tsx
+++ b/src/widgets/Upvote/PostListLayout.tsx
@@ -35,7 +35,7 @@ const Upvote: FC<TProps> = ({
         <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
       </UpWrapper>
       <CountWrapper>
-        <AnimatedCount count={count} active={viewerHasUpvoted} />
+        <AnimatedCount count={count} $active={viewerHasUpvoted} />
       </CountWrapper>
     </Wrapper>
   )
diff --git a/src/widgets/Upvote/PostMinimalLayout.tsx b/src/widgets/Upvote/PostMinimalLayout.tsx
index bcc073e17..733530038 100644
--- a/src/widgets/Upvote/PostMinimalLayout.tsx
+++ b/src/widgets/Upvote/PostMinimalLayout.tsx
@@ -8,8 +8,10 @@ import { FC, memo } from 'react'
 
 import { buildLog } from '@/logger'
 
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { UPVOTE_LAYOUT } from '@/constant/layout'
 import AnimatedCount from '@/widgets/AnimatedCount'
+
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, Button, UpWrapper, CountWrapper } from './styles/post_minimal_layout'
@@ -30,9 +32,11 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper testid={testid}>
-      <Button>
+      <Button $active={viewerHasUpvoted} color={primaryColor}>
         <UpWrapper>
           <UpvoteBtn
             type={UPVOTE_LAYOUT.COMMENT}
@@ -42,7 +46,7 @@ const Upvote: FC<TProps> = ({
           />
         </UpWrapper>
         <CountWrapper>
-          <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" />
+          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </CountWrapper>
       </Button>
     </Wrapper>
diff --git a/src/widgets/Upvote/SimpleLayout.tsx b/src/widgets/Upvote/SimpleLayout.tsx
index b130fcb13..949162148 100644
--- a/src/widgets/Upvote/SimpleLayout.tsx
+++ b/src/widgets/Upvote/SimpleLayout.tsx
@@ -35,7 +35,7 @@ const Upvote: FC<TProps> = ({
         <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
       </UpvoteBtnWrapper>
       <CountWrapper>
-        <AnimatedCount count={count} active={viewerHasUpvoted} size="small" />
+        <AnimatedCount count={count} $active={viewerHasUpvoted} size="small" />
       </CountWrapper>
     </Wrapper>
   )
diff --git a/src/widgets/Upvote/StickerLayout.tsx b/src/widgets/Upvote/StickerLayout.tsx
index 230f03314..61ca46b9e 100755
--- a/src/widgets/Upvote/StickerLayout.tsx
+++ b/src/widgets/Upvote/StickerLayout.tsx
@@ -48,7 +48,7 @@ const Upvote: FC<TProps> = ({
           />
         </UpWrapper>
         <CountWrapper>
-          <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" />
+          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </CountWrapper>
       </Button>
       {!noOne && (
diff --git a/src/widgets/Upvote/UpvoteBtn.tsx b/src/widgets/Upvote/UpvoteBtn.tsx
index 74ce6b590..4374a97a0 100755
--- a/src/widgets/Upvote/UpvoteBtn.tsx
+++ b/src/widgets/Upvote/UpvoteBtn.tsx
@@ -5,8 +5,10 @@
  */
 
 import { FC, memo, useState, useCallback } from 'react'
+
 import { authWarn } from '@/signal'
 import useAccount from '@/hooks/useAccount'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import type { TUpvoteLayout } from '@/spec'
 import { buildLog } from '@/logger'
@@ -34,6 +36,8 @@ const UpvoteBtn: FC<TProps> = ({
   const accountInfo = useAccount()
   const isLogin = !!accountInfo
 
+  const primaryColor = usePrimaryColor()
+
   const handleClick = useCallback(() => {
     if (!isLogin) return authWarn()
 
@@ -52,7 +56,7 @@ const UpvoteBtn: FC<TProps> = ({
     <Wrapper $showAnimation={showAnimation} type={type}>
       <ContentWrapper>
         <IconWrapper onClick={handleClick} type={type}>
-          <UpIcon type={type} $active={viewerHasUpvoted} count={count} />
+          <UpIcon type={type} $active={viewerHasUpvoted} count={count} color={primaryColor} />
         </IconWrapper>
       </ContentWrapper>
     </Wrapper>
diff --git a/src/widgets/Upvote/styles/article_layout.ts b/src/widgets/Upvote/styles/article_layout.ts
index d73b901bb..436db964d 100755
--- a/src/widgets/Upvote/styles/article_layout.ts
+++ b/src/widgets/Upvote/styles/article_layout.ts
@@ -1,25 +1,28 @@
 import styled from 'styled-components'
 
-import type { TColorName, TTestable } from '@/spec'
+import type { TActive, TColorName, TTestable } from '@/spec'
 import UpvoteSVG from '@/icons/Upvote'
-import css, { theme, rainbow, rainbowLight } from '@/css'
+import css, { theme, rainbow, rainbowLink, rainbowLight } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
   ${css.column('align-both')};
 `
-export const UpvoteIcon = styled(UpvoteSVG)<{ color: TColorName }>`
+type TUpvoteIcon = { color: TColorName } & TActive
+export const UpvoteIcon = styled(UpvoteSVG)<TUpvoteIcon>`
   ${css.size(15)};
-  fill: ${({ color }) => rainbow(color)};
+  fill: ${({ color, $active }) => ($active ? rainbow(color) : theme('article.digest'))};
   transform: scale(1, 0.8);
   filter: brightness(1.2);
 `
-export const Button = styled.div<{ color: TColorName }>`
+export const Button = styled.div<TUpvoteIcon>`
   ${css.row('align-both')};
   border: 1px solid;
-  border-color: ${({ color }) => rainbow(color)};
-  background: ${theme('alphaBg')};
+  border-color: ${({ $active, color }) =>
+    $active ? rainbowLink(color, 'blackActive') : theme('button.upvoteBorder')};
+
+  background-color: ${({ $active, color }) => ($active ? rainbowLight(color) : 'transparent')};
 
   border-radius: 14px;
   width: 172px;
@@ -27,7 +30,9 @@ export const Button = styled.div<{ color: TColorName }>`
   padding-top: 11px;
 
   &:hover {
+    border-color: ${({ color }) => rainbowLink(color, 'blackActive')};
     background-color: ${({ color }) => rainbowLight(color)};
+
     cursor: pointer;
   }
 
@@ -36,9 +41,10 @@ export const Button = styled.div<{ color: TColorName }>`
 export const CountWrapper = styled.div`
   margin-left: 8px;
 `
-export const Alias = styled.div<{ color: TColorName }>`
+
+export const Alias = styled.div<TUpvoteIcon>`
   font-size: 15px;
-  color: ${({ color }) => rainbow(color)};
+  color: ${({ color, $active }) => ($active ? rainbow(color) : theme('article.digest'))};
   margin-left: 5px;
   font-weight: 400;
   filter: brightness(1.2);
diff --git a/src/widgets/Upvote/styles/default_layout.ts b/src/widgets/Upvote/styles/default_layout.ts
index 550e56825..3a0e8cc8f 100755
--- a/src/widgets/Upvote/styles/default_layout.ts
+++ b/src/widgets/Upvote/styles/default_layout.ts
@@ -1,24 +1,30 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TColorName, TTestable } from '@/spec'
+import css, { rainbowLight, rainbowLink, theme } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
   ${css.row('align-center')};
 `
-export const Button = styled.div`
+type TButton = TActive & { color: TColorName }
+export const Button = styled.div<TButton>`
   ${css.row('align-center')};
   border: 1px solid;
-  border-color: ${theme('divider')};
   margin-right: 16px;
 
+  border-color: ${({ $active, color }) =>
+    $active ? rainbowLink(color, 'blackActive') : theme('button.upvoteBorder')};
+
+  background-color: ${({ $active, color }) => ($active ? rainbowLight(color) : 'transparent')};
+
   border-radius: 10px;
   padding: 12px 15px;
 
   &:hover {
-    border-color: ${theme('lightText')};
+    border-color: ${({ color }) => rainbowLink(color, 'blackActive')};
+    background-color: ${({ color }) => rainbowLight(color)};
     cursor: pointer;
   }
 
@@ -44,6 +50,7 @@ export const Alias = styled.div`
 `
 export const UpvoteBtnWrapper = styled.div`
   ${css.row('align-both')};
+  margin-top: 1px;
 
   ${css.media.mobile`
     margin-top: 4px;
diff --git a/src/widgets/Upvote/styles/metric.ts b/src/widgets/Upvote/styles/metric.ts
index 52715793f..4a8981efd 100755
--- a/src/widgets/Upvote/styles/metric.ts
+++ b/src/widgets/Upvote/styles/metric.ts
@@ -1,14 +1,6 @@
 import type { TUpvoteLayout } from '@/spec'
 import { UPVOTE_LAYOUT } from '@/constant/layout'
 
-import { theme } from '@/css'
-
-export const getIconColor = ($active: boolean): string => {
-  if ($active) return theme('article.title')
-
-  return theme('article.info')
-}
-
 export const getIconSize = (type: TUpvoteLayout): string => {
   switch (type) {
     case UPVOTE_LAYOUT.ARTICLE: {
@@ -24,3 +16,5 @@ export const getIconSize = (type: TUpvoteLayout): string => {
     }
   }
 }
+
+export const holder = 1
diff --git a/src/widgets/Upvote/styles/post_minimal_layout.ts b/src/widgets/Upvote/styles/post_minimal_layout.ts
index 3bfe7b310..40360d3ce 100644
--- a/src/widgets/Upvote/styles/post_minimal_layout.ts
+++ b/src/widgets/Upvote/styles/post_minimal_layout.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TColorName, TTestable } from '@/spec'
+import css, { theme, rainbowLink, rainbowLight } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
@@ -9,19 +9,25 @@ export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   ${css.column('align-both')};
 `
 
-export const Button = styled.div`
+type TButton = TActive & { color: TColorName }
+export const Button = styled.div<TButton>`
   ${css.column('align-both')};
   border: 1px solid;
   border-color: ${theme('button.upvoteBorder')};
 
+  border-color: ${({ $active, color }) =>
+    $active ? rainbowLink(color) : theme('button.upvoteBorder')};
+
+  background-color: ${({ $active, color }) => ($active ? rainbowLight(color) : 'transparent')};
+
   border-radius: 6px;
   padding: 0 8px;
   padding-top: 4px;
   padding-bottom: 7px;
 
   &:hover {
-    border-color: ${theme('lightText')};
-    background: ${theme('alphaBg')};
+    border-color: ${({ color }) => rainbowLink(color)};
+    background-color: ${({ color }) => rainbowLight(color)};
     cursor: pointer;
   }
 
diff --git a/src/widgets/Upvote/styles/upvote_btn.ts b/src/widgets/Upvote/styles/upvote_btn.ts
index e474b9f18..411f83ccf 100755
--- a/src/widgets/Upvote/styles/upvote_btn.ts
+++ b/src/widgets/Upvote/styles/upvote_btn.ts
@@ -1,12 +1,12 @@
 import styled, { keyframes } from 'styled-components'
 
-import type { TUpvoteLayout, TActive } from '@/spec'
+import type { TUpvoteLayout, TActive, TColorName } from '@/spec'
 import { UPVOTE_LAYOUT } from '@/constant/layout'
 
 import UpvoteIcon from '@/icons/Upvote'
-import css, { theme } from '@/css'
+import css, { theme, rainbowLink } from '@/css'
 
-import { getIconSize, getIconColor } from './metric'
+import { getIconSize } from './metric'
 
 const topBubbles = keyframes`
   0% {
@@ -116,6 +116,7 @@ export const Wrapper = styled.div<TWrapper>`
 export const ContentWrapper = styled.div`
   ${css.row('align-center')};
 `
+
 export const IconWrapper = styled.div<{ type: TUpvoteLayout }>`
   ${css.row('align-center', 'justify-start')};
   width: ${({ type }) => (type !== UPVOTE_LAYOUT.ARTICLE ? '20px' : 'auto')};
@@ -135,10 +136,9 @@ export const IconWrapper = styled.div<{ type: TUpvoteLayout }>`
     transition: all 0.2s;
   }
 `
-type TUpIcon = { type: TUpvoteLayout; count: number } & TActive
+type TUpIcon = { type: TUpvoteLayout; count: number } & TActive & { color: TColorName }
 export const UpIcon = styled(UpvoteIcon)<TUpIcon>`
-  fill: ${({ $active }) => getIconColor($active)};
-
+  fill: ${({ $active, color }) => ($active ? rainbowLink(color, 'blackActive') : theme('hint'))};
   width: ${({ type }) => getIconSize(type)};
   height: ${({ type }) => getIconSize(type)};
 
diff --git a/utils/themes/index.ts b/utils/themes/index.ts
index 4eb5ffe62..7321b337c 100755
--- a/utils/themes/index.ts
+++ b/utils/themes/index.ts
@@ -34,9 +34,9 @@ export const themeCoverIndexMap = map(path(['coverIndex']), themeSkins)
 export const theme = (themeKey: TFlatThemeKey): TTheme =>
   path(['theme', ...split('.', themeKey)]) || 'wheat'
 
-export const rainbowLink = (primaryColor: TColorName): string => {
+export const rainbowLink = (primaryColor: TColorName, rollbackForBlack = 'link'): string => {
   if (primaryColor === COLOR_NAME.BLACK) {
-    return theme('link')
+    return theme(rollbackForBlack as TFlatThemeKey)
   }
 
   return theme(`rainbow.${camelize(primaryColor)}` as TFlatThemeKey)
diff --git a/utils/themes/skins/day.ts b/utils/themes/skins/day.ts
index 2a8761681..9ab9e52aa 100644
--- a/utils/themes/skins/day.ts
+++ b/utils/themes/skins/day.ts
@@ -43,6 +43,7 @@ const day = {
   },
   font: fontColor,
   link,
+  blackActive: '#3171DB',
   divider: border,
   alphaBg: '#ffffff95',
   alphaBg2: '#fffffff2',
@@ -241,7 +242,7 @@ const day = {
     activeBg: darken(primaryColor, 5),
     clicked: primaryColor,
     ghostBorder: hint,
-    upvoteBorder: '#dadada',
+    upvoteBorder: '#c5c5c5',
     boxShadow: 'rgb(202 202 202 / 10%) -1px 1px 16px 2px',
   },
   navigator: {
diff --git a/utils/themes/skins/night.ts b/utils/themes/skins/night.ts
index 9d13df140..c93fa4c41 100644
--- a/utils/themes/skins/night.ts
+++ b/utils/themes/skins/night.ts
@@ -43,6 +43,7 @@ const night = {
   },
   font: fontColor,
   link,
+  blackActive: '#3171DB',
   divider: border,
   alphaBg: hoverBg,
   alphaBg2: '#1c1c1cb8',
@@ -242,7 +243,7 @@ const night = {
     activeBg: darken(primaryColor, 5),
     clicked: primaryColor,
     ghostBorder: '#606060',
-    upvoteBorder: '#484848',
+    upvoteBorder: '#5f5f5f',
     boxShadow: 'rgb(24 24 24 / 32%) -1px 1px 16px 2px',
   },
   navigator: {

From 24c8cf8c6c87d62e1bd20963da44f8369f80862b Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 25 Oct 2023 21:17:35 +0800
Subject: [PATCH 3/3] style(upvote-button): extract animation to parent hook

---
 src/widgets/Upvote/ArticleLayout.tsx          | 11 +++---
 src/widgets/Upvote/CommentLayout.tsx          | 14 ++++++--
 src/widgets/Upvote/DefaultLayout.tsx          | 10 ++++--
 src/widgets/Upvote/FixedHeaderLayout.tsx      |  7 ++--
 src/widgets/Upvote/GeneralLayout.tsx          |  8 +++--
 src/widgets/Upvote/PostListLayout.tsx         |  9 +++--
 src/widgets/Upvote/PostMinimalLayout.tsx      |  6 ++--
 src/widgets/Upvote/SimpleLayout.tsx           |  7 ++--
 src/widgets/Upvote/StickerLayout.tsx          |  6 ++--
 src/widgets/Upvote/UpvoteBtn.tsx              | 31 +++--------------
 src/widgets/Upvote/styles/article_layout.ts   | 10 ++----
 src/widgets/Upvote/styles/comment_layout.ts   | 24 +++++++------
 src/widgets/Upvote/styles/default_layout.ts   |  1 -
 .../Upvote/styles/post_minimal_layout.ts      |  2 +-
 src/widgets/Upvote/useUpvote.tsx              | 34 +++++++++++++++++++
 15 files changed, 110 insertions(+), 70 deletions(-)
 create mode 100644 src/widgets/Upvote/useUpvote.tsx

diff --git a/src/widgets/Upvote/ArticleLayout.tsx b/src/widgets/Upvote/ArticleLayout.tsx
index 6de4050ef..eaff98495 100755
--- a/src/widgets/Upvote/ArticleLayout.tsx
+++ b/src/widgets/Upvote/ArticleLayout.tsx
@@ -9,10 +9,11 @@ import { FC, memo } from 'react'
 import { buildLog } from '@/logger'
 
 import usePrimaryColor from '@/hooks/usePrimaryColor'
-import useTheme from '@/hooks/useTheme'
 import AnimatedCount from '@/widgets/AnimatedCount'
 
-import { Wrapper, Button, UpvoteIcon, CountWrapper, Alias } from './styles/article_layout'
+import useUpvote from './useUpvote'
+import UpvoteBtn from './UpvoteBtn'
+import { Wrapper, Button, CountWrapper, Alias } from './styles/article_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('w:Upvote:index')
@@ -31,12 +32,12 @@ const Upvote: FC<TProps> = ({
   onAction = log,
 }) => {
   const primaryColor = usePrimaryColor()
-  const { themeMap } = useTheme()
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
 
   return (
     <Wrapper testid={testid}>
-      <Button color={primaryColor} $active={viewerHasUpvoted}>
-        <UpvoteIcon color={primaryColor} $active={viewerHasUpvoted} />
+      <Button color={primaryColor} $active={viewerHasUpvoted} onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
         <CountWrapper>
           <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </CountWrapper>
diff --git a/src/widgets/Upvote/CommentLayout.tsx b/src/widgets/Upvote/CommentLayout.tsx
index eb503644d..ff6e23f1b 100755
--- a/src/widgets/Upvote/CommentLayout.tsx
+++ b/src/widgets/Upvote/CommentLayout.tsx
@@ -8,8 +8,11 @@ import { FC, memo } from 'react'
 
 import { buildLog } from '@/logger'
 
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { UPVOTE_LAYOUT } from '@/constant/layout'
 import AnimatedCount from '@/widgets/AnimatedCount'
+
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, Button, Alias, UpWrapper, CountWrapper } from './styles/comment_layout'
@@ -32,18 +35,23 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const primaryColor = usePrimaryColor()
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   return (
     <Wrapper testid={testid}>
-      <Button>
+      <Button color={primaryColor} $active={viewerHasUpvoted} onClick={handleClick}>
         <UpWrapper>
           <UpvoteBtn
             type={UPVOTE_LAYOUT.COMMENT}
             viewerHasUpvoted={viewerHasUpvoted}
-            onAction={onAction}
+            startAnimate={startAnimate}
             count={count}
           />
         </UpWrapper>
-        <Alias>{alias}</Alias>
+        <Alias color={primaryColor} $active={viewerHasUpvoted}>
+          {alias}
+        </Alias>
         {count !== 0 && (
           <CountWrapper>
             <AnimatedCount count={count} $active={viewerHasUpvoted} size="small" />
diff --git a/src/widgets/Upvote/DefaultLayout.tsx b/src/widgets/Upvote/DefaultLayout.tsx
index fa1c4f74c..635b83f5f 100755
--- a/src/widgets/Upvote/DefaultLayout.tsx
+++ b/src/widgets/Upvote/DefaultLayout.tsx
@@ -11,6 +11,7 @@ import { buildLog } from '@/logger'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
 import Facepile from '@/widgets/Facepile'
 
+import useUpvote from './useUpvote'
 import AnimatedCount from '../AnimatedCount'
 import UpvoteBtn from './UpvoteBtn'
 
@@ -45,14 +46,19 @@ const Upvote: FC<TProps> = ({
   avatarList,
 }) => {
   const primaryColor = usePrimaryColor()
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
 
   const noOne = count === 0
 
   return (
     <Wrapper testid={testid}>
-      <Button $active={viewerHasUpvoted} color={primaryColor}>
+      <Button $active={viewerHasUpvoted} color={primaryColor} onClick={handleClick}>
         <UpvoteBtnWrapper>
-          <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+          <UpvoteBtn
+            viewerHasUpvoted={viewerHasUpvoted}
+            count={count}
+            startAnimate={startAnimate}
+          />
         </UpvoteBtnWrapper>
         <Count>
           <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
diff --git a/src/widgets/Upvote/FixedHeaderLayout.tsx b/src/widgets/Upvote/FixedHeaderLayout.tsx
index ae1f4f67e..498fcd72a 100755
--- a/src/widgets/Upvote/FixedHeaderLayout.tsx
+++ b/src/widgets/Upvote/FixedHeaderLayout.tsx
@@ -10,6 +10,7 @@ import { buildLog } from '@/logger'
 
 import { Space } from '@/widgets/Common'
 
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, UpvoteBtnWrapper, Count } from './styles/fixed_header_layout'
@@ -30,12 +31,14 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   const noOne = count === 0
 
   return (
-    <Wrapper testid={testid}>
+    <Wrapper testid={testid} onClick={handleClick}>
       <UpvoteBtnWrapper>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
       </UpvoteBtnWrapper>
       <Space right={2} />
       <Count noOne={noOne}>{count}</Count>
diff --git a/src/widgets/Upvote/GeneralLayout.tsx b/src/widgets/Upvote/GeneralLayout.tsx
index f810fb2df..1f10ff346 100644
--- a/src/widgets/Upvote/GeneralLayout.tsx
+++ b/src/widgets/Upvote/GeneralLayout.tsx
@@ -12,6 +12,7 @@ import { buildLog } from '@/logger'
 import Facepile from '@/widgets/Facepile'
 import { DesktopOnly } from '@/widgets/Common'
 
+import useUpvote from './useUpvote'
 import AnimatedCount from '../AnimatedCount'
 import UpvoteBtn from './UpvoteBtn'
 
@@ -35,16 +36,17 @@ const Upvote: FC<TProps> = ({
   onAction = log,
   avatarList,
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
   const noOne = count === 0
 
   return (
     <Wrapper testid={testid}>
-      <UpvoteBtnWrapper>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+      <UpvoteBtnWrapper onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
       </UpvoteBtnWrapper>
       <AnimatedCount
         count={count}
-        active={viewerHasUpvoted}
+        $active={viewerHasUpvoted}
         size={count === 0 ? 'small' : 'medium'}
       />
       <DesktopOnly>{!noOne && <LineDivider />}</DesktopOnly>
diff --git a/src/widgets/Upvote/PostListLayout.tsx b/src/widgets/Upvote/PostListLayout.tsx
index abd97843f..0d5ee0381 100755
--- a/src/widgets/Upvote/PostListLayout.tsx
+++ b/src/widgets/Upvote/PostListLayout.tsx
@@ -9,8 +9,9 @@ import { FC, memo } from 'react'
 import { buildLog } from '@/logger'
 
 import AnimatedCount from '@/widgets/AnimatedCount'
-import UpvoteBtn from './UpvoteBtn'
 
+import useUpvote from './useUpvote'
+import UpvoteBtn from './UpvoteBtn'
 import { Wrapper, UpWrapper, CountWrapper } from './styles/post_list_layout'
 
 /* eslint-disable-next-line */
@@ -29,10 +30,12 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   return (
     <Wrapper testid={testid}>
-      <UpWrapper>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+      <UpWrapper onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
       </UpWrapper>
       <CountWrapper>
         <AnimatedCount count={count} $active={viewerHasUpvoted} />
diff --git a/src/widgets/Upvote/PostMinimalLayout.tsx b/src/widgets/Upvote/PostMinimalLayout.tsx
index 733530038..f7e5d6ac0 100644
--- a/src/widgets/Upvote/PostMinimalLayout.tsx
+++ b/src/widgets/Upvote/PostMinimalLayout.tsx
@@ -12,6 +12,7 @@ import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { UPVOTE_LAYOUT } from '@/constant/layout'
 import AnimatedCount from '@/widgets/AnimatedCount'
 
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, Button, UpWrapper, CountWrapper } from './styles/post_minimal_layout'
@@ -33,15 +34,16 @@ const Upvote: FC<TProps> = ({
   onAction = log,
 }) => {
   const primaryColor = usePrimaryColor()
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
 
   return (
-    <Wrapper testid={testid}>
+    <Wrapper testid={testid} onClick={() => handleClick()}>
       <Button $active={viewerHasUpvoted} color={primaryColor}>
         <UpWrapper>
           <UpvoteBtn
             type={UPVOTE_LAYOUT.COMMENT}
             viewerHasUpvoted={viewerHasUpvoted}
-            onAction={onAction}
+            startAnimate={startAnimate}
             count={count}
           />
         </UpWrapper>
diff --git a/src/widgets/Upvote/SimpleLayout.tsx b/src/widgets/Upvote/SimpleLayout.tsx
index 949162148..5b71856ec 100644
--- a/src/widgets/Upvote/SimpleLayout.tsx
+++ b/src/widgets/Upvote/SimpleLayout.tsx
@@ -9,6 +9,7 @@ import { FC, memo } from 'react'
 import { buildLog } from '@/logger'
 
 import AnimatedCount from '../AnimatedCount'
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, UpvoteBtnWrapper, CountWrapper } from './styles/simple_layout'
@@ -29,10 +30,12 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   return (
-    <Wrapper testid={testid}>
+    <Wrapper testid={testid} onClick={() => handleClick()}>
       <UpvoteBtnWrapper>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
       </UpvoteBtnWrapper>
       <CountWrapper>
         <AnimatedCount count={count} $active={viewerHasUpvoted} size="small" />
diff --git a/src/widgets/Upvote/StickerLayout.tsx b/src/widgets/Upvote/StickerLayout.tsx
index 61ca46b9e..eed31e416 100755
--- a/src/widgets/Upvote/StickerLayout.tsx
+++ b/src/widgets/Upvote/StickerLayout.tsx
@@ -13,6 +13,7 @@ import { UPVOTE_LAYOUT } from '@/constant/layout'
 import AnimatedCount from '@/widgets/AnimatedCount'
 import Facepile from '@/widgets/Facepile'
 
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 import { Wrapper, Button, FacesWrapper, UpWrapper, CountWrapper } from './styles/sticker_layout'
 
@@ -34,16 +35,17 @@ const Upvote: FC<TProps> = ({
   onAction = log,
   avatarList = [],
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
   const noOne = count === 0
 
   return (
     <Wrapper testid={testid}>
-      <Button>
+      <Button onClick={handleClick}>
         <UpWrapper>
           <UpvoteBtn
             type={UPVOTE_LAYOUT.COMMENT}
             viewerHasUpvoted={viewerHasUpvoted}
-            onAction={onAction}
+            startAnimate={startAnimate}
             count={count}
           />
         </UpWrapper>
diff --git a/src/widgets/Upvote/UpvoteBtn.tsx b/src/widgets/Upvote/UpvoteBtn.tsx
index 4374a97a0..424d8e905 100755
--- a/src/widgets/Upvote/UpvoteBtn.tsx
+++ b/src/widgets/Upvote/UpvoteBtn.tsx
@@ -4,10 +4,8 @@
  *
  */
 
-import { FC, memo, useState, useCallback } from 'react'
+import { FC, memo } from 'react'
 
-import { authWarn } from '@/signal'
-import useAccount from '@/hooks/useAccount'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import type { TUpvoteLayout } from '@/spec'
@@ -22,40 +20,21 @@ type TProps = {
   type?: TUpvoteLayout
   viewerHasUpvoted?: boolean
   count?: number
-  onAction: (viewerHasUpvoted: boolean) => void
+  startAnimate?: boolean
 }
 
 const UpvoteBtn: FC<TProps> = ({
   type = 'default',
   viewerHasUpvoted = false,
+  startAnimate = false,
   count = 0,
-  onAction,
 }) => {
-  const [showAnimation, setShowAnimation] = useState(false)
-  const [num, setNum] = useState(0)
-  const accountInfo = useAccount()
-  const isLogin = !!accountInfo
-
   const primaryColor = usePrimaryColor()
 
-  const handleClick = useCallback(() => {
-    if (!isLogin) return authWarn()
-
-    onAction(!viewerHasUpvoted)
-    if (viewerHasUpvoted) return
-    setNum(num + 1)
-
-    if (!showAnimation) {
-      setShowAnimation(true)
-
-      setTimeout(() => setShowAnimation(false), 950)
-    }
-  }, [showAnimation, viewerHasUpvoted, num, onAction, isLogin])
-
   return (
-    <Wrapper $showAnimation={showAnimation} type={type}>
+    <Wrapper $showAnimation={startAnimate} type={type}>
       <ContentWrapper>
-        <IconWrapper onClick={handleClick} type={type}>
+        <IconWrapper type={type}>
           <UpIcon type={type} $active={viewerHasUpvoted} count={count} color={primaryColor} />
         </IconWrapper>
       </ContentWrapper>
diff --git a/src/widgets/Upvote/styles/article_layout.ts b/src/widgets/Upvote/styles/article_layout.ts
index 436db964d..aea18a8e7 100755
--- a/src/widgets/Upvote/styles/article_layout.ts
+++ b/src/widgets/Upvote/styles/article_layout.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
 import type { TActive, TColorName, TTestable } from '@/spec'
-import UpvoteSVG from '@/icons/Upvote'
 import css, { theme, rainbow, rainbowLink, rainbowLight } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
@@ -10,12 +9,6 @@ export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   ${css.column('align-both')};
 `
 type TUpvoteIcon = { color: TColorName } & TActive
-export const UpvoteIcon = styled(UpvoteSVG)<TUpvoteIcon>`
-  ${css.size(15)};
-  fill: ${({ color, $active }) => ($active ? rainbow(color) : theme('article.digest'))};
-  transform: scale(1, 0.8);
-  filter: brightness(1.2);
-`
 export const Button = styled.div<TUpvoteIcon>`
   ${css.row('align-both')};
   border: 1px solid;
@@ -27,7 +20,6 @@ export const Button = styled.div<TUpvoteIcon>`
   border-radius: 14px;
   width: 172px;
   padding: 10px 0;
-  padding-top: 11px;
 
   &:hover {
     border-color: ${({ color }) => rainbowLink(color, 'blackActive')};
@@ -40,6 +32,7 @@ export const Button = styled.div<TUpvoteIcon>`
 `
 export const CountWrapper = styled.div`
   margin-left: 8px;
+  margin-top: 1px;
 `
 
 export const Alias = styled.div<TUpvoteIcon>`
@@ -47,5 +40,6 @@ export const Alias = styled.div<TUpvoteIcon>`
   color: ${({ color, $active }) => ($active ? rainbow(color) : theme('article.digest'))};
   margin-left: 5px;
   font-weight: 400;
+  margin-top: 1px;
   filter: brightness(1.2);
 `
diff --git a/src/widgets/Upvote/styles/comment_layout.ts b/src/widgets/Upvote/styles/comment_layout.ts
index aaae930cf..59b6e1946 100755
--- a/src/widgets/Upvote/styles/comment_layout.ts
+++ b/src/widgets/Upvote/styles/comment_layout.ts
@@ -1,24 +1,30 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
-import css, { theme } from '@/css'
+import type { TTestable, TColorName, TActive } from '@/spec'
+import css, { theme, rainbow, rainbowLight, rainbowLink } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
   ${css.row('align-center')};
 `
-export const Button = styled.div`
+type TUpvote = { color: TColorName } & TActive
+
+export const Button = styled.div<TUpvote>`
   ${css.row('align-center')};
   border: 1px solid;
-  border-color: ${theme('comment.indentLine')};
+
+  border-color: ${({ $active, color }) =>
+    $active ? rainbowLink(color, 'blackActive') : theme('button.upvoteBorder')};
+  background-color: ${({ $active, color }) => ($active ? rainbowLight(color) : 'transparent')};
 
   border-radius: 10px;
   padding: 0 2px;
   padding-right: 5px;
 
   &:hover {
-    border-color: ${theme('comment.indentActive')};
+    border-color: ${({ color }) => rainbowLink(color, 'blackActive')};
+    background-color: ${({ color }) => rainbowLight(color)};
     cursor: pointer;
   }
 
@@ -27,10 +33,10 @@ export const Button = styled.div`
 export const UpWrapper = styled.div`
   margin-left: 5px;
   transform: scale(0.8);
-  margin-top: 4px;
+  margin-top: 5px;
 `
-export const Alias = styled.div`
-  color: ${theme('article.info')};
+export const Alias = styled.div<TUpvote>`
+  color: ${({ color, $active }) => ($active ? rainbow(color) : theme('article.digest'))};
   margin-top: 1px;
   font-size: 12px;
   font-weight: 600;
@@ -40,6 +46,4 @@ export const Alias = styled.div`
 export const CountWrapper = styled.div`
   margin-left: 1px;
   margin-right: 3px;
-  margin-top: -1px;
-  transform: scale(0.88);
 `
diff --git a/src/widgets/Upvote/styles/default_layout.ts b/src/widgets/Upvote/styles/default_layout.ts
index 3a0e8cc8f..fb0a363c5 100755
--- a/src/widgets/Upvote/styles/default_layout.ts
+++ b/src/widgets/Upvote/styles/default_layout.ts
@@ -50,7 +50,6 @@ export const Alias = styled.div`
 `
 export const UpvoteBtnWrapper = styled.div`
   ${css.row('align-both')};
-  margin-top: 1px;
 
   ${css.media.mobile`
     margin-top: 4px;
diff --git a/src/widgets/Upvote/styles/post_minimal_layout.ts b/src/widgets/Upvote/styles/post_minimal_layout.ts
index 40360d3ce..b3de838ef 100644
--- a/src/widgets/Upvote/styles/post_minimal_layout.ts
+++ b/src/widgets/Upvote/styles/post_minimal_layout.ts
@@ -36,7 +36,7 @@ export const Button = styled.div<TButton>`
 
 export const UpWrapper = styled.div`
   transform: scale(0.85);
-  margin-left: 5px;
+  margin-left: 4px;
 `
 export const CountWrapper = styled.div`
   margin-top: -2px;
diff --git a/src/widgets/Upvote/useUpvote.tsx b/src/widgets/Upvote/useUpvote.tsx
new file mode 100644
index 000000000..ba5dfdcc3
--- /dev/null
+++ b/src/widgets/Upvote/useUpvote.tsx
@@ -0,0 +1,34 @@
+import { useState, useCallback } from 'react'
+
+import { authWarn } from '@/signal'
+import useAccount from '@/hooks/useAccount'
+
+type TProps = {
+  viewerHasUpvoted: boolean
+  onAction?: (viewerHasUpvoted: boolean) => void
+}
+
+type TRet = {
+  handleClick: () => void
+  startAnimate: boolean
+}
+
+const useUpvote = ({ viewerHasUpvoted, onAction }: TProps): TRet => {
+  const { isLogin } = useAccount()
+  const [startAnimate, setStartAnimate] = useState(false)
+
+  const handleClick = useCallback(() => {
+    if (!isLogin) return authWarn()
+    setStartAnimate(true)
+    setTimeout(() => setStartAnimate(false), 500)
+
+    onAction(!viewerHasUpvoted)
+  }, [viewerHasUpvoted, onAction, isLogin])
+
+  return {
+    handleClick,
+    startAnimate,
+  }
+}
+
+export default useUpvote