wip: mail icon

src/components/ReactIcons/MailIcon.tsx

@@ -0,0 +1,23 @@
+interface MailIconProps {
+  className?: string;
+}
+export function MailIcon(props: MailIconProps) {
+  const { className } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={className}
+    >
+      <rect width="20" height="16" x="2" y="4" rx="2" />
+      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+    </svg>
+  );
+}

src/components/TeamMembers/RoleBadge.tsx

@@ -3,8 +3,7 @@ import type { AllowedRoles } from '../CreateTeam/RoleDropdown';
 export function MemberRoleBadge({ role }: { role: AllowedRoles }) {
   return (
     <span
-      className={`rounded-full px-2 py-0.5 text-xs capitalize ${
-        ['admin'].includes(role)
+      className={`rounded-full px-2 py-0.5 text-xs flex items-center capitalize ${['admin'].includes(role)
           ? 'bg-blue-100 text-blue-700 '
           : 'bg-gray-100 text-gray-700 '
         } ${['manager'].includes(role) ? 'bg-green-100 text-green-700' : ''}`}

src/components/TeamMembers/TeamMemberItem.tsx

@@ -1,3 +1,4 @@
+import { MailIcon } from "../ReactIcons/MailIcon";
 import { MemberActionDropdown } from "./MemberActionDropdown";
 import { MemberRoleBadge } from "./RoleBadge";
 import type { TeamMemberItem } from "./TeamMembersPage";
@@ -14,7 +15,7 @@ type TeamMemberProps = {
 
 export function TeamMemberItem(props: TeamMemberProps) {
   const { member, index, teamId, onUpdateMember, canManageCurrentTeam, userId, handleDeleteMember } = props;
-  const hasProgress = member.progress.length > 0;
+  const showNoProgress = member.progress.length === 0 && member.status === 'joined';
 
   return (
     <div
@@ -40,7 +41,7 @@ export function TeamMemberItem(props: TeamMemberProps) {
             <h3 className="inline-grid grid-cols-[auto_auto_auto] items-center font-medium">
               <span className="truncate">{member.name}</span>
               {
-                !hasProgress && (
+                showNoProgress && (
                   <span className="ml-2 text-xs font-normal bg-gray-600 text-white rounded-full sm:inline px-2 py-0.5">
                     No Progress
                   </span>
@@ -72,6 +73,7 @@ export function TeamMemberItem(props: TeamMemberProps) {
       </div>
 
       <div className="flex items-center text-sm">
+        {/* <SendProgressReminder /> */}
         <span class={'hidden sm:block'}>
           <MemberRoleBadge role={member.role} />
         </span>
@@ -87,3 +89,12 @@ export function TeamMemberItem(props: TeamMemberProps) {
     </div>
   )
 }
+
+function SendProgressReminder() {
+  return (
+    <button className="rounded-full whitespace-nowrap px-2 py-0.5 text-xs bg-orange-100 text-orange-700 flex items-center gap-1.5 mr-2">
+      <MailIcon className="h-3 w-3" />
+      Send Reminder
+    </button>
+  )
+}