chore(easter-egg): upvote icon style & drawer style adjust (#1114)

Author: mydearxym

public/icons/static/shape/upvote-ship.svg

@@ -15,6 +15,7 @@ import {
   ContentWrapper,
   IconWrapper,
   IconShadow,
+  ShipWindow,
   UpIcon,
 } from './styles/upvote_btn'
 
@@ -49,7 +50,11 @@ const UpvoteBtn: FC<TProps> = ({ viewerHasUpvoted = false }) => {
       <ContentWrapper>
         <IconWrapper onClick={handleClick}>
           <IconShadow />
-          <UpIcon src={`${ICON}/shape/upvote.svg`} $active={viewerHasUpvoted} />
+          <ShipWindow />
+          <UpIcon
+            src={`${ICON}/shape/upvote-ship.svg`}
+            $active={viewerHasUpvoted}
+          />
         </IconWrapper>
       </ContentWrapper>
     </Wrapper>

src/components/Upvote/UpvoteBtn.tsx

@@ -14,7 +14,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   margin-left: -9px;
 `
 export const UpWrapper = styled.div`
-  margin-left: 9px;
+  margin-left: 7px;
 `
 export const CountWrapper = styled.div`
   margin-top: -4px;

src/components/Upvote/styles/comment_view.ts

@@ -159,10 +159,23 @@ export const IconShadow = styled.div`
   transform: opacity 0.2s;
 `
 
+export const ShipWindow = styled.div`
+  position: absolute;
+  left: 7px;
+  top: 8px;
+  width: 5px;
+  height: 4px;
+  border-radius: 100%;
+  display: block;
+  background: ${theme('thread.articleDigest')};
+
+  opacity: 0.6;
+`
 export const UpIcon = styled(Img)<TActive>`
   fill: ${({ $active }) =>
     $active ? '#139B9D;' : theme('thread.articleDigest')};
-  ${css.size(17)};
+  ${css.size(18)};
+  transform: scale(1, 0.8);
   margin-top: 1px;
   &:hover {
     fill: #139b9d;

src/components/Upvote/styles/upvote_btn.ts

@@ -33,8 +33,9 @@ const AddOn: FC<TProps> = ({ type }) => {
         />
         <IconButton
           path="article/share.svg"
-          size={20}
-          mTop={6}
+          size={19}
+          mTop={7}
+          mLeft={-1}
           hint="分享本文"
           hintPlacement="bottom"
           dimWhenIdle

src/containers/tool/Drawer/AddOn.tsx

@@ -62,10 +62,10 @@ const Header: FC<TProps> = ({ article }) => {
           <ViewIcon src={`${ICON}/article/viewed.svg`} />{' '}
           <Count>{article.views}</Count>
           <Space right={14} />
-          <IconButton path="article/comment.svg" mRight={6} />
+          <IconButton path="article/comment.svg" mRight={6} size={15} />
           <Count>{article.commentsCount}</Count>
           {/* <DotDivider space={10} /> */}
-          <IconButton path="shape/more-l.svg" mLeft={8} mRight={-4} size={14} />
+          <IconButton path="shape/more-l.svg" mLeft={6} mRight={-4} size={15} />
           {/* <IconButton path="shape/more.svg" mRight={0} /> */}
         </BaseWrapper>
       </CommonInfo>

src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx

@@ -64,14 +64,14 @@ export const EditedHint = styled.div`
 `
 export const BaseWrapper = styled.div`
   ${css.flex('align-center')};
-  margin-top: 8px;
+  margin-top: 9px;
 `
 export const ViewIcon = styled(Img)`
   fill: ${theme('thread.articleDigest')};
-  ${css.size(16)};
+  ${css.size(15)};
   margin-right: 5px;
 `
 export const Count = styled.div`
   color: ${theme('thread.articleDigest')};
-  font-size: 15px;
+  font-size: 14px;
 `