varnitgoyal95/houston-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colored logo added

Browse Source
This commit is contained in:
AyushRanjan
2023-09-11 14:03:44 +05:30
parent fb8fa8a02e
commit 3012d6b825
2 changed files with 52 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/Person.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Person">
<mask id="mask0_385_34980" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_385_34980)">
<path id="person_filled" d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM6 20C5.45 20 4.97933 19.8043 4.588 19.413C4.196 19.021 4 18.55 4 18V17.2C4 16.6333 4.146 16.1123 4.438 15.637C4.72933 15.1623 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6457 8.75 13.387C9.81667 13.129 10.9 13 12 13C13.1 13 14.1833 13.129 15.25 13.387C16.3167 13.6457 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2707 15.1623 19.562 15.637C19.854 16.1123 20 16.6333 20 17.2V18C20 18.55 19.8043 19.021 19.413 19.413C19.021 19.8043 18.55 20 18 20H6Z" fill="#0276FE"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

53
src/components/MembersDetails/index.tsx
View File

@@ -5,6 +5,7 @@ import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
import styles from './Members.module.scss';
import Button from '@navi/web-ui/lib/primitives/Button';
import person_logo from '@src/assets/person_filled.svg';
import person_logo_colored from '@src/assets/person.svg';
import { toast } from '@navi/web-ui/lib/primitives/Toast';
const MembersDetails = (props: any) => {
@@ -24,13 +25,14 @@ const MembersDetails = (props: any) => {
const userRoles = userData.roles || [];
console.log('userRoles', userRoles);
const managerEmail = data?.participants?.find(
participant => participant.manager,
)?.email;
const storedEmail = localStorage.getItem('email-id');
const isAdmin = userRoles.includes('admin');
useEffect(() => {
// Check if the manager's email matches the one stored in local storage
const managerEmail = data?.participants?.find(
participant => participant.manager,
)?.email;
const storedEmail = localStorage.getItem('email-id');
const isAdmin = userRoles.includes('admin');
if (managerEmail === storedEmail || isAdmin) {
// Display the remove button
@@ -39,7 +41,16 @@ const MembersDetails = (props: any) => {
// Hide the remove button
setShowRemoveButton(false);
}
}, [data]);
}, [data, userRoles]);
const sortedParticipants = data?.participants?.sort((a, b) => {
// If "a" is a manager and "b" is not, "a" comes first
if (a.manager && !b.manager) return -1;
// If "b" is a manager and "a" is not, "b" comes first
if (b.manager && !a.manager) return 1;
// Otherwise, maintain the existing order
return 0;
});
return (
<div>
@@ -74,7 +85,7 @@ const MembersDetails = (props: any) => {
<div className={styles['participant-detail']}>
<div className={styles['participant-detail-nest']}>
{showRemoveButton && (
{showRemoveButton && !participant.manager && (
<div className={styles[`mark-as-manager`]}>
<Tag
color="blue"
@@ -83,19 +94,39 @@ const MembersDetails = (props: any) => {
/>
</div>
)}
{showRemoveButton && (
{showRemoveButton && !participant.manager && (
<img src={person_logo} alt="person_logo" />
)}
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
{showRemoveButton && (
<div className={styles['participant-detail-nest']}>
{showRemoveButton && !participant.manager && (
<div className={styles[`mark-as-manager`]}>
<Tag
color="blue"
label="Mark as manager"
variant="transparent"
/>
</div>
)}
{showRemoveButton && participant.manager && (
<img src={person_logo_colored} alt="person_logo" />
)}
</div>
{showRemoveButton && !participant.manager && (
<Button
variant="text"
onClick={() => handleRemoveUser(participant)}
>
Remove
&nbsp;&nbsp;&nbsp;&nbsp;Remove
</Button>
)}
{participant.manager && (
<Typography variant="p4">
&nbsp;&nbsp;&nbsp;Manager
</Typography>
)}
</div>
</div>
))}