style(avatar): Inset shadow for advatar

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 & {

src/components/UserBrief/Avatar.js

@@ -6,20 +6,48 @@ import { DEFAULT_USER_AVATAR } from '@/config'
 import ImgFallback from '@/components/ImgFallback'
 import BadgeInfo from './BadgeInfo'
 
-import { Wrapper, Avatar } from './styles/avatar'
+import {
+  Wrapper,
+  Avatar,
+  InnerShadow,
+  QuoteAvatar,
+  QuoteShadow,
+} from './styles/avatar'
 
 const AvatarComp = ({ user, view }) => {
+  const isQuote = user.login === 'mydearxym'
+
+  if (isQuote) {
+    return (
+      <Wrapper>
+        <a
+          href={`/user/${user.login}`}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <QuoteAvatar
+            src={user.avatar || DEFAULT_USER_AVATAR}
+            fallback={<ImgFallback user={user} size={200} />}
+          />
+        </a>
+
+        <QuoteShadow />
+
+        {view === VIEW.DRAWER && <BadgeInfo user={user} />}
+      </Wrapper>
+    )
+  }
   return (
     <Wrapper>
       <a href={`/user/${user.login}`} rel="noopener noreferrer" target="_blank">
-        <div>
-          <Avatar
-            src={user.avatar || DEFAULT_USER_AVATAR}
-            fallback={<ImgFallback user={user} size={150} />}
-          />
-        </div>
+        <Avatar
+          src={user.avatar || DEFAULT_USER_AVATAR}
+          fallback={<ImgFallback user={user} size={200} />}
+        />
       </a>
 
+      <InnerShadow />
+
       {view === VIEW.DRAWER && <BadgeInfo user={user} />}
     </Wrapper>
   )

src/components/UserBrief/styles/avatar.js

@@ -1,23 +1,43 @@
 import styled from 'styled-components'
 
 // import { VIEW } from '@/constant'
-import { css } from '@/utils'
+import { css, theme } from '@/utils'
 
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
   margin-right: 12px;
+  position: relative;
 `
-export const Avatar = styled(Img)`
+export const InnerShadow = styled.div`
+  position: absolute;
+  top: 0;
+  left: -4px;
   width: 200px;
   height: 200px;
-  border-radius: 67px;
-  border: 5px solid;
-  border-color: #217470;
+  display: block;
+  border-radius: 100%;
+  box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 50%) inset;
+  z-index: 2;
+`
+export const Avatar = styled(Img)`
+  ${css.circle(200)};
   display: block;
   margin-left: -5px;
 `
+export const QuoteAvatar = styled(Avatar)`
+  ${css.size(200)};
+  border-radius: 68px;
+  border: 5px solid;
+  border-color: ${theme('avatar.quote')};
+`
+export const QuoteShadow = styled(InnerShadow)`
+  top: 5px;
+  left: 0;
+  ${css.size(190)};
+  border-radius: 63px;
+`
 // export const Avatar = styled(Img)`
 //   border-radius: 4px;
 //   width: ${({ view }) => (view === VIEW.DESKTOP ? '120px' : '80px')};

src/components/VideoItem/styles/index.js

@@ -30,7 +30,7 @@ export const Poster = styled.img`
   height: 100%;
   width: 100%;
   min-width: 246px;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 
   ${css.media.mobile`
     min-width: 146px;

src/containers/unit/Comments/styles/comment/header.js

@@ -28,7 +28,7 @@ export const CommentHeaderFirst = styled.div`
 `
 export const Avatar = styled(Img)`
   ${css.circle(22)};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-right: 10px;
 `
 export const HeaderBaseInfo = styled.div`

src/containers/unit/Comments/styles/comment/mobile_view/header.js

@@ -26,7 +26,7 @@ export const CommentHeaderFirst = styled.div`
 `
 export const Avatar = styled(Img)`
   ${css.circle(24)};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-right: 14px;
   margin-top: 10px;
 `

src/containers/unit/Comments/styles/comment_header.js

@@ -32,7 +32,7 @@ export const CommentHeaderFirst = styled.div`
 
 export const CommentAvatar = styled(Img)`
   ${css.circle(38)};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 
 export const HeaderBaseInfo = styled.div`

src/containers/unit/Comments/styles/editor_header.js

@@ -12,7 +12,7 @@ export const UserAvatar = styled(Img)`
   ${css.circle(20)};
   fill: ${theme('thread.articleTitle')};
   margin-left: 4%;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const LeaveResponseText = styled.div`
   font-size: 14px;

src/containers/unit/Comments/styles/reply_editor_header.js

@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
 export const UserAvatar = styled.img`
   ${css.circle(25)};
   margin-left: 3%;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const LeaveResponseText = styled.div`
   font-size: 1.3rem;

src/containers/unit/Header/styles/user_account.js

@@ -65,7 +65,7 @@ export const AvatarIcon = styled.img`
   ${css.size(20)};
   cursor: pointer;
   border-radius: 3px;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const DefaultUserIcon = styled(Img)`
   fill: ${theme('header.fg')};

utils/themes/skins/cyan.js

@@ -43,7 +43,6 @@ const cyan = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#f8f7dc',
-  avatarOpacity: 1,
   baseColor: {
     red: '#fd7f68 !important',
     green: 'yellowgreen !important',
@@ -335,6 +334,13 @@ const cyan = {
     text: '#F8FBFC',
     bg: '#54A1AA',
   },
+  avatar: {
+    opacity: 1,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default cyan

utils/themes/skins/github.js

@@ -43,7 +43,6 @@ const github = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: 'tomato',
-  avatarOpacity: 1,
   baseColor: {
     red: 'tomato !important',
     green: 'yellowgreen !important',
@@ -336,6 +335,13 @@ const github = {
     text: '#F0F6FA',
     bg: '#2B2B2B',
   },
+  avatar: {
+    opacity: 1,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default github