style(avatar): quote image concept (#991)

* style(UserPage): the quote image concept, just ui

* style(homePage): quote avatar concept for post item

Author: mydearxym

src/components/TheAvatar/PostItemAvatar.js

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

src/components/TheAvatar/styles/post_item_avatar.js

@@ -19,6 +19,11 @@ export const Avatar = styled(Img)`
   opacity: ${theme('avatarOpacity')};
   margin-top: 2px;
 `
+export const QuoteAvatar = styled(Avatar)`
+  ${css.circle(38)};
+  border: 2px solid;
+  border-color: #217470;
+`
 export const Tail = styled(TailBase)`
   ${Wrapper}:hover & {
     left: -6px;

src/components/UserBrief/styles/avatar.js

@@ -10,10 +10,13 @@ export const Wrapper = styled.div`
   margin-right: 12px;
 `
 export const Avatar = styled(Img)`
-  width: 150px;
-  height: 150px;
+  width: 200px;
+  height: 200px;
+  border-radius: 67px;
+  border: 5px solid;
+  border-color: #217470;
   display: block;
-  border-radius: 100%;
+  margin-left: -5px;
 `
 // export const Avatar = styled(Img)`
 //   border-radius: 4px;

src/components/UserBrief/styles/index.js

@@ -10,7 +10,7 @@ export const Wrapper = styled.div`
 export const BriefTextWrapper = styled.div`
   /* align-items: ${({ view }) =>
     view === VIEW.DESKTOP ? 'center' : 'flex-start'}; */
-  margin-top: 20px;
+  margin-top: 35px;
 `
 export const UserTitle = styled.div`
   ${css.flex()};

src/containers/content/UserContent/styles/index.js

@@ -16,7 +16,7 @@ export const BannerWrapper = styled.div`
   position: relative;
   background: ${theme('banner.bg')};
   width: 100%;
-  height: 120px;
+  height: 145px;
   margin-bottom: 20px;
   ${({ metric }) => css.fitPageWidth(metric)};
 `