fix: issue #135

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;

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;
 }

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">

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;
   }
 }