From 39ab1a132e1b0edab71f818b28edfcc05c9687a5 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 18 Apr 2025 17:36:19 +0200
Subject: [PATCH] fix: bigger text and confirmation for unmarking an activity

---
 .../activity/[activityid]/activity.tsx        | 36 +++++++++++--------
 .../Activity/FixedActivitySecondaryBar.tsx    | 18 +++++-----
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
index e665561c..81b21e8d 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
@@ -340,21 +340,29 @@ export function MarkStatus(props: {
             content="Unmark as complete"
             side="top"
           >
-            <div
-              className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-red-400 rounded-full p-2 drop-shadow-md flex items-center text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
-              onClick={!isLoading ? unmarkActivityAsCompleteFront : undefined}
-            >
-              {isLoading ? (
-                <div className="animate-spin">
-                  <svg className="w-4 h-4" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                  </svg>
+            <ConfirmationModal
+              confirmationButtonText="Unmark Activity"
+              confirmationMessage="Are you sure you want to unmark this activity as complete? This will affect your course progress."
+              dialogTitle="Unmark activity as complete"
+              dialogTrigger={
+                <div
+                  className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-red-400 rounded-full p-2 drop-shadow-md flex items-center text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
+                >
+                  {isLoading ? (
+                    <div className="animate-spin">
+                      <svg className="w-4 h-4" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                    </div>
+                  ) : (
+                    <X size={17} />
+                  )}
                 </div>
-              ) : (
-                <X size={17} />
-              )}
-            </div>
+              }
+              functionToExecute={unmarkActivityAsCompleteFront}
+              status="warning"
+            />
           </ToolTip>
         </div>
       ) : (
diff --git a/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx b/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx
index 56ecdf43..41679d4e 100644
--- a/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx
+++ b/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx
@@ -125,8 +125,8 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
                   orgslug={props.orgslug}
                 />
                 <div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
-                  <p className="text-xs font-medium text-gray-500">Course</p>
-                  <h1 className="font-semibold text-gray-900 text-sm truncate">
+                  <p className="text-sm font-medium text-gray-500">Course</p>
+                  <h1 className="font-semibold text-gray-900 text-base truncate">
                     {props.course.name}
                   </h1>
                 </div>
@@ -145,16 +145,16 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
                     disabled={!prevActivity}
                     title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
                   >
-                    <ChevronLeft size={14} className="shrink-0 sm:w-4 sm:h-4" />
+                    <ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
                     <div className="flex flex-col items-start hidden sm:flex">
-                      <span className="text-[10px] text-gray-500">Previous</span>
-                      <span className="text-xs font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
+                      <span className="text-xs text-gray-500">Previous</span>
+                      <span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
                         {prevActivity ? prevActivity.name : 'No previous activity'}
                       </span>
                     </div>
                   </button>
 
-                  <span className="text-xs font-medium text-gray-500 px-1 sm:px-2">
+                  <span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
                     {currentIndex + 1} of {allActivities.length}
                   </span>
 
@@ -169,12 +169,12 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
                     title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
                   >
                     <div className="flex flex-col items-end hidden sm:flex">
-                      <span className={`text-[10px] ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
-                      <span className="text-xs font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
+                      <span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
+                      <span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
                         {nextActivity ? nextActivity.name : 'No next activity'}
                       </span>
                     </div>
-                    <ChevronRight size={14} className="shrink-0 sm:w-4 sm:h-4" />
+                    <ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
                   </button>
                 </div>
               </div>