rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: bigger text and confirmation for unmarking an activity

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -340,21 +340,29 @@ export function MarkStatus(props: {
content="Unmark as complete" content="Unmark as complete"
side="top" side="top"
> >
<div <ConfirmationModal
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`} confirmationButtonText="Unmark Activity"
onClick={!isLoading ? unmarkActivityAsCompleteFront : undefined} confirmationMessage="Are you sure you want to unmark this activity as complete? This will affect your course progress."
> dialogTitle="Unmark activity as complete"
{isLoading ? ( dialogTrigger={
<div className="animate-spin"> <div
<svg className="w-4 h-4" viewBox="0 0 24 24"> 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`}
<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> {isLoading ? (
</svg> <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> </div>
) : ( }
<X size={17} /> functionToExecute={unmarkActivityAsCompleteFront}
)} status="warning"
</div> />
</ToolTip> </ToolTip>
</div> </div>
) : ( ) : (

18
apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx
View file

@ -125,8 +125,8 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
orgslug={props.orgslug} orgslug={props.orgslug}
/> />
<div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block"> <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> <p className="text-sm font-medium text-gray-500">Course</p>
<h1 className="font-semibold text-gray-900 text-sm truncate"> <h1 className="font-semibold text-gray-900 text-base truncate">
{props.course.name} {props.course.name}
</h1> </h1>
</div> </div>
@ -145,16 +145,16 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
disabled={!prevActivity} disabled={!prevActivity}
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'} 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"> <div className="flex flex-col items-start hidden sm:flex">
<span className="text-[10px] text-gray-500">Previous</span> <span className="text-xs text-gray-500">Previous</span>
<span className="text-xs font-medium text-left truncate max-w-[100px] sm:max-w-[150px]"> <span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
{prevActivity ? prevActivity.name : 'No previous activity'} {prevActivity ? prevActivity.name : 'No previous activity'}
</span> </span>
</div> </div>
</button> </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} {currentIndex + 1} of {allActivities.length}
</span> </span>
@ -169,12 +169,12 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'} title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
> >
<div className="flex flex-col items-end hidden sm:flex"> <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 ${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-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
{nextActivity ? nextActivity.name : 'No next activity'} {nextActivity ? nextActivity.name : 'No next activity'}
</span> </span>
</div> </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> </button>
</div> </div>
</div> </div>