update student training message

* chore: update student training message

* chore: bug for self grading

* chore: update styling

* chore: more styling

* chore: make loading more visible

* chore: update linting

Author: leangseu-edx

src/components/AppContainer.jsx

@@ -24,7 +24,7 @@ const AppContainer = ({ children }) => {
   }
   return (
     <div className="w-100 h-100">
-      {isLoaded ? children : <Spinner animation="border" screenReaderText="loading" />}
+      {isLoaded ? children : <Spinner animation="border" screenReaderText="loading" className="app-loading" />}
     </div>
   );
 };

src/components/ProgressBar/hooks.js

@@ -25,7 +25,6 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     ? activeStepName === step
     : viewStep === step;
   let isEnabled = isActive
-    || viewStep === stepNames.done
     || stepState === stepStates.inProgress
     || (canRevisit && stepState === stepStates.done);
 
@@ -34,7 +33,6 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     const isWaitingForSubmissions = stepInfo.peer?.isWaitingForSubmissions;
     isEnabled = !isWaitingForSubmissions && (isEnabled || isPeerComplete);
   }
-
   return {
     ...(viewStep === stepNames.xblock ? { onClick } : { href }),
     isEnabled,

src/components/Prompt/index.jsx

@@ -18,7 +18,7 @@ const Prompt = ({ prompt, defaultOpen }) => {
   const message = messages[viewStep] || messages[activeStepName];
   const title = message ? formatMessage(message) : '';
   return (
-    <Collapsible className="py-3" title={(<h3>{title}</h3>)} open={open} onToggle={toggleOpen}>
+    <Collapsible title={(<h3 className="py-3">{title}</h3>)} open={open} onToggle={toggleOpen}>
       <div dangerouslySetInnerHTML={{ __html: prompt }} />
     </Collapsible>
   );

src/components/StatusAlert/messages.js

@@ -79,7 +79,7 @@ const submissionHeadings = defineMessages({
 const studentTrainingAlerts = defineMessages({
   [stepStates.submitted]: {
     id: 'frontend-app-ora.StatusAlert.studentTraining.submitted',
-    defaultMessage: 'You have successfully submitted a practice grade. Continue to the next example, or if you have completed all examples, continue to the next step.',
+    defaultMessage: 'Continue to the next example, or if you have completed all examples, continue to the next step.',
     description: 'Practice Assessment submitted status alert',
   },
   [stepStates.trainingValidation]: {
@@ -91,7 +91,7 @@ const studentTrainingAlerts = defineMessages({
 const studentTrainingHeadings = defineMessages({
   [stepStates.submitted]: {
     id: 'frontend-app-ora.StatusAlert.Heading.studentTraining.submitted',
-    defaultMessage: 'Student Training: Submitted',
+    defaultMessage: 'You have successfully submitted a practice grade.',
     description: 'Practice Assessment submitted status alert heading',
   },
 });

src/index.scss

@@ -47,3 +47,10 @@
 .ora-icon svg {
   display: inline-block !important;
 }
+
+.app-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  scale: 3;
+}

src/views/AssessmentView/index.jsx

@@ -31,7 +31,7 @@ export const AssessmentView = () => {
               <Prompt prompt={prompt} />
               {!textIsEmpty && (
                 <>
-                  <h3 className="m-1">{formatMessage(messages.responseMessages[step])}</h3>
+                  <h3 className="m-1 py-2">{formatMessage(messages.responseMessages[step])}</h3>
                   <TextResponse response={response.textResponses[index]} />
                 </>
               )}

src/views/GradeView/FinalGrade.jsx

@@ -45,7 +45,9 @@ const FinalGrade = () => {
           </p>
         </InfoPopover>
       </h1>
-      {renderAssessment(effectiveAssessment, true)}
+      <div className="py-2">
+        {renderAssessment(effectiveAssessment, true)}
+      </div>
       <div className="my-2" />
       {extraGrades.length > 0 && (
         <h3>

src/views/GradeView/index.scss

@@ -1,7 +1,7 @@
 @import "@edx/paragon/scss/core/core";
 
 .grade-view-body {
-  max-width: $max-width-xl;
+  max-width: $max-width-lg;
   flex-wrap: nowrap !important;
   gap: 1em;
 }