Index: lams_tool_task/web/pages/learning/learning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -4,6 +4,7 @@
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
 
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 </c:if>
@@ -12,20 +13,13 @@
 <c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
 <c:set var="taskList" value="${sessionMap.taskList}" />
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
-
 <c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
 <c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE))%></c:set>
 <c:set var="EXE_FILE_TYPES"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set>
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
+<lams:PageLearner title="${taskList.title}" toolSessionID="${toolSessionID}">
 	<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
-
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
 	
 	<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
 	<c:choose>
@@ -39,13 +33,11 @@
 			<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
 		</c:when>
 	</c:choose>
-	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
+	<lams:JSImport src="includes/javascript/upload.js" />
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${toolSessionID}', '', finishSession);
 		
-		var LAMS_URL = '${lams}',
-	 		UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
+		var UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
 			// convert Java syntax to JSON
 	       EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
 		   EXE_FILE_ERROR = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.attachment.executable" /></spring:escapeBody>';
@@ -68,8 +60,7 @@
 		}
 	
 		function validateFiles() {
-			var fileSelect = document.getElementById('uploadButton');
-			var files = fileSelect.files;
+			var files = uppy.getFiles();
 			if (files.length == 0) {
 				return false;
 			} else {
@@ -151,7 +142,11 @@
 					//show complete item button in case comment is required and only its absence prevented it from completion
 					var i = $("#item-faminus-" + itemUid);
 					if (eval(i.data("waiting-for-comment"))) {
-						i.replaceWith( '<a href="javascript:;" onclick="return completeItem(' + itemUid + ')"><i class="fa fa-lg fa-square-o"></i></a>' );
+						i.parent().replaceWith( '<button type="button" onClick="javascript:completeItem(' + itemUid + ')" class="complete-item-button btn btn-success no-shadow">' + 
+											'<i class="fa-solid fa-pen-to-square fa-xl me-1"></i>' +
+											'<fmt:message key="label.completed" />' +
+										'</button> '
+						);
 					}
 				}
 			);
@@ -160,6 +155,7 @@
 		/**
 		 * Initialised Uppy as the file upload widget
 		 */
