Index: lams_tool_chat/src/java/org/lamsfoundation/lams/tool/chat/web/controller/LearningController.java
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -rc7da4cc1741df96dcdf19d62846e95f7e9ddf870
--- lams_tool_chat/src/java/org/lamsfoundation/lams/tool/chat/web/controller/LearningController.java	(.../LearningController.java)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_chat/src/java/org/lamsfoundation/lams/tool/chat/web/controller/LearningController.java	(.../LearningController.java)	(revision c7da4cc1741df96dcdf19d62846e95f7e9ddf870)
@@ -108,19 +108,17 @@
 	}
 	request.setAttribute("chatUserDTO", chatUserDTO);
 
-	// Ensure that the content is use flag is set.
+	// Ensure that the content is use flag is set
 	if (!chat.isContentInUse()) {
 	    chat.setContentInUse(true);
 	    chatService.saveOrUpdateChat(chat);
 	}
 
 	request.setAttribute(AttributeNames.ATTR_IS_LAST_ACTIVITY, chatService.isLastActivity(toolSessionID));
 
-	/* Check if submission deadline is null */
-
+	// Check if submission deadline is null
 	Date submissionDeadline = chatDTO.getSubmissionDeadline();
 	request.setAttribute("chatDTO", chatDTO);
-
 	if (submissionDeadline != null) {
 
 	    HttpSession ss = SessionManager.getSession();
@@ -134,20 +132,17 @@
 	    if (currentLearnerDate.after(tzSubmissionDeadline)) {
 		return "pages/learning/submissionDeadline";
 	    }
-
 	}
 
 	return "pages/learning/learning";
     }
 
     @RequestMapping("/finishActivity")
-    public String finishActivity(@ModelAttribute LearningForm learningForm, HttpServletRequest request,
-	    HttpServletResponse response) {
+    public void finishActivity(@ModelAttribute LearningForm learningForm, HttpServletResponse response) {
 	Long userUid = learningForm.getChatUserUID();
 
-	String nextActivityUrl;
 	try {
-	    nextActivityUrl = chatService.finishToolSession(userUid);
+	    String nextActivityUrl = chatService.finishToolSession(userUid);
 	    response.sendRedirect(nextActivityUrl);
 	} catch (DataMissingException e) {
 	    throw new ChatException(e);
@@ -156,8 +151,6 @@
 	} catch (IOException e) {
 	    throw new ChatException(e);
 	}
-
-	return null; // TODO need to return proper page.
     }
 
     @RequestMapping("/openNotebook")
@@ -185,11 +178,9 @@
     }
 
     @RequestMapping("/submitReflection")
-    public String submitReflection(@ModelAttribute LearningForm learningForm, HttpServletRequest request,
-	    HttpServletResponse response) {
+    public void submitReflection(@ModelAttribute LearningForm learningForm, HttpServletResponse response) {
 
 	// save the reflection entry and call the notebook.
-
 	ChatUser chatUser = chatService.getUserByUID(learningForm.getChatUserUID());
 	Long toolSessionID = chatUser.getChatSession().getSessionId();
 	Integer userID = chatUser.getUserId().intValue();
@@ -209,7 +200,7 @@
 	    chatService.updateEntry(entry);
 	}
 
-	return finishActivity(learningForm, request, response);
+	finishActivity(learningForm, response);
     }
 
     private ChatUser getCurrentUser(Long toolSessionId) {
Index: lams_tool_chat/web/includes/css/chat.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rc7da4cc1741df96dcdf19d62846e95f7e9ddf870
--- lams_tool_chat/web/includes/css/chat.scss	(.../chat.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_chat/web/includes/css/chat.scss	(.../chat.scss)	(revision c7da4cc1741df96dcdf19d62846e95f7e9ddf870)
@@ -60,8 +60,8 @@
 	padding: 2px;
 }
 
-#roster div {
-	margin-right: 5px; 
+.unselected div:first-child, .selected div:first-child {
+	margin-right: 10px; 
 }	
 
 #roster span {
@@ -83,17 +83,18 @@
 #sendMessageButton {
 	width: 100%;
 }
-    
+
+#roster>div {
+	line-height: 35px;
+}
+#roster.mode-teacher>div {
+	cursor: pointer;
+}
 .selected {
 	background-color: $gray-lightest;
-	padding: 2px;
-	cursor: pointer;
 }
-
 .unselected {
 	background-color: white;
-	padding: 2px;
-	cursor: pointer;
 }
 
 /* ================== MONITORING ================== */
