chore: avatars group rename

src/containers/content/WorksContent/index.tsx

@@ -12,7 +12,7 @@ import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
 import Pagi from '@/widgets/Pagi'
-// import AvatarsRow from '@/widgets/AvatarsRow'
+// import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import type { TStore } from './store'
 
@@ -64,7 +64,7 @@ const WorksContentContainer: FC<TProps> = ({
           <Pagi margin={{ top: '60px', bottom: '80px' }} />
           {/* <PagiInfo>
               <PagiInfoTitle>活跃用户</PagiInfoTitle>
-              <AvatarsRow users={tmpUsers} total={10} showTotalNumber />
+              <AvatarsGroup users={tmpUsers} total={10} showTotalNumber />
             </PagiInfo> */}
         </MainContent>
         {!isMobile && <RightSidebar showSidebar={showSidebar} />}

src/containers/thread/AboutThread/Sidebar.tsx

@@ -21,7 +21,7 @@ const Sidebar: FC = () => {
       <Block>
         <Title>官方主页</Title>
         <Desc>
-          <Linker src="https://groupher.com" left={-2} />
+          <Linker src="https://groupher.com" left={-2} top={12} />
         </Desc>
       </Block>
       <Block>

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

@@ -16,33 +16,33 @@ export const MainWrapper = styled.div`
 
   background: transparent;
   border-radius: 6px;
-  margin-top: 14px;
-  padding-left: 25px;
+  margin-top: 25px;
+  padding-left: 22px;
 `
 export const Block = styled.div`
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid;
   border-bottom-color: ${theme('border')};
-  width: 660px;
+  width: 620px;
 `
 export const IntroBlock = styled(Block)`
   padding-right: 20px;
 `
 export const StateBlock = styled(Block)`
-  padding-right: 10px;
+  padding-right: 0;
 `
 export const MemberBlock = styled(Block)`
   border-bottom: none;
 `
 export const Title = styled.div`
-  font-size: 14px;
+  font-size: 16px;
   color: ${theme('thread.articleDigest')};
   font-weight: 600;
   margin-bottom: 15px;
 `
 export const Desc = styled.div`
-  font-size: 14px;
+  font-size: 15px;
   color: ${theme('thread.articleDigest')};
   line-height: 1.8;
 `

src/containers/thread/AboutThread/styles/members/index.ts

@@ -25,7 +25,7 @@ export const Header = styled.div`
   margin-bottom: 30px;
 `
 export const Title = styled.div`
-  font-size: 14px;
+  font-size: 16px;
   color: ${theme('thread.articleDigest')};
   font-weight: 600;
 `

src/containers/thread/AboutThread/styles/sidebar.ts

@@ -5,15 +5,13 @@ import css, { theme } from '@/utils/css'
 export const Wrapper = styled.div`
   width: 300px;
   height: auto;
-  /* background: #f1f3f4; */
-  border: 1px solid;
-  border-color: ${theme('border')};
-  border-radius: 5px;
-  padding: 20px;
-  padding-top: 24px;
+  border-left: 1px solid;
+  border-left-color: ${theme('border')};
+  padding-left: 40px;
+  padding-top: 10px;
   padding-bottom: 0;
-  margin-top: 18px;
-  margin-left: 80px;
+  margin-top: 19px;
+  margin-left: 60px;
 `
 export const Block = styled.div`
   margin-bottom: 20px;

src/containers/thread/KanbanThread/Actions.tsx

@@ -4,7 +4,7 @@ import { ICON } from '@/config'
 import { mockUsers } from '@/utils/mock'
 
 import { IconSwitcher } from '@/widgets/Switcher'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 import { Space } from '@/widgets/Common'
 
 import {
@@ -51,7 +51,7 @@ const Actions: FC = () => {
         </ModeWrapper>
         <Space right={20} />
         <JoinTitle>参与者</JoinTitle>
-        <AvatarsRow size="medium" users={mockUsers(6)} total={20} />
+        <AvatarsGroup size="medium" users={mockUsers(6)} total={20} />
         {/* <Space right={25} /> */}
         {/* <NewButton size="medium">
           <BtnText>新增</BtnText>

src/containers/tool/Drawer/Viewer/DesktopView.tsx

@@ -29,8 +29,7 @@ const DesktopView: FC<TProps> = ({
   articleNavi,
   children,
 }) => {
-  const visible2 = false
-
+  console.log('--> visible --> ', visible)
   return (
     <Fragment>
       <DrawerOverlay

src/containers/tool/Drawer/styles/index.ts

@@ -28,8 +28,8 @@ export const DrawerOverlay = styled.div<TActive>`
   background: ${({ visible }) => (visible ? theme('drawer.mask') : 'none')};
   opacity: ${({ visible }) => (visible ? 0.5 : 0)};
 
-  transition: visibility 0.25s linear, opacity 0.2s linear,
-    background 0.5s linear;
+  transition: visibility 0.1s ease-in, opacity 0.1s ease-in,
+    background 0.1s ease-in;
 `
 // see https://stackoverflow.com/questions/60079950/when-do-i-use-attrs-vs-passing-props-directly-with-styled-components
 
@@ -91,7 +91,7 @@ export const DrawerWrapper = styled.div.attrs(
 
   will-change: transform, max-width, opacity;
   // 在宽屏时滑出来时，是从内容页而不是实际的 window 页滑出, 加 delay 可以在视觉上抵消从外部滑入的跳动感
-  transition-delay: 0s, 0s, 0.06s;
+  transition-delay: 0s, 0s, 0.14s;
 
   ${css.media.mobile`
     right: 0;

src/containers/unit/Comments/HeadBar/PublishBar.tsx

@@ -9,7 +9,7 @@ import {
   Avatar,
   UserName,
   ActionsWrapper,
-  EditIcon,
+  Publishcon,
 } from '../styles/head_bar/publish_bar'
 
 type TProps = {
@@ -35,7 +35,7 @@ const PublishBar: FC<TProps> = ({ closeEditor }) => {
         </Button>
 
         <Button size="small" space={10}>
-          <EditIcon />
+          <Publishcon />
           发布
         </Button>
       </ActionsWrapper>

src/containers/unit/Comments/styles/head_bar/publish_bar.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import css, { theme } from '@/utils/css'
-import EditPenSVG from '@/icons/EditPen'
+import EditPublishSVG from '@/icons/EditPublish'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
@@ -22,8 +22,8 @@ export const UserName = styled.div`
 export const ActionsWrapper = styled.div`
   ${css.flex('align-center')};
 `
-export const EditIcon = styled(EditPenSVG)`
-  ${css.size(12)};
+export const Publishcon = styled(EditPublishSVG)`
+  ${css.size(13)};
   fill: white;
-  margin-right: 5px;
+  margin-right: 6px;
 `

src/widgets/AvatarsRow/index.tsx → src/widgets/AvatarsGroup/index.tsx

@@ -1,6 +1,6 @@
 /*
  *
- * AvatarsRow
+ * AvatarsGroup
  *
  */
 
@@ -49,7 +49,7 @@ export const RealAvatar = dynamic(() => import('./RealAvatar'), {
 })
 
 /* eslint-disable-next-line */
-const log = buildLog('c:AvatarsRow:index')
+const log = buildLog('c:AvatarsGroup:index')
 
 const validUser = compose(not, isNil)
 
@@ -83,7 +83,7 @@ export type TProps = {
   onTotalSelect?: () => void
 }
 
-const AvatarsRow: FC<TProps> = ({
+const AvatarsGroup: FC<TProps> = ({
   size = SIZE.SMALL,
   total = null,
   users = [],
@@ -151,4 +151,4 @@ const AvatarsRow: FC<TProps> = ({
   )
 }
 
-export default trackWindowScroll(AvatarsRow)
+export default trackWindowScroll(AvatarsGroup)

src/widgets/AvatarsRow/styles/metric.ts → src/widgets/AvatarsGroup/styles/metric.ts

@@ -47,8 +47,8 @@ export const getTotalCountSize = (total: number): string => {
 }
 
 export const getMoreTextWidth = (total: number): string => {
-  if (total < 10) return '23px'
-  if (total >= 10 && total <= 99) return '32px'
+  if (total < 10) return '22px'
+  if (total >= 10 && total <= 99) return '28px'
   if (total >= 100 && total <= 999) return '44px'
 
   return '52px'

src/widgets/AvatarsRow/styles/real_avatar.ts → src/widgets/AvatarsGroup/styles/real_avatar.ts

@@ -56,7 +56,7 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
   min-width: ${({ size }) => getAvatarSize(size)};
   height: ${({ size }) => getAvatarSize(size)};
 
-  padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')};
+  padding-left: ${({ total }) => (total >= 1000 ? '5px' : '0')};
   padding-top: 1px;
 
   &:hover {

src/widgets/AvatarsRow/styles/real_number.ts → src/widgets/AvatarsGroup/styles/real_number.ts

@@ -12,9 +12,11 @@ export const Wrapper = styled(AvatarsMore)<TWrapper>`
   height: ${({ size }) => getAvatarSize(size)};
   width: ${({ total }) => getMoreTextWidth(total)};
   font-weight: 400;
-  padding-left: 2px;
+  padding-left: 1px;
+  padding-top: 0.5px;
   margin-left: 4px;
   border-radius: 0 10px 10px 0;
+  font-size: 13px;
 `
 export const HighlightNumber = styled.div`
   font-weight: 500;

src/widgets/AvatarsRow/tests/index.test.ts → src/widgets/AvatarsGroup/tests/index.test.ts

@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import AvatarsRow from '../index'
+// import AvatarsGroup from '../index'
 
-describe('<AvatarsRow />', () => {
+describe('<AvatarsGroup />', () => {
   it('TODO: Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })

src/widgets/Icons/EditPublish.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+const EditPublish: FC = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <path d="m840.533 132.267-691.2 401.066c-25.6 17.067-25.6 51.2 4.267 64L311.467 665.6 742.4 285.867c8.533-8.534 21.333 4.266 12.8 12.8L392.533 738.133V857.6c0 34.133 42.667 51.2 64 25.6L550.4 768l187.733 76.8c21.334 8.533 46.934-4.267 51.2-25.6L896 170.667c4.267-29.867-29.867-51.2-55.467-38.4z" />
+  </svg>
+)
+
+export default EditPublish

src/widgets/PostItem/DesktopView/Header.tsx

@@ -6,7 +6,7 @@ import { EVENT } from '@/constant'
 
 import { send } from '@/utils/helper'
 
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 // import TagsList from '@/widgets/TagsList'
 
 import {
@@ -39,7 +39,7 @@ const Header: FC<TProps> = ({ item }) => {
         <TagsList items={item.articleTags} left={12} />
       </Brief>
       <AvatarsWrapper>
-        <AvatarsRow
+        <AvatarsGroup
           users={item.commentsParticipants}
           total={item.commentsCount}
         />

src/widgets/Tooltip/index.tsx

@@ -41,7 +41,7 @@ export type TProps = {
   noPadding?: boolean
   showArrow?: boolean
   behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
-  // currently only for AvatarsRow, it will collapse the height
+  // currently only for AvatarsGroup, it will collapse the height
   // for same reason, figure out later
   contentHeight?: string
 

src/widgets/Upvote/DefaultLayout.tsx

@@ -11,7 +11,7 @@ import type { TUser } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import { Space } from '@/widgets/Common'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import UpvoteBtn from './UpvoteBtn'
 import Desc from './Desc'
@@ -61,7 +61,7 @@ const Upvote: FC<TProps> = ({
       <Count noOne={noOne}>{count}</Count>
       {!noOne && <LineDivider />}
       {!noOne && !isMobile && (
-        <AvatarsRow users={avatarList} showMore={false} />
+        <AvatarsGroup users={avatarList} showMore={false} />
       )}
       {!noOne && (
         <Desc

src/widgets/Upvote/KanbanLayout.tsx

@@ -11,7 +11,7 @@ import type { TUser } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import { Space } from '@/widgets/Common'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import UpvoteBtn from './UpvoteBtn'
 
@@ -59,7 +59,7 @@ const Upvote: FC<TProps> = ({
       <Space right={3} />
       <Count noOne={noOne}>{count}</Count>
       {!noOne && <LineDivider />}
-      {!noOne && !isMobile && <AvatarsRow users={avatarList} showMore />}
+      {!noOne && !isMobile && <AvatarsGroup users={avatarList} showMore />}
     </Wrapper>
   )
 }

src/widgets/Upvote/StickerLayout.tsx

@@ -11,7 +11,7 @@ import { buildLog } from '@/utils/logger'
 
 import { UPVOTE_LAYOUT } from '@/constant'
 import AnimatedCount from '@/widgets/AnimatedCount'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import UpvoteBtn from './UpvoteBtn'
 import {
@@ -54,7 +54,7 @@ const Upvote: FC<TProps> = ({
       </CountWrapper>
 
       <AvatarsWrapper count={count}>
-        <AvatarsRow users={avatarList} showMore={false} limit={3} />
+        <AvatarsGroup users={avatarList} showMore={false} limit={3} />
       </AvatarsWrapper>
     </Wrapper>
   )

src/widgets/Upvote/WorksArticleLayout.tsx

@@ -10,7 +10,7 @@ import type { TUser } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import { SIZE, UPVOTE_LAYOUT } from '@/constant'
 
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 import AnimatedCount from '@/widgets/AnimatedCount'
 
 import Desc from './Desc'
@@ -69,7 +69,7 @@ const Upvote: FC<TProps> = ({
       <DescWrapper>
         {!noOne && (
           <Avatars>
-            <AvatarsRow
+            <AvatarsGroup
               users={avatarList}
               showMore={false}
               limit={7}

src/widgets/Upvote/styles/post_list_layout.ts

@@ -16,6 +16,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 export const UpWrapper = styled.div`
   margin-left: 7px;
+  transform: scale(0.95);
 `
 export const CountWrapper = styled.div`
   margin-top: -6px;

utils/themes/skins/github.ts

@@ -53,7 +53,7 @@ const github = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#FFFEDE',
-  textBadge: '#f5f5f5',
+  textBadge: '#f6f6f6',
 
   gtdBadge: {
     feat: '#3871e0',