groupher · mydearxym · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx b/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx
@@ -30,9 +30,10 @@ const ArticleInfo: FC<TProps> = ({ article }) => {
     <Wrapper>
       <BaseWrapper>
         <Upvote
-          count={upvotesCount}
           type={UPVOTE_LAYOUT.DEFAULT}
+          count={upvotesCount}
           avatarList={meta.latestUpvotedUsers}
+          // count={10}
           // avatarList={mockUsers(5)}
           viewerHasUpvoted={viewerHasUpvoted}
           onAction={(viewerHasUpvoted) => upvoteArticle(article, viewerHasUpvoted)}

diff --git a/src/widgets/AnimatedCount/AnimatedCount.tsx b/src/widgets/AnimatedCount/AnimatedCount.tsx
@@ -1,24 +1,14 @@
 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'
 
 import type { TProps } from '.'
 import { Wrapper } from './styles'
-import { getFontSize, getFlipNumOffset } from './styles/metric'
-
-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
-}
+import { getFontSize, getFlipNumOffset, getCountColor } from './styles/metric'
 
 const AnimatedCount: FC<TProps> = ({ count = 0, size = SIZE.SMALL, $active = false }) => {
   const primaryColor = usePrimaryColor()
@@ -27,7 +17,7 @@ const AnimatedCount: FC<TProps> = ({ count = 0, size = SIZE.SMALL, $active = fal
   const numSize = getFontSize(size)
   const offset = getFlipNumOffset(size)
 
-  const countColor = getCountColor($active, themeMap, primaryColor)
+  const countColor = getCountColor($active, themeMap, primaryColor, count)
 
   return (
     <Wrapper $active={$active} count={count} key={countColor}>

diff --git a/src/widgets/AnimatedCount/styles/index.ts b/src/widgets/AnimatedCount/styles/index.ts
@@ -7,9 +7,8 @@ import { WithMargin } from '@/widgets/Common'
 type TWrapper = { count: number } & TActive
 
 export const Wrapper = styled(WithMargin)<TWrapper>`
-  font-weight: ${({ count }) => (count > 0 ? 500 : 400)};
+  font-weight: ${({ count }) => (count > 0 ? 450 : 400)};
   opacity: ${({ count }) => (count === 0 ? 0.85 : 1)};
-  /* filter: brightness(1.2); */
-  color: tomato;
+  filter: brightness(1.1);
 `
 export const holder = 1
diff --git a/src/widgets/AnimatedCount/styles/metric.ts b/src/widgets/AnimatedCount/styles/metric.ts
@@ -1,5 +1,7 @@
-import type { TSize } from '@/spec'
+import type { TThemeMap, TColorName, TSize } from '@/spec'
+
 import SIZE from '@/constant/size'
+import { COLOR_NAME } from '@/constant/colors'
 
 export const getFontSize = (size: TSize): number => {
   switch (size) {
@@ -28,3 +30,18 @@ export const getFlipNumOffset = (size: TSize): number => {
     }
   }
 }
+
+export const getCountColor = (
+  active: boolean,
+  themeMap: TThemeMap,
+  primaryColor: TColorName,
+  count: number,
+): string => {
+  if (count === 0) return themeMap.article.digest
+
+  if (primaryColor === COLOR_NAME.BLACK) {
+    return themeMap.article.digest
+  }
+
+  return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.article.digest
+}
diff --git a/src/widgets/Common/index.ts b/src/widgets/Common/index.ts
@@ -60,10 +60,10 @@ export const SexyDivider = styled.div<TSpace>`
 
 type TLineDivider = TSpace & { height?: number; opacity?: number }
 export const LineDivider = styled.div<TLineDivider>`
-  background-color: ${theme('lightText')};
+  background-color: ${theme('lineDivider')};
   width: 1px;
   height: ${({ height }) => `${height || 12}px`};
-  opacity: ${({ opacity }) => `${opacity || 0.8}`};
+  opacity: ${({ opacity }) => `${opacity || 1}`};
 
   margin-left: ${({ left }) => `${left || 15}px`};
   margin-right: ${({ right }) => `${right || 15}px`};

diff --git a/src/widgets/Facepile/styles/metric.ts b/src/widgets/Facepile/styles/metric.ts
@@ -24,7 +24,7 @@ export const getLiSize = (size: TAvatarSize): string => {
 export const getAvatarSize = (size: string, fmt = 'string'): string | number => {
   switch (size) {
     case SIZE.SMALL: {
-      return fmt === 'string' ? '20px' : 20
+      return fmt === 'string' ? '18px' : 18
     }
 
     case SIZE.MEDIUM: {

diff --git a/src/widgets/Facepile/styles/real_avatar.ts b/src/widgets/Facepile/styles/real_avatar.ts
@@ -39,24 +39,22 @@ type TAvatarsImg = {
   avatarLayout: TAvatarLayout
 }
 export const AvatarsImg = styled(Img)<TAvatarsImg>`
-  border: 2px solid;
+  border: 1px solid;
   border-color: ${theme('divider')};
-  color: #ffffff;
   font-size: 12px;
-  font-weight: 100;
 
   ${({ size }) => css.size(getAvatarSize(size))};
-  border-radius: ${({ avatarLayout }) => (avatarLayout === AVATAR_LAYOUT.SQUARE ? '6px' : '100%')};
+  border-radius: ${({ avatarLayout }) => (avatarLayout === AVATAR_LAYOUT.SQUARE ? '5px' : '100%')};
 
   text-align: center;
 `
 type TAvatarsMore = { size: TAvatarSize; total: number }
 export const AvatarsMore = styled.span<TAvatarsMore>`
   ${css.row('align-both')};
   font-size: 14px;
-  border-color: #113744;
+  border-color: ${theme('divider')};
   color: ${theme('article.title')};
-  background-color: #113744;
+  background-color: ${theme('divider')};
   border-radius: 100px 100px 100px 100px;
   font-family: sans-serif;
   font-weight: ${({ total }) => (total >= 1000 ? 600 : 200)};

diff --git a/src/widgets/Upvote/DefaultLayout.tsx b/src/widgets/Upvote/DefaultLayout.tsx
@@ -23,6 +23,7 @@ import {
   Digest,
   FacesWrapper,
   Note,
+  Name,
 } from './styles/default_layout'
 
 /* eslint-disable-next-line */
@@ -49,6 +50,7 @@ const Upvote: FC<TProps> = ({
   const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
 
   const noOne = count === 0
+  const names = !noOne ? avatarList.map((user) => user.nickname).slice(0, 4) : []
 
   return (
     <Wrapper testid={testid}>
@@ -69,7 +71,15 @@ const Upvote: FC<TProps> = ({
           <FacesWrapper>
             <Facepile left={-4} users={avatarList} showMore={false} />
           </FacesWrapper>
-          <Note>xx, xx {alias}</Note>
+          <Note>
+            {names.map((name, index) => (
+              <>
+                <Name key={name}>{name}</Name>
+                {index !== names.length - 1 ? <>，</> : <>&nbsp;</>}
+              </>
+            ))}
+            {alias}
+          </Note>
         </Digest>
       )}
     </Wrapper>

diff --git a/src/widgets/Upvote/Desc.tsx b/src/widgets/Upvote/Desc.tsx
@@ -6,7 +6,7 @@ import { FC, memo } from 'react'
 
 import { buildLog } from '@/logger'
 
-import { Text, DescWrapper } from './styles/default_layout'
+import { DescWrapper } from './styles/default_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('w:Upvote:Desc')
@@ -25,10 +25,10 @@ const Desc: FC<TProps> = ({ noOne, count = 4, avatarsRowLimit = 3, alias = '觉
     <DescWrapper>
       {!noOne && !onlyOne && count > avatarsRowLimit && (
         <DescWrapper>
-          <Text>等</Text>
+          <>等</>
         </DescWrapper>
       )}
-      <Text>{alias}</Text>
+      <>{alias}</>
     </DescWrapper>
   )
 }

diff --git a/src/widgets/Upvote/styles/article_layout.ts b/src/widgets/Upvote/styles/article_layout.ts
@@ -28,6 +28,11 @@ export const Button = styled.div<TUpvoteIcon>`
     cursor: pointer;
   }
 
+  &:hover svg {
+    fill: ${({ color }) => rainbow(color)};
+    transform: scale(1.1);
+  }
+
   transition: 0.2s all;
 `
 export const CountWrapper = styled.div`

diff --git a/src/widgets/Upvote/styles/comment_layout.ts b/src/widgets/Upvote/styles/comment_layout.ts
@@ -28,6 +28,11 @@ export const Button = styled.div<TUpvote>`
     cursor: pointer;
   }
 
+  &:hover svg {
+    fill: ${({ color }) => rainbow(color)};
+    transform: scale(1.1);
+  }
+
   transition: 0.2s all;
 `
 export const UpWrapper = styled.div`

diff --git a/src/widgets/Upvote/styles/default_layout.ts b/src/widgets/Upvote/styles/default_layout.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TActive, TColorName, TTestable } from '@/spec'
-import css, { rainbowLight, rainbowLink, theme } from '@/css'
+import css, { rainbow, rainbowLight, rainbowLink, theme } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
@@ -12,23 +12,32 @@ export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
 type TButton = TActive & { color: TColorName }
 export const Button = styled.div<TButton>`
   ${css.row('align-center')};
-  border: ${({ $active }) => ($active ? '1px dotted' : '1px solid')};
   margin-right: 20px;
 
+  border: 1px solid transparent;
+  /* border: ${({ $active }) => ($active ? '1px dotted' : '1px solid')};
   border-color: ${({ $active, color }) =>
-    $active ? rainbowLink(color, 'blackActive') : theme('button.upvoteBorder')};
+    $active ? rainbowLink(color, 'blackActive') : theme('button.upvoteBorder')}; */
+
+  border-color: ${({ $active, color }) =>
+    $active ? rainbowLight(color) : theme('button.upvoteBorder')};
 
   background-color: ${({ $active, color }) => ($active ? rainbowLight(color) : 'transparent')};
 
-  border-radius: 10px;
+  border-radius: 16px;
   padding: 12px 15px;
 
   &:hover {
-    border-color: ${({ color }) => rainbowLink(color, 'blackActive')};
+    /* border-color: ${({ color }) => rainbowLink(color, 'blackActive')}; */
     background-color: ${({ color }) => rainbowLight(color)};
     cursor: pointer;
   }
 
+  &:hover svg {
+    fill: ${({ color }) => rainbow(color)};
+    transform: scale(1.1);
+  }
+
   ${css.media.mobile`
     padding: 0 8px;
     height: 26px;
@@ -73,12 +82,13 @@ export const Digest = styled.div`
   ${css.column('align-start')};
 `
 export const Note = styled.div`
+  ${css.row('align-center')};
   color: ${theme('lightText')};
   font-size: 12px;
   font-weight: 400;
+  margin-left: -2px;
 `
-export const Text = styled.div`
-  color: ${theme('article.info')};
-  font-size: 12px;
-  margin-top: 1px;
+export const Name = styled.div`
+  ${css.cutRest('50px')};
+  color: ${theme('article.digest')};
 `
diff --git a/src/widgets/Upvote/styles/general_layout.ts b/src/widgets/Upvote/styles/general_layout.ts
@@ -1,9 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable, TActive, TColorName } from '@/spec'
-import css, { rainbowLight, rainbowLink, theme } from '@/css'
-
-import { LineDivider as LineDividerBase } from '@/widgets/Common'
+import css, { rainbow, rainbowLight, rainbowLink, theme } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
@@ -13,12 +11,13 @@ export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
 type TButton = TActive & { color: TColorName }
 export const Button = styled.div<TButton>`
   ${css.row('align-center')};
-  border: ${({ $active }) => ($active ? '1px dotted' : '1px solid')};
   height: 22px;
-
   margin-left: ${({ $active }) => ($active ? 0 : '-8px')};
+
+  border: 1px solid transparent;
+  /* border: ${({ $active }) => ($active ? '1px dotted' : '1px solid')};
   border-color: ${({ $active, color }) =>
-    $active ? rainbowLink(color, 'blackActive') : 'transparent'};
+    $active ? rainbowLink(color, 'blackActive') : 'transparent'}; */
 
   background-color: ${({ $active, color }) => ($active ? rainbowLight(color) : 'transparent')};
 
@@ -28,11 +27,16 @@ export const Button = styled.div<TButton>`
   &:hover {
     margin-left: 0;
     border: 1px solid;
-    border-color: ${({ color }) => rainbowLink(color, 'blackActive')};
+    border-color: ${({ color }) => rainbowLight(color)};
     background-color: ${({ color }) => rainbowLight(color)};
     cursor: pointer;
   }
 
+  &:hover svg {
+    fill: ${({ color }) => rainbow(color)};
+    transform: scale(1.1);
+  }
+
   transition: 0.2s all;
 `
 export const UpvoteBtnWrapper = styled.div`
@@ -53,11 +57,3 @@ export const Count = styled.div<{ noOne: boolean }>`
   color: ${theme('article.info')};
   font-weight: ${({ noOne }) => (noOne ? 400 : 600)};
 `
-export const LineDivider = styled(LineDividerBase)`
-  height: 10px;
-  background: ${theme('article.digest')};
-  opacity: 0.8;
-  margin-left: 12px;
-  margin-right: 10px;
-  margin-top: 1px;
-`
diff --git 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 { TActive, TColorName, TTestable } from '@/spec'
-import css, { theme, rainbowLink, rainbowLight } from '@/css'
+import css, { theme, rainbow, rainbowLink, rainbowLight } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
@@ -30,6 +30,11 @@ export const Button = styled.div<TButton>`
     cursor: pointer;
   }
 
+  &:hover svg {
+    fill: ${({ color }) => rainbow(color)};
+    transform: scale(1.1);
+  }
+
   transition: 0.2s all;
 `