feat(avatar): a mute-mask concept (#1070)

Author: mydearxym

src/components/TheAvatar/PostItemAvatar.js

@@ -1,13 +1,14 @@
 import React from 'react'
 
-// import { ICON } from '@/config'
+import { ICON } from '@/config'
 import ImgFallback from '@/components/ImgFallback'
 import {
   Wrapper,
   InnerShadow,
   QuoteShadow,
   Avatar,
   QuoteAvatar,
+  MaskIcon,
 } from './styles/post_item_avatar'
 
 const PostItemAvatar = ({ user, onSelect }) => {
@@ -25,7 +26,9 @@ const PostItemAvatar = ({ user, onSelect }) => {
         />
       )}
       {user.login === 'mydearxym' ? <QuoteShadow /> : <InnerShadow />}
-      {/* <Tail src={`${ICON}/shape/tail.svg`} /> */}
+      {user.login === 'mydearxym' && (
+        <MaskIcon src={`${ICON}/user/mute-mask.svg`} />
+      )}
     </Wrapper>
   )
 }

src/components/TheAvatar/styles/post_item_avatar.ts

@@ -38,6 +38,14 @@ export const QuoteAvatar = styled(Avatar)`
   border: 2px solid;
   border-color: ${theme('avatar.quote')};
 `
+export const MaskIcon = styled(Img)`
+  position: absolute;
+  bottom: -4px;
+  left: -3px;
+  ${css.size(22)};
+  fill: #bd572b;
+  z-index: 2;
+`
 export const Tail = styled(TailBase)`
   ${Wrapper}:hover & {
     left: -6px;