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,83 +279,94 @@ export function MemberProgressModal(props: ProgressMapProps) {
             />
           )}
           <div className="p-4">
-            <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
-              </h2>
-              <p
-                className={
-                  'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base'
-                }
-              >
-                You are looking at {member.name}'s progress.{' '}
-                <a
-                  target={'_blank'}
-                  href={`/${resourceId}?t=${teamId}`}
-                  className="text-blue-600 underline"
-                >
-                  View your progress
-                </a>
-                .
-              </p>
-              <p className={'block text-gray-500 md:hidden'}>
-                View your progress&nbsp;
-                <a
-                  target={'_blank'}
-                  href={`/${resourceId}?t=${teamId}`}
-                  className="text-blue-600 underline"
-                >
-                  on the roadmap page.
-                </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">
-                <span>
-                  <span>{memberDone}</span> of <span>{memberTotal}</span> done
-                </span>
-              </div>
-              <div className="hidden items-center pl-4 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>
-
-                <span>
-                  <span>{memberDone}</span> completed
-                </span>
-                <span class="mx-1.5 text-gray-400">·</span>
-                <span>
-                  <span data-progress-learning="">{memberLearning}</span> in
-                  progress
-                </span>
-
-                {memberSkipped > 0 && (
-                  <>
-                    <span class="mx-1.5 text-gray-400">·</span>
-                    <span>
-                      <span data-progress-skipped="">{memberSkipped}</span>{' '}
-                      skipped
-                    </span>
-                  </>
-                )}
-
-                <span class="mx-1.5 text-gray-400">·</span>
-                <span>
-                  <span data-progress-total="">{memberTotal}</span> Total
-                </span>
+            {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>
-              {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"
+            ) : (
+              <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
+                </h2>
+                <p
+                  className={
+                    'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base'
+                  }
                 >
-                  <img src={QuestionIcon} className="h-4 w-4" />
-                  Track Progress
-                </button>
+                  You are looking at {member.name}'s progress.{' '}
+                  <a
+                    target={'_blank'}
+                    href={`/${resourceId}?t=${teamId}`}
+                    className="text-blue-600 underline"
+                  >
+                    View your progress
+                  </a>
+                  .
+                </p>
+                <p className={'block text-gray-500 md:hidden'}>
+                  View your progress&nbsp;
+                  <a
+                    target={'_blank'}
+                    href={`/${resourceId}?t=${teamId}`}
+                    className="text-blue-600 underline"
+                  >
+                    on the roadmap page.
+                  </a>
+                </p>
+              </div>
+            )}
+            <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>
+            </p>
+            <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>
+
+              <span>
+                <span>{memberDone}</span> completed
+              </span>
+              <span class="mx-1.5 text-gray-400">·</span>
+              <span>
+                <span data-progress-learning="">{memberLearning}</span> in
+                progress
+              </span>
+
+              {memberSkipped > 0 && (
+                <>
+                  <span class="mx-1.5 text-gray-400">·</span>
+                  <span>
+                    <span data-progress-skipped="">{memberSkipped}</span>{' '}
+                    skipped
+                  </span>
+                </>
               )}
-            </div>
+
+              <span class="mx-1.5 text-gray-400">·</span>
+              <span>
+                <span data-progress-total="">{memberTotal}</span> Total
+              </span>
+            </p>
           </div>
 
           <div ref={containerEl} className="px-4 pb-2"></div>