chore: current user header

src/components/TeamProgress/MemberProgressModal.tsx

@@ -18,6 +18,7 @@ import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
 import { ProgressHint } from './ProgressHint';
 import QuestionIcon from '../../icons/question.svg';
+import { InfoIcon } from '../ReactIcons/InfoIcon';
 
 export type ProgressMapProps = {
   member: TeamMember;
@@ -278,6 +279,25 @@ export function MemberProgressModal(props: ProgressMapProps) {
             />
           )}
           <div className="p-4">
+            {isCurrentUser ? (
+              <div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
+                <h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
+                  Your Progress
+                </h2>
+                <p className={'text-gray-500'}>
+                  You can{' '}
+                  <button
+                    className="inline-flex items-center text-blue-600 underline"
+                    onClick={() => {
+                      setShowProgressHint(true);
+                    }}
+                  >
+                    follow these instructions
+                  </button>{' '}
+                  to update your progress below.
+                </p>
+              </div>
+            ) : (
               <div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
                 <h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
                   {member.name}'s Progress
@@ -308,13 +328,17 @@ export function MemberProgressModal(props: ProgressMapProps) {
                   </a>
                 </p>
               </div>
-            <div class="-mx-4 mb-3 flex items-center justify-between border-b border-t py-2 text-sm">
+            )}
-              <div className="flex items-center pl-4 sm:hidden">
+            <p class="-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden">
+              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+                <span>{progressPercentage}</span>% Done
+              </span>
+
               <span>
                 <span>{memberDone}</span> of <span>{memberTotal}</span> done
               </span>
-              </div>
+            </p>
-              <div className="hidden items-center pl-4 sm:flex">
+            <p class="-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex">
               <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
@@ -342,19 +366,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
               <span>
                 <span data-progress-total="">{memberTotal}</span> Total
               </span>
-              </div>
+            </p>
-              {isCurrentUser && (
-                <button
-                  onClick={() => {
-                    setShowProgressHint(true);
-                  }}
-                  class="mr-4 flex items-center gap-1 text-sm font-medium text-black opacity-60 transition-opacity hover:opacity-100"
-                >
-                  <img src={QuestionIcon} className="h-4 w-4" />
-                  Track Progress
-                </button>
-              )}
-            </div>
           </div>
 
           <div ref={containerEl} className="px-4 pb-2"></div>