From 0142951e0d075666c665dff4cbdeedcb7ee732c0 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Wed, 3 Mar 2021 16:28:22 +0800
Subject: [PATCH 1/2] fix: issue #135

---
 src/components/User/index.jsx                 |  5 ++-
 src/components/User/styles.module.scss        | 16 +++++++
 .../components/MemberList/index.jsx           | 45 +++++++------------
 .../components/MemberList/styles.module.scss  | 20 +--------
 4 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/components/User/index.jsx b/src/components/User/index.jsx
index 1288f9b6..9d15b3b6 100644
--- a/src/components/User/index.jsx
+++ b/src/components/User/index.jsx
@@ -9,12 +9,14 @@ import PT from "prop-types";
 import "./styles.module.scss";
 import { formatFullName } from "utils/format";
 import { TOPCODER_COMMUNITY_WEBSITE_URL } from "../../../config";
+import IconDirectArrow from "../../assets/images/icon-direct-arrow.svg";
 import { Link } from "@reach/router";
 
-const User = ({ user, hideFullName = false, handleLinkTo }) => {
+const User = ({ showArrow, user, hideFullName = false, handleLinkTo }) => {
   return (
     <div styleName="user">
       <Avatar {...user} />
+      {showArrow ? <IconDirectArrow styleName="direct-arrow" /> : null}
       <div styleName="user-details">
         {/* if "handleLinkTo" is provided, use it as internal link, otherwise as external profile link */}
         {handleLinkTo ? (
@@ -47,6 +49,7 @@ User.propTypes = {
   }),
   hideFullName: PT.bool,
   handleLinkTo: PT.string,
+  showArrow: PT.bool,
 };
 
 export default User;
diff --git a/src/components/User/styles.module.scss b/src/components/User/styles.module.scss
index 285a3882..21a390bb 100644
--- a/src/components/User/styles.module.scss
+++ b/src/components/User/styles.module.scss
@@ -3,8 +3,24 @@
 .user {
   align-items: center;
   display: flex;
+  position: relative;
 }
 
+.direct-arrow {
+  position: absolute;
+  left: 30px;
+  top: 40px;
+  bottom: 0;
+  text-align: center;
+  background-color: #404041;
+  border-radius: 80%;
+  width: 14px;
+  height: 14px;
+  padding: 3px;
+  path {
+    fill: white;
+  }
+}
 .user-details {
   margin-left: 16px;
 }
diff --git a/src/routes/TeamAccess/components/MemberList/index.jsx b/src/routes/TeamAccess/components/MemberList/index.jsx
index 0c85b5d1..80dcfc56 100644
--- a/src/routes/TeamAccess/components/MemberList/index.jsx
+++ b/src/routes/TeamAccess/components/MemberList/index.jsx
@@ -7,11 +7,9 @@ import PT from "prop-types";
 import CardHeader from "components/CardHeader";
 import Button from "components/Button";
 import "./styles.module.scss";
-import Avatar from "components/Avatar";
-import { Link } from "@reach/router";
+import User from "components/User";
 import TimeSection from "../TimeSection";
 import { formatInviteTime } from "utils/format";
-import IconDirectArrow from "../../../../assets/images/icon-direct-arrow.svg";
 import DeleteModal from "../DeleteModal";
 import AddModalContainer from "../AddModalContainer";
 
@@ -40,17 +38,13 @@ const MemberList = ({ teamId, members, invitees }) => {
               <div styleName="row-container">
                 <div styleName="table-row">
                   <div styleName="table-group avatar-name">
-                    <div styleName="table-cell">
-                      <Avatar
-                        photoUrl={member.photoURL}
-                        handle={member.handle || member.email}
-                      />
-                    </div>
-                    <div styleName="table-cell">
-                      <Link to={`/taas/myteams/${teamId}/rb/${member.id}`}>
-                        {member.handle || member.email}
-                      </Link>
-                    </div>
+                    <User
+                      user={{
+                        ...member,
+                        photoUrl: member.photoURL,
+                      }}
+                      hideFullName
+                    />
                   </div>
                   <TimeSection
                     start={member.workingHourStart}
@@ -70,20 +64,15 @@ const MemberList = ({ teamId, members, invitees }) => {
               <div styleName="row-container">
                 <div styleName="table-row">
                   <div styleName="table-group avatar-name">
-                    <div styleName="table-cell">
-                      <div styleName="invite-avatar">
-                        <Avatar
-                          photoUrl={invitee.photoURL}
-                          handle={invitee.handle || invitee.email}
-                        />
-                        <IconDirectArrow styleName="direct-arrow" />
-                      </div>
-                    </div>
-                    <div styleName="table-cell">
-                      <Link to={`/taas/myteams/${teamId}/rb/${invitee.id}`}>
-                        {invitee.handle || invitee.email}
-                      </Link>
-                    </div>
+                    <User
+                      user={{
+                        ...invitee,
+                        photoUrl: invitee.photoURL,
+                        handle: invitee.handle || invitee.email,
+                      }}
+                      showArrow
+                      hideFullName
+                    />
                   </div>
                   <div styleName="table-group invite-date">
                     <div styleName="table-cell">
diff --git a/src/routes/TeamAccess/components/MemberList/styles.module.scss b/src/routes/TeamAccess/components/MemberList/styles.module.scss
index 82781bd0..56f0476a 100644
--- a/src/routes/TeamAccess/components/MemberList/styles.module.scss
+++ b/src/routes/TeamAccess/components/MemberList/styles.module.scss
@@ -65,24 +65,8 @@
 
 .avatar-name {
   flex: 1 2 320px;
-}
-
-.invite-avatar {
-  position: relative;
-}
-
-.direct-arrow {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  text-align: center;
-  background-color: #404041;
-  border-radius: 80%;
-  width: 14px;
-  height: 14px;
-  padding: 3px;
-  path {
-    fill: white;
+  > div {
+    padding: 18px 8px 19px;
   }
 }
 

From 5bc8dcf1d85eef7971f61f524dc8fdb89b7a28a2 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Wed, 3 Mar 2021 20:59:52 +0800
Subject: [PATCH 2/2] fix: issue #135

---
 src/components/User/styles.module.scss        |  4 +--
 .../components/MemberList/index.jsx           | 36 ++++++++++---------
 .../components/MemberList/styles.module.scss  |  3 --
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/User/styles.module.scss b/src/components/User/styles.module.scss
index 21a390bb..9d2273bb 100644
--- a/src/components/User/styles.module.scss
+++ b/src/components/User/styles.module.scss
@@ -8,8 +8,8 @@
 
 .direct-arrow {
   position: absolute;
-  left: 30px;
-  top: 40px;
+  left: 20px;
+  top: 24px;
   bottom: 0;
   text-align: center;
   background-color: #404041;
diff --git a/src/routes/TeamAccess/components/MemberList/index.jsx b/src/routes/TeamAccess/components/MemberList/index.jsx
index 80dcfc56..494627d2 100644
--- a/src/routes/TeamAccess/components/MemberList/index.jsx
+++ b/src/routes/TeamAccess/components/MemberList/index.jsx
@@ -38,13 +38,15 @@ const MemberList = ({ teamId, members, invitees }) => {
               <div styleName="row-container">
                 <div styleName="table-row">
                   <div styleName="table-group avatar-name">
-                    <User
-                      user={{
-                        ...member,
-                        photoUrl: member.photoURL,
-                      }}
-                      hideFullName
-                    />
+                    <div styleName="table-cell">
+                      <User
+                        user={{
+                          ...member,
+                          photoUrl: member.photoURL,
+                        }}
+                        hideFullName
+                      />
+                    </div>
                   </div>
                   <TimeSection
                     start={member.workingHourStart}
@@ -64,15 +66,17 @@ const MemberList = ({ teamId, members, invitees }) => {
               <div styleName="row-container">
                 <div styleName="table-row">
                   <div styleName="table-group avatar-name">
-                    <User
-                      user={{
-                        ...invitee,
-                        photoUrl: invitee.photoURL,
-                        handle: invitee.handle || invitee.email,
-                      }}
-                      showArrow
-                      hideFullName
-                    />
+                    <div styleName="table-cell">
+                      <User
+                        user={{
+                          ...invitee,
+                          photoUrl: invitee.photoURL,
+                          handle: invitee.handle || invitee.email,
+                        }}
+                        showArrow
+                        hideFullName
+                      />
+                    </div>
                   </div>
                   <div styleName="table-group invite-date">
                     <div styleName="table-cell">
diff --git a/src/routes/TeamAccess/components/MemberList/styles.module.scss b/src/routes/TeamAccess/components/MemberList/styles.module.scss
index 56f0476a..b47b2650 100644
--- a/src/routes/TeamAccess/components/MemberList/styles.module.scss
+++ b/src/routes/TeamAccess/components/MemberList/styles.module.scss
@@ -65,9 +65,6 @@
 
 .avatar-name {
   flex: 1 2 320px;
-  > div {
-    padding: 18px 8px 19px;
-  }
 }
 
 .row-container {