style(avatar): Inset shadow for advatar (#997)

* style(avatar): add inner shadow, closes #996

* refactor(theme): re-org avatar scope

Author: mydearxym

src/components/ImgFallback/Avatar.js

@@ -23,6 +23,7 @@ const Avatar = ({
   right,
   top,
   bottom,
+  quote,
 }) => {
   const name = user?.nickname
   const sliceCount = size > 32 ? 2 : 1
@@ -36,6 +37,7 @@ const Avatar = ({
       right={right}
       top={top}
       bottom={bottom}
+      quote={quote}
     >
       <Name size={size}>{name.slice(0, sliceCount)}</Name>
     </Wrapper>
@@ -53,6 +55,7 @@ Avatar.propTypes = {
   right: T.number,
   top: T.number,
   bottom: T.number,
+  quote: T.bool,
 }
 
 Avatar.defaultProps = {
@@ -66,6 +69,7 @@ Avatar.defaultProps = {
   right: 0,
   top: 0,
   bottom: 0,
+  quote: false,
 }
 
 export default React.memo(Avatar)

src/components/ImgFallback/styles/avatar.js

@@ -11,13 +11,16 @@ export const Wrapper = styled.div.attrs((props) => ({
   color: ${theme('thread.articleTitle')};
   width: ${({ size }) => `${size}px`};
   height: ${({ size }) => `${size}px`};
-  background: #074857;
+  background: ${theme('avatar.fallbackBg')};
   border-radius: 100%;
 
   margin-top: ${({ top }) => `${top}px`};
   margin-bottom: ${({ bottom }) => `${bottom}px`};
   margin-left: ${({ left }) => `${left}px`};
   margin-right: ${({ right }) => `${right}px`};
+
+  border: ${({ quote }) => (quote ? '2px solid' : 'none')};
+  border-color: ${({ quote }) => (quote ? theme('avatar.quote') : 'none')};
 `
 export const Name = styled.div`
   font-family: 'Audiowide', cursive;

src/components/ImgFallback/styles/metric/avatar.js

@@ -6,7 +6,7 @@ export const getFontSize = (size) => {
     return '14px'
   }
 
-  if (size >= 38 && size < 50) {
+  if (size >= 36 && size < 50) {
     return '14px' // two letters
   }
 

src/components/JobItem/styles/list_view.js

@@ -27,7 +27,7 @@ export const TagsWrapper = styled.div`
 export const CompanyLogo = styled(Img)`
   ${css.size(45)};
   border-radius: 5px;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const Brief = styled.div`
   ${css.flex('align-center')};

src/components/PostItem/styles/digest_view/index.js

@@ -13,7 +13,7 @@ export const AvatarWrapper = styled.div`
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-top: 2px;
 `
 export const SmallAvatar = styled(Avatar)`

src/components/PostItem/styles/list_view.js

@@ -21,7 +21,7 @@ export const AvatarWrapper = styled.div`
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-top: 2px;
 
   ${css.media.mobile`${css.circle(34)}`};

src/components/PostItem/styles/mobile_view/header.js

@@ -17,7 +17,7 @@ export const AvatarWrapper = styled.div`
 export const Avatar = styled(Img)`
   ${css.circle(16)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-right: 8px;
 `
 export const AuthorInfo = styled.div`

src/components/TheAvatar/PostItemAvatar.js

@@ -2,22 +2,29 @@ import React from 'react'
 
 // import { ICON } from '@/config'
 import ImgFallback from '@/components/ImgFallback'
-import { Wrapper, Avatar, QuoteAvatar } from './styles/post_item_avatar'
+import {
+  Wrapper,
+  InnerShadow,
+  QuoteShadow,
+  Avatar,
+  QuoteAvatar,
+} from './styles/post_item_avatar'
 
 const PostItemAvatar = ({ user, onSelect }) => {
   return (
     <Wrapper onClick={() => onSelect(user)}>
       {user.login === 'mydearxym' ? (
         <QuoteAvatar
           src={user.avatar}
-          fallback={<ImgFallback user={user} size={38} top={2} />}
+          fallback={<ImgFallback user={user} size={36} top={2} quote />}
         />
       ) : (
         <Avatar
           src={user.avatar}
-          fallback={<ImgFallback user={user} size={38} top={2} />}
+          fallback={<ImgFallback user={user} size={38} top={-1} left={-1} />}
         />
       )}
+      {user.login === 'mydearxym' ? <QuoteShadow /> : <InnerShadow />}
       {/* <Tail src={`${ICON}/shape/tail.svg`} /> */}
     </Wrapper>
   )

src/components/TheAvatar/styles/article_author_avatar.js

@@ -15,7 +15,7 @@ export const Wrapper = styled.div.attrs((props) => ({
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const Tail = styled(TailBase)`
   ${Wrapper}:hover & {

src/components/TheAvatar/styles/post_item_avatar.js

@@ -9,20 +9,33 @@ export const Wrapper = styled.div.attrs((props) => ({
   'data-test-id': props.testId,
 }))`
   cursor: pointer;
-  /* border: 1px solid tomato; */
-  ${css.size(36)};
+  ${css.circle(38)};
   position: relative;
+  margin-top: 2px;
+`
+export const InnerShadow = styled.div`
+  position: absolute;
+  ${css.circle(38)};
+  top: -1px;
+  left: -1px;
+  box-shadow: ${theme('avatar.shadow')};
+  z-index: 2;
+`
+export const QuoteShadow = styled(InnerShadow)`
+  ${css.circle(34)};
+  top: 2px;
+  left: 2px;
+  box-shadow: ${theme('avatar.quoteShadow')};
 `
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
-  margin-top: 2px;
+  opacity: ${theme('avatar.opacity')};
 `
 export const QuoteAvatar = styled(Avatar)`
   ${css.circle(38)};
   border: 2px solid;
-  border-color: #217470;
+  border-color: ${theme('avatar.quote')};
 `
 export const Tail = styled(TailBase)`
   ${Wrapper}:hover & {