Highlight user personal progress

src/components/TeamProgress/GroupRoadmapItem.tsx

@@ -59,7 +59,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
 
             return (
               <button
-                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none`}
+                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none ${isMyProgress ? 'border-green-500 hover:border-green-600' : ''}`}
                 key={member?.member._id}
                 onClick={() => {
                   setDetailResourceId(member?.progress?.resourceId!);
@@ -81,11 +81,6 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                     />
                     <span className="inline-grid grid-cols-[auto,32px] items-center">
                       <span className="truncate mr-[5px]">{member?.member?.name}</span>
-                      {isMyProgress && (
-                        <span className="rounded-md bg-red-500 py-0.25 text-center text-[11px] text-white mr-[5px]">
-                          You
-                        </span>
-                      )}
                     </span>
                   </span>
                   <span className="shrink-0 text-xs text-gray-400">
@@ -93,7 +88,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                   </span>
                 </span>
                 <span
-                  className="absolute inset-0 bg-gray-100 group-hover:bg-gray-200"
+                  className={`absolute inset-0 ${isMyProgress ? 'bg-green-100 group-hover:bg-green-200' : 'bg-gray-100 group-hover:bg-gray-200'}`}
                   style={{
                     width: `${
                       (member?.progress?.done / member?.progress?.total) * 100

src/components/TeamProgress/MemberProgressItem.tsx

@@ -52,7 +52,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
             {isMyProgress && (
               <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
                 <h3 className="truncate font-medium">{member.name}</h3>
-                <span className="rounded-md bg-red-500 text-center py-0.5 text-xs text-white">
+                <span className="rounded-md bg-red-500 py-0.5 px-1 text-xs text-white">
                   You
                 </span>
               </div>

src/components/TeamProgress/TeamProgressPage.tsx

@@ -7,9 +7,7 @@ import { useToast } from '../../hooks/use-toast';
 import { useStore } from '@nanostores/preact';
 import { $currentTeam } from '../../stores/team';
 import { GroupRoadmapItem } from './GroupRoadmapItem';
-import { setUrlParams } from '../../lib/browser';
+import { getUrlParams, setUrlParams } from '../../lib/browser';
-import { getUrlParams } from '../../lib/browser';
-import { $toastMessage } from '../../stores/toast';
 import { useAuth } from '../../hooks/use-auth';
 
 export type UserProgress = {