+		var uppy;
 		function initFileUpload(target, tmpFileUploadId, language) {
 			  var uppyProperties = {
 				  id : 'uppy-' + target,
@@ -197,7 +193,7 @@
 			  }
 			  
 			  
-			  let uppy = Uppy.Core(uppyProperties);
+			  uppy = Uppy.Core(uppyProperties);
 			  // upload using Ajax
 			  uppy.use(Uppy.XHRUpload, {
 				  endpoint: LAMS_URL + 'tmpFileUpload',
@@ -246,32 +242,25 @@
 		}
 	</script>
 	<script type="text/javascript" src="/lams/includes/javascript/jquery.timeago.js"></script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${taskList.title}"> 
-
+	<div id="container-main">
+			
 		<!--Task Information-->
 
-		<lams:errors/>
+		<lams:errors5/>
 
 		<c:if test="${not empty taskList.submissionDeadline}">
-			<lams:Alert id="submissionDeadline" type="info" close="true">
+			<lams:Alert5 id="submissionDeadline" type="info" close="true">
 				<fmt:message key="authoring.info.teacher.set.restriction">
 					<fmt:param>
 						<lams:Date value="${sessionMap.submissionDeadline}" />
 					</fmt:param>
 				</fmt:message>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
-
-		<div class="panel" id="instructions">
-			<c:out value="${taskList.instructions}" escapeXml="false" />
-		</div>
-
 		<c:if test="${(mode != 'teacher') && taskList.lockWhenFinished}">
-			<lams:Alert id="lockWhenFinished" type="info" close="true">
+			<lams:Alert5 id="lockWhenFinished" type="info" close="true">
 				<c:choose>
 					<c:when test="${finishedLock}">
 						<fmt:message key="label.learning.responses.locked.reminder" />
@@ -280,91 +269,43 @@
 						<fmt:message key="label.learning.responses.locked" />
 					</c:otherwise>
 				</c:choose>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
 		<c:if test="${(mode != 'teacher') && taskList.sequentialOrder}">
-			<lams:Alert id="sequentialOrder" type="info" close="true">
+			<lams:Alert5 id="sequentialOrder" type="info" close="true">
 				<fmt:message key="label.learning.info.sequential.order" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
+		<c:if test="${fn:length(taskList.minimumNumberTasksErrorStr) > 0}">
+			<lams:Alert5 id="minimumNumberTasks" type="info">
+				<c:out value="${taskList.minimumNumberTasksErrorStr}" />
+			</lams:Alert5>
+		</c:if>
+
+		<div id="instructions" class="instructions">
+			<c:out value="${taskList.instructions}" escapeXml="false" />
+		</div>
+
 		<!--TaskListItems table-->
 
 		<%@ include file="/pages/learning/parts/itemlist.jsp"%>
 
 		<!--"Check for new" button-->
 
 		<p class="form-text">
-			* -
-			<fmt:message key="label.learning.required.tasks" />
+			<i class="fa-solid fa-asterisk text-danger"></i>
+			 - <fmt:message key="label.learning.required.tasks" />
 		</p>
 
-		<c:if test="${mode != 'teacher'}">
-			<p>
-				<button onclick="return checkNew()" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
-					<fmt:message key="label.learning.check.for.new" />
-				</button>
-			</p>
-		</c:if>
-
-		<!--"Add new task" Area-->
-
-		<c:if test="${mode != 'teacher' && (not finishedLock)}">
-			<c:if test="${taskList.allowContributeTasks}">
-
-				<p>
-					<button onclick="javascript:showMessage('<lams:WebAppURL/>learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}');"
-						class="btn btn-sm btn-secondary btn-disable-on-submit"><i class="fa fa-sm fa-plus-circle"></i>&nbsp;<fmt:message
-							key="label.authoring.basic.add.task" /> </button>
-				<p>
-
-					<iframe onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-						id="reourceInputArea" name="reourceInputArea" style="width: 0px; height: 0px; border: 0px; display: none"
-						frameborder="no" scrolling="no"> </iframe>
-			</c:if>
-		</c:if>
-
 		<!--Reflection-->
-
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-						<div class="panel panel-default">
-							<div class="panel-heading panel-title">
-								<fmt:message key="label.monitoring.summary.title.reflection" />
-							</div>
-							<div class="panel-body">
-								<div class="panel">
-									<lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}" />
-								</div>
-
-								<div class="mb-3">
-
-									<c:choose>
-										<c:when test="${empty sessionMap.reflectEntry}">
-											<p>
-												<em> <fmt:message key="message.no.reflection.available" />
-												</em>
-											</p>
-										</c:when>
-										<c:otherwise>
-											<p>
-												<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-											</p>
-										</c:otherwise>
-									</c:choose>
-
-									<c:if test="${mode != 'teacher'}">
-										<button type="submit" id="finishButton" onclick="return continueReflect()"
-											class="btn btn-sm btn-secondary float-start mt-2 btn-disable-on-submit">
-											<fmt:message key="label.edit" />
-										</button>
-									</c:if>
-
-
-								</div>
-
-							</div>
-						</div>
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="${mode != 'teacher'}"
+				notebookHeaderLabelKey="label.monitoring.summary.title.reflection"/>
 		</c:if>
 
 		<!--Bottom buttons-->
@@ -375,40 +316,62 @@
 				<c:set var="isRequiredTasksCompleted" value="${false}" />
 			</c:if>
 		</c:forEach>
-
-		<c:if test="${(mode != 'teacher') && isRequiredTasksCompleted}">
+		<c:if test="${(mode != 'teacher')}">
+			<c:if test="${isRequiredTasksCompleted && taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
+				<lams:Alert5 type="warning">
+					<fmt:message key="label.learning.wait.for.monitor.verification" />
+				</lams:Alert5>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
-
-				<c:choose>
-					<c:when test="${taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
-						<fmt:message key="label.learning.wait.for.monitor.verification" />
-					</c:when>
-
-					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<button type="submit" id="finishButton" onclick="return continueReflect()"
-							class="btn btn-primary btn-disable-on-submit">
-							<fmt:message key="label.continue" />
-						</button>
-					</c:when>
-
-					<c:otherwise>
-						<button type="submit" id="finishButton"
-							class="btn btn-primary btn-disable-on-submit na">
-							<span class="nextActivity"> <c:choose>
+				<c:if test="${isRequiredTasksCompleted}">
+					<c:choose>
+						<c:when test="${taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
+						</c:when>
+	
+						<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
+							<button type="button" id="finishButton" onclick="return continueReflect()"
+								class="btn btn-primary btn-disable-on-submit na">
+								<fmt:message key="label.continue" />
+							</button>
+						</c:when>
+	
+						<c:otherwise>
+							<button type="submit" id="finishButton" class="btn btn-primary btn-disable-on-submit na">
+								<c:choose>
 									<c:when test="${sessionMap.isLastActivity}">
 										<fmt:message key="label.submit" />
 									</c:when>
 									<c:otherwise>
 										<fmt:message key="label.finished" />
 									</c:otherwise>
 								</c:choose>
-							</span>
-						</button>
-					</c:otherwise>
-				</c:choose>
+							</button>
+						</c:otherwise>
+					</c:choose>
+				</c:if>
+				
+				<button type="button" onclick="return checkNew()" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-refresh me-2"> 
+					<fmt:message key="label.learning.check.for.new" />
+				</button>
+				
+				<!--"Add new task" Area-->
+				
+				<c:if test="${(not finishedLock) && taskList.allowContributeTasks}">
+					<button type="button" onclick="javascript:showMessage('<lams:WebAppURL/>learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}');"
+							class="btn btn-sm btn-secondary btn-disable-on-submit me-2">
+						<i class="fa fa-sm fa-plus-circle"></i>&nbsp;
+						<fmt:message key="label.authoring.basic.add.task" />
+					</button>
+				</c:if>
 			</div>
 		</c:if>
 
-	</lams:Page>
-</body>
-</lams:html>
+		<c:if test="${(not finishedLock) && taskList.allowContributeTasks}">
+			<iframe onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
+					id="reourceInputArea" name="reourceInputArea" class="mt-3"
+					style="width: 0px; height: 0px; border: 0px; display: none"
+					frameborder="no" scrolling="no" title="<fmt:message key='label.authoring.basic.add.task' />"> </iframe>
+		</c:if>
+	</div>
+</lams:PageLearner>