Merge pull request #112 from itsJosephV/fix/popoverTrigger-listSorted

fix: popover trigger placement and list of members sorted
Afordin · May 10, 2024 · 862e6c3 · 862e6c3
2 parents 4ade5b3 + e28de6b
commit 862e6c3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/common/utils/parser/groupParticipantsByRole.ts b/src/common/utils/parser/groupParticipantsByRole.ts
@@ -29,8 +29,9 @@ import { User } from '../../types';
    }
  */
 
-export function groupParticipantsByRole(membersObj: User[], administrator: User) {
-  const grouped = membersObj.concat(administrator).reduce(
+export function groupParticipantsByRole(membersObj: User[], administratorObj: User) {
+  const grouped = [administratorObj].concat(membersObj).reduce(
+    // thanks Marcos <3!
     (acc, obj) => {
       if (!acc[obj.role]) {
         acc[obj.role] = [];

diff --git a/src/components/Cards/ProjectCard/ProjectCard.tsx b/src/components/Cards/ProjectCard/ProjectCard.tsx
@@ -41,7 +41,8 @@ export const ProjectCard = ({
     list: cn('flex flex-wrap gap-4 mt-4 text-3.5'),
     popoverTrigger: cn(
       'bg-gradient-to-rb from-primary-600 to-secondary-500 w-5 h-5 rounded-full text-xs flex items-center justify-center cursor-pointer select-none'
-    )
+    ),
+    adminBadge: cn('text-xs bg-gradient-to-rb from-primary-600 to-secondary-500 text-transparent bg-clip-text rounded-full')
   };
 
   const handleDescription = () => {
@@ -60,19 +61,19 @@ export const ProjectCard = ({
     const participantList = participantsByRole[role].map((participant, idx) => {
       const isAdmin = Object.values(administrator).includes(participant.name);
       return (
-        <li className="text-cWhite capitalize px-1 py-0.5 flex gap-1" key={participant.name + idx}>
+        <li className="text-cWhite capitalize px-1 py-0.5 flex items-center gap-1.5" key={participant.name + idx}>
           {participant.name}
-          {isAdmin && <span className="text-secondary-600">{'(Adm)'}</span>}
+          {isAdmin && <span className={classes.adminBadge}>{'(admin)'}</span>}
         </li>
       );
     });
 
     return (
       <li key={role + idx}>
         {/** TODO: change key later 😒 Why later?*/}
-        <Tag>
-          <div className="flex items-center gap-2">
-            {role}
+        <Tag className="relative capitalize">
+          <span>{role}</span>
+          <div className="absolute -right-2 -top-2">
             <Popover content={<ul>{participantList}</ul>}>
               <span className={classes.popoverTrigger}>{groupLength}</span>
             </Popover>

diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -57,7 +57,7 @@ interface TagProps {
 export const Tag = ({ children, variant = TagVariant.primary, size = TagSize.sm, className, borderSize = TagSize.xs }: TagProps) => {
   const classes = {
     container: cn('flex items-center justify-center rounded-full w-fit', TagContainerVariants[variant], BorderSizes[borderSize], className),
-    tag: cn('rounded-full py-px px-2', TagVariants[variant], Sizes[size])
+    tag: cn('rounded-full py-0.5 px-3', TagVariants[variant], Sizes[size])
   };
 
   return (