Fisheye: Tag c7da4cc1741df96dcdf19d62846e95f7e9ddf870 refers to a dead (removed) revision in file `lams_tool_chat/web/pages/learning/headItems.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_chat/web/pages/learning/learning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rc7da4cc1741df96dcdf19d62846e95f7e9ddf870
--- lams_tool_chat/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_chat/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision c7da4cc1741df96dcdf19d62846e95f7e9ddf870)
@@ -1,108 +1,158 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"> <lams:LAMSURL /> </c:set>
+<c:set var="tool"> <lams:WebAppURL /> </c:set>
 
-<lams:html>
+<lams:PageLearner title="${chatDTO.title}" toolSessionID="${param.toolSessionID}" >
+	<link href="${tool}includes/css/chat.css" rel="stylesheet" type="text/css">
+
+	<script type="text/javascript">
+		checkNextGateActivity('finishButton', '<c:out value="${param.toolSessionID}" />', '', function(){
+			 submitForm('finishActivity');
+		});
 		
-		<c:set var="lams"> <lams:LAMSURL /> </c:set>
-		<c:set var="tool"> <lams:WebAppURL /> </c:set>
-	
-	<lams:head>
-		<title>
-			<fmt:message key="activity.title" />
-		</title>
-		<link href="${tool}includes/css/chat.css" rel="stylesheet" type="text/css">
-		<link href="<lams:LAMSURL/>css/defaultHTML_learner.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:LAMSURL/>includes/javascript/jquery.js"></script>
-		<script type="text/javascript">
-		var MODE = "${MODE}", TOOL_SESSION_ID = '<c:out value="${param.toolSessionID}" />', APP_URL = '<lams:WebAppURL />', LEARNING_ACTION = "<c:url value='learning/learning.do'/>", LAMS_URL = '<lams:LAMSURL/>';
-		</script>
-		<lams:JSImport src="includes/javascript/portrait.js" />
-		<lams:JSImport src="includes/javascript/learning.js" relative="true" />
-			
-	
-	</lams:head>
+		function disableFinishButton() {
+			var finishButton = document.getElementById("finishButton");
+			if (finishButton != null) {
+				finishButton.disabled = true;
+			}
+		}
+	    function submitForm(metodName){
+	        var f = document.getElementById("learningForm");
+	        f.submit();
+	    }
 
-	<body class="stripes">
-			
-		<lams:Page type="learner" title="${chatDTO.title}">
-			<div class="panel">
-				<c:out value="${chatDTO.instructions}" escapeXml="false" />
-			</div>
+    	var MODE = "${MODE}", 
+			TOOL_SESSION_ID = '<c:out value="${param.toolSessionID}" />', 
+			APP_URL = '<lams:WebAppURL />', 
+			LEARNING_ACTION = "<c:url value='learning/learning.do'/>";
+	</script>
+	<lams:JSImport src="includes/javascript/portrait5.js" />
+	<lams:JSImport src="includes/javascript/learning.js" relative="true" />
+	
+	<div class="container-lg">
+		<div id="instructions" class="instructions">
+			<c:out value="${chatDTO.instructions}" escapeXml="false" />
+		</div>
 		
-			<c:if test="${MODE == 'learner' || MODE == 'author'}">
+		<!-- Announcements and advanced settings -->
+		<c:if test="${chatDTO.lockOnFinish}">
+			<lams:Alert5 id="lockWhenFinished" type="info" close="true">
+				<c:choose>
+					<c:when test="${chatUserDTO.finishedActivity}">
+						<fmt:message key="message.activityLocked" />
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="message.warnLockOnFinish" />
+					</c:otherwise>
+				</c:choose>
+			</lams:Alert5>
+		</c:if>
 		
-				<!-- Announcements and advanced settings -->
-				<c:if test="${chatDTO.lockOnFinish}">
-					<lams:Alert id="lockWhenFinished" type="info" close="true">
-						<c:choose>
-							<c:when test="${chatUserDTO.finishedActivity}">
-								<fmt:message key="message.activityLocked" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="message.warnLockOnFinish" />
-							</c:otherwise>
-						</c:choose>
-					</lams:Alert>
-				</c:if>
+		<c:if test="${not empty submissionDeadline}">
+			<lams:Alert5 id="submissionDeadline" type="info" close="true">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${submissionDeadline}" />
+					</fmt:param>
+				</fmt:message>
+			</lams:Alert5>
+		</c:if>
 		
-				<c:if test="${not empty submissionDeadline}">
+		<!-- chat UI -->
+		<div class="row">
+			<div class="col-12 col-sm-9 col-md-9 col-lg-8">
+				<div id="messages" class="shadow" aria-live="polite"></div>
+			</div>
+			<div class="col-12 col-sm-3 col-md-3 col-lg-4">
+				<div id="roster" class="d-none d-sm-block div-hover shadow ${MODE == 'teacher' ? 'mode-teacher' : ''}"></div>
+			</div>
+		</div>
 		
-					<lams:Alert id="submissionDeadline" type="info" close="true">
-						<fmt:message key="authoring.info.teacher.set.restriction">
-							<fmt:param>
-								<lams:Date value="${submissionDeadline}" />
-							</fmt:param>
-						</fmt:message>
-					</lams:Alert>
-				</c:if>
-			</c:if>
-			<!-- End announcements and advanced settings -->
-		
-			<!-- chat UI -->
+		<c:if test="${MODE == 'teacher'}">
 			<div class="row">
-				<div class="col-12 col-sm-9 col-md-9 col-lg-8">
-					<div id="messages"></div>
+				<div class="col-12 mt-2">
+					<div id="sentTo" class="badge bg-info">
+						<fmt:message key="label.sendMessageTo" />
+						&nbsp;
+						<span id="sendToEveryone">
+							<fmt:message key="label.everyone" />
+						</span> 
+						<span id="sendToUser" style="display: none"></span>
+					</div>
 				</div>
-				<div class="col-12 col-sm-3 col-md-3 col-lg-4">
-					<div id="roster" class="d-none d-sm-block"></div>
-				</div>
 			</div>
-			<c:if test="${MODE == 'teacher'}">
-				<div class="row">
-					<div class="col-12 mt-2">
-						<div id="sentTo">
-							<fmt:message key="label.sendMessageTo" />
-							&nbsp;<span id="sendToEveryone"><fmt:message key="label.everyone" /></span> <span id="sendToUser"
-								style="display: none"></span>
-						</div>
+		</c:if>
+		
+		<c:if test="${MODE != 'learner' || !chatDTO.lockOnFinish || !chatUserDTO.finishedActivity}">
+			<div class="row align-items-center">
+				<div class="col-12 col-sm-9 col-md-9 col-lg-8">
+					<div id="textArea" class="mt-2">
+						<label for="sendMessageArea" class="visually-hidden">
+							<fmt:message key="button.send"/>
+						</label>
+						<textarea id="sendMessageArea" rows="2" class="form-control shadow" autofocus></textarea>
 					</div>
 				</div>
-			</c:if>
-		
-			<c:if test="${MODE != 'learner' || !chatDTO.lockOnFinish || !chatUserDTO.finishedActivity}">
-				<div class="row">
-					<div class="col-12 col-sm-9 col-md-9 col-lg-8">
-						<div id="textArea" class="mt-2">
-							<textarea id="sendMessageArea" rows="2" class="form-control" autofocus></textarea>
-						</div>
+				<div class="col-12 col-sm-3 col-md-3 col-lg-4">
+					<div id="sendMessageButtonCell" class="mt-2">
+						<button id="sendMessageButton" class="btn btn-autoresize btn-secondary" type="button" onclick="javascript:sendChatToolMessage()">
+							<i class="fa-solid fa-comment fa-lg me-1"></i>
+							<fmt:message key="button.send"/>
+						</button>
 					</div>
-					<div class="col-12 col-sm-3 col-md-3 col-lg-4">
-						<div id="sendMessageButtonCell" class="mt-2">
-							<input id="sendMessageButton" class="btn btn-autoresize btn-secondary" type="button" onclick="javascript:sendChatToolMessage()"
-								value='<fmt:message key="button.send"/>' />
-						</div>
-					</div>
 				</div>
-			</c:if>
+			</div>
+		</c:if>
 		
-			<c:if test="${MODE == 'learner' || MODE == 'author'}">
-				<%@ include file="parts/finishButton.jsp"%>
-			</c:if>
-		</lams:Page>
-
+		<c:if test="${MODE == 'learner' || MODE == 'author'}">
+			<form action="openNotebook.do" method="post">
+				<input type="hidden" name="chatUserUID" value="${chatUserDTO.uid}" />
 			
-	</body>
-</lams:html>
\ No newline at end of file
+				<c:if test="${chatUserDTO.finishedActivity and chatDTO.reflectOnActivity}">
+					<br class="mt-5">
+					<lams:NotebookReedit
+						reflectInstructions="${chatDTO.reflectInstructions}"
+						reflectEntry="${chatUserDTO.notebookEntry}"
+						isEditButtonEnabled="true"
+						notebookHeaderLabelKey="button.reflect"
+						editNotebookLabelKey="button.edit"/>
+				</c:if>
+			</form>
+
+			<div class="activity-bottom-buttons" id="learner-submit">
+				<c:choose>
+					<c:when test="${!chatUserDTO.finishedActivity and chatDTO.reflectOnActivity}">
+						<form:form action="openNotebook.do" method="post"
+								onsubmit="disableFinishButton();" modelAttribute="learningForm" id="learningForm">
+							<form:hidden path="chatUserUID" value="${chatUserDTO.uid}" />
+							<button type="submit" class="btn btn-responsive btn-primary na mt-2">
+								<fmt:message key="button.continue" />
+							</button>
+						</form:form>
+					</c:when>
+
+					<c:otherwise>
+						<form:form action="finishActivity.do" method="post"
+								onsubmit="disableFinishButton();"  modelAttribute="learningForm" id="learningForm">
+							<form:hidden path="chatUserUID" value="${chatUserDTO.uid}" />
+							<button type="button" class="btn btn-primary mt-2 na btn-autoresize" id="finishButton">
+								 <span class="nextActivity">
+									 <c:choose>
+									 	<c:when test="${isLastActivity}">
+									 		 <fmt:message key="button.submit" />
+									 	</c:when>
+									 	<c:otherwise>
+									 		 <fmt:message key="button.finish" />
+									 	</c:otherwise>
+									 </c:choose>
+								 </span>
+							</button>
+						</form:form>
+					</c:otherwise>
+				</c:choose>
+			</div>
+
+		</c:if>
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_chat/web/pages/learning/notebook.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rc7da4cc1741df96dcdf19d62846e95f7e9ddf870
--- lams_tool_chat/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_chat/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision c7da4cc1741df96dcdf19d62846e95f7e9ddf870)
@@ -1,73 +1,15 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:html>
-		
-		<c:set var="lams"> <lams:LAMSURL /> </c:set>
-		<c:set var="tool"> <lams:WebAppURL /> </c:set>
-	
-	<lams:head>
-		<title>
-			<fmt:message key="activity.title" />
-		</title>
-		<link href="${tool}includes/css/chat.css" rel="stylesheet" type="text/css">
-		<link href="${tool}includes/css/chat.css" rel="stylesheet" type="text/css">
-		<link href="${lams}css/defaultHTML_learner.css" rel="stylesheet" type="text/css">
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-		
-	</lams:head>
-	<body class="stripes">
+<lams:Notebook title="${chatDTO.title}"
+	toolSessionID="${toolSessionID}"
+	instructions="${chatDTO.reflectInstructions}"
+	formModelAttribute="learningForm"
+	hiddenInputs="chatUserUID"
+	isNextActivityButtonSupported="true"
+	finishButtonLabelKey="button.submit"
+	nextActivityButtonLabelKey="button.finish"
+	notebookLabelKey="heading.reflection"/>
 			
-			<script type="text/javascript">
-				checkNextGateActivity('finishButton', '${toolSessionID}', '', function(){
-					 submitForm('finishActivity');
-				});
 			
-				function disableFinishButton() {
-					document.getElementById("finishButton").disabled = true;
-				}
-				function submitForm(methodName) {
-					var f = document.getElementById('learningForm');
-					f.submit();
-				}
-			</script>
-			
-			<lams:Page type="learner" title="${chatDTO.title}" formID="learningForm">
-			
-				<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="learningForm" id="learningForm">
-			
-					<div class="panel">
-						<lams:out value="${chatDTO.reflectInstructions}" escapeHtml="true" />
-					</div>
-			
-					<form:textarea rows="5" path="entryText" cssClass="form-control" id="focused"></form:textarea>
-			
-					<form:hidden path="chatUserUID" />
-					<a href="#nogo" class="btn btn-primary float-end mt-2 na" id="finishButton">
-						<c:choose>
-							<c:when test="${isLastActivity}">
-								<fmt:message key="button.submit" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="button.finish" />
-							</c:otherwise>
-						</c:choose>
-					</a>
-				</form:form>
-			</lams:Page>
-			
-			
-			<script type="text/javascript">
-				window.onload = function() {
-					document.getElementById("focused").focus();
-				}
-			</script>
 
-
-
-			
-	</body>
-</lams:html>
Fisheye: Tag c7da4cc1741df96dcdf19d62846e95f7e9ddf870 refers to a dead (removed) revision in file `lams_tool_chat/web/pages/learning/parts/finishButton.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag c7da4cc1741df96dcdf19d62846e95f7e9ddf870 refers to a dead (removed) revision in file `lams_tool_chat/web/pages/monitoring/new chat.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?