style: adjust digest & badge hint

Author: mydearxym

src/components/AvatarsRow/RealAvatar.tsx

@@ -22,14 +22,13 @@ type TProps = {
 
 const RealAvatar: FC<TProps> = ({ user, size, onUserSelect }) => {
   return (
-    <Tooltip
-      content={<UserPopContent>{user.nickname}</UserPopContent>}
-      delay={0}
-      contentHeight={getAvatarSize(size, 'number') as string}
-      showArrow={false}
-      noPadding
-    >
-      <Wrapper key={user.id} size={size}>
+    <Wrapper size={size}>
+      <Tooltip
+        content={<UserPopContent>{user.nickname}</UserPopContent>}
+        delay={0}
+        contentHeight={getAvatarSize(size, 'number') as string}
+        noPadding
+      >
         <AvatarsImg
           src={user.avatar}
           size={size}
@@ -42,8 +41,8 @@ const RealAvatar: FC<TProps> = ({ user, size, onUserSelect }) => {
             />
           }
         />
-      </Wrapper>
-    </Tooltip>
+      </Tooltip>
+    </Wrapper>
   )
 }
 

src/components/AvatarsRow/styles/more_item.ts

@@ -11,7 +11,7 @@ const BaseAvatarItem = styled.li<{ size: string }>`
   padding: 0px 0px 0px 0px;
   position: relative;
   width: ${({ size }) => getAvatarSize(size)};
-  opacity: 0.75;
+  opacity: 1;
   z-index: 1;
   &:hover {
     opacity: 1;

src/components/DigestSentence/index.tsx

@@ -15,6 +15,8 @@ import { Space } from '@/components/Common'
 
 import {
   Wrapper,
+  // Text,
+  HintWrapper,
   MediaHintWrapper,
   HintIcon,
   HintText,
@@ -60,18 +62,20 @@ const DigestSentence: FC<TProps> = ({
     >
       {children}
       <Space left={8} />
-      <MediaHintWrapper>
-        <HintIcon src={`${ICON}/shape/image.svg`} />
-        <HintText>3</HintText>
-      </MediaHintWrapper>
-      <MediaHintWrapper>
-        <HintIcon src={`${ICON}/shape/video.svg`} />
-        <HintText>1</HintText>
-      </MediaHintWrapper>
-      <PreviewWrapper>
-        <PreviewText>预览</PreviewText>
-        <ThunderIcon />
-      </PreviewWrapper>
+      <HintWrapper>
+        <MediaHintWrapper>
+          <HintIcon src={`${ICON}/shape/image.svg`} />
+          <HintText>3</HintText>
+        </MediaHintWrapper>
+        <MediaHintWrapper>
+          <HintIcon src={`${ICON}/shape/video.svg`} />
+          <HintText>1</HintText>
+        </MediaHintWrapper>
+        <PreviewWrapper>
+          <PreviewText>预览</PreviewText>
+          <ThunderIcon />
+        </PreviewWrapper>
+      </HintWrapper>
     </Wrapper>
   )
 }

src/components/DigestSentence/styles/index.ts

@@ -28,6 +28,23 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 
   transition: color 0.2s;
 `
+// export const Text = styled.div`
+//   display: -webkit-box;
+//   -webkit-line-clamp: 2;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   -webkit-box-orient: vertical;
+//   border: 1px solid;
+
+//   &:after {
+//     content: '';
+//     margin-right: 20px;
+//   }
+// `
+
+export const HintWrapper = styled.div`
+  display: inline;
+`
 export const MediaHintWrapper = styled.div`
   position: relative;
   margin-left: 5px;
@@ -48,17 +65,16 @@ export const HintText = styled.div`
   margin-right: 5px;
   padding-left: 17px;
 `
-
 export const PreviewWrapper = styled.div`
   display: inline-flex;
   opacity: 0;
   margin-left: 8px;
   align-items: center;
 
   ${Wrapper}:hover & {
-    opacity: 0.6;
+    opacity: 0.8;
   }
-  transition: opacity 0.25s;
+  transition: opacity 0.2s;
 `
 export const PreviewIcon = styled(Img)`
   fill: ${theme('thread.extraInfo')};

src/components/DigestSentence/styles/metric.ts

@@ -4,11 +4,11 @@ import { SIZE } from '@/constant'
 export const getFontSize = (size: TSIZE_SM): string => {
   switch (size) {
     case SIZE.MEDIUM: {
-      return '14px'
+      return '14.5px'
     }
 
     default:
-      return '13px'
+      return '13.5px'
   }
 }
 

src/components/PostItem/DigestView/DesktopView/Body.tsx

@@ -52,7 +52,7 @@ const Body: FC<TProps> = ({ item }) => {
         right={140}
         onPreview={() => send(EVENT.PREVIEW_ARTICLE, { article: item })}
       >
-        {cutRest(item.digest, 90)}
+        {cutRest(`${item.digest}`, 70)}
       </DigestSentence>
     </Wrapper>
   )

src/components/PostItem/styles/digest_view/active_badge.ts

@@ -10,7 +10,7 @@ export const Wrapper = styled.div<{ hasComments: boolean }>`
   position: absolute;
   top: 6px;
   right: 0;
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.articleTitle')};
   margin-right: 6px;
   margin-top: 8px;