fix: bigger text and confirmation for unmarking an activity

This commit is contained in:
swve 2025-04-18 17:36:19 +02:00
parent c605c2a8f4
commit 39ab1a132e
2 changed files with 31 additions and 23 deletions

View file

@ -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>
) : (