style(tags): add bold version for thread sidebar

src/containers/unit/TagsBar/DesktopView/TagItem.tsx

@@ -40,9 +40,10 @@ const TagItem: FC<TProps> = ({ tag, active, onSelect }) => {
           dotSize={8}
           hashSize={12}
           dotLeft={5}
-          hashLeft={2}
+          hashLeft={3}
           hashRight={3}
-          opacity={0.8}
+          opacity={0.7}
+          boldHash
         />
       </DotWrapper>
 

src/containers/viewer/ArticleViewer/DrawerHeader/index.tsx

@@ -6,7 +6,7 @@ import Share from '@/widgets/Share'
 import { SpaceGrow } from '@/widgets/Common'
 import ArticleSettingMenu from '@/widgets/ArticleSettingMenu'
 
-import { Wrapper, BackButton, ArrowIcon, BackText, FlagIcon } from '../styles/drawer_header'
+import { Wrapper, BackButton, ArrowIcon, BackText, ReportIcon } from '../styles/drawer_header'
 
 const DrawerHeader: FC = () => {
   return (
@@ -17,7 +17,7 @@ const DrawerHeader: FC = () => {
       </BackButton>
       <SpaceGrow />
       <Share modalOffset="53%" />
-      <FlagIcon />
+      <ReportIcon />
       <ArticleSettingMenu left={16} />
     </Wrapper>
   )

src/containers/viewer/ArticleViewer/styles/drawer_header/index.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import ArrowSVG from '@/icons/Arrow'
-import FlagSVG from '@/icons/Flag'
+import WarningSVG from '@/icons/Warning'
 
 import css, { theme } from '@/css'
 
@@ -54,7 +54,7 @@ export const BackText = styled.div`
 
   transition: all 0.2s;
 `
-export const FlagIcon = styled(FlagSVG)`
+export const ReportIcon = styled(WarningSVG)`
   ${css.size(18)};
   fill: ${theme('hint')};
   margin-left: 16px;

src/widgets/Icons/HashTagBold.tsx

@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const HashTag = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      className="icon"
+      viewBox="0 0 1024 1024"
+      {...props}
+    >
+      <path d="M956.377 540.8c-12.4-38-53.8-58.2-92-45.8l-90.8 30.2-60.6-180 90.8-30.2c38.2-12.4 58.2-53.6 46-91.8-12.4-38-53.8-58.2-92-45.8l-90.8 30.2-31.4-94c-12.4-38-53.8-58.2-92-45.8-38.2 12.4-58.2 53.6-46 91.8l31.4 94-186.8 62.4-31.4-94c-12.4-38-53.8-58.2-92-45.8-38.2 12.4-58.2 53.6-46 91.8l31.4 94-90.6 30c-38.2 12.4-58.2 53.6-46 91.8 10 29 38.2 48 67.2 49.2 13.6 2 24-3.2 115.4-33.6l60.6 180-90.8 30.2c-38 12.4-58.2 53.8-46 91.8 10 29 38.2 48 67.2 49.2 13.6 2 24-3.2 115.4-33.6l31.4 94c11.8 33.8 49.4 58 92 45.8 38.2-12.4 58.2-53.6 46-91.8l-31.4-94 187.2-62.6 31.4 94c11.8 33.8 49.4 58 92 45.8 38.2-12.4 58.2-53.6 46-91.8l-31.4-94 90.8-30.2c38-12 58.2-53.4 45.8-91.4zm-508.2 94.4-60.6-180.4 187-62.6 60.6 180.4-187 62.6z" />
+    </svg>
+  )
+}
+
+export default memo(HashTag)

src/widgets/Icons/Warning.tsx

@@ -2,18 +2,8 @@ import { memo, SVGProps } from 'react'
 
 const Warning = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      className="prefix__icon"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width={200}
-      height={200}
-      {...props}
-    >
-      <defs>
-        <style />
-      </defs>
-      <path d="M512 981.333C252.8 981.333 42.667 771.2 42.667 512S252.8 42.667 512 42.667 981.333 252.8 981.333 512 771.2 981.333 512 981.333zm0-170.666A85.333 85.333 0 10512 640a85.333 85.333 0 000 170.667zm0-597.334a64 64 0 00-64 64v256a64 64 0 00128 0v-256a64 64 0 00-64-64z" />
+    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 256 256" {...props}>
+      <path d="M236.8 188.09 149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19 23.51 23.51 0 0 0 .02-23.72Zm-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2 7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72ZM120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0Zm20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z" />
     </svg>
   )
 }

src/widgets/TagNode/index.tsx

@@ -16,7 +16,7 @@ import { TAG_LAYOUT } from '@/constant/layout'
 import { COLOR_NAME } from '@/constant/colors'
 import THEME from '@/constant/theme'
 
-import { Dot, HashIcon } from './styles'
+import { Dot, HashBoldIcon, HashNormalIcon } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:TagNode:index')
@@ -32,6 +32,7 @@ type TProps = {
   hashLeft?: number
   hashTop?: number
   opacity?: number
+  boldHash?: boolean
 }
 
 const TagNode: FC<TProps> = ({
@@ -45,11 +46,14 @@ const TagNode: FC<TProps> = ({
   hashLeft = 0,
   hashTop = 0,
   opacity = 1,
+  boldHash = false,
 }) => {
   const tagLayout = useTagLayout()
   const { curTheme } = useTheme()
   const dividerBorder = curTheme === THEME.NIGHT
 
+  const HashIcon = boldHash ? HashBoldIcon : HashNormalIcon
+
   return (
     <>
       {tagLayout === TAG_LAYOUT.DOT ? (

src/widgets/TagNode/styles/index.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import type { TColor } from '@/spec'
 
 import HashSVG from '@/icons/HashTag'
+import HashSVGBold from '@/icons/HashTagBold'
+
 import css, { theme, rainbow } from '@/css'
 
 type TProps = {
@@ -26,11 +28,20 @@ export const Dot = styled.div<TProps>`
   border-color: ${({ $dividerBorder, $color }) =>
     !$dividerBorder ? rainbow($color) : theme('hint')};
 `
-export const HashIcon = styled(HashSVG)<TProps>`
+export const HashNormalIcon = styled(HashSVG)<TProps>`
+  ${({ size }) => css.size(size)};
+  fill: ${({ $color }) => rainbow($color)};
+  opacity: ${({ opacity }) => opacity};
+  margin-right: ${({ right }) => `${right}px;`};
+  margin-left: ${({ left }) => `${left}px;`};
+  margin-top: ${({ top }) => `${top}px;`};
+`
+export const HashBoldIcon = styled(HashSVGBold)<TProps>`
   ${({ size }) => css.size(size)};
   fill: ${({ $color }) => rainbow($color)};
   opacity: ${({ opacity }) => opacity};
   margin-right: ${({ right }) => `${right}px;`};
   margin-left: ${({ left }) => `${left}px;`};
   margin-top: ${({ top }) => `${top}px;`};
+  transform: rotate(18deg);
 `