chore: update progress bar styling

src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.jsx

@@ -30,12 +30,17 @@ const AssessmentCriteria = ({ criteria, overallFeedback, stepLabel }) => {
           />
         );
       })}
-      <hr />
-      <Feedback
-        criterionName={formatMessage(messages.overallFeedback)}
-        commentHeader={stepLabel}
-        commentBody={overallFeedback}
-      />
+
+      {overallFeedback && (
+        <>
+          <hr />
+          <Feedback
+            criterionName={formatMessage(messages.overallFeedback)}
+            commentHeader={stepLabel}
+            commentBody={overallFeedback}
+          />
+        </>
+      )}
     </>
   );
 };
@@ -44,11 +49,13 @@ AssessmentCriteria.defaultProps = {
   overallFeedback: null,
 };
 AssessmentCriteria.propTypes = {
-  criteria: PropTypes.arrayOf(PropTypes.shape({
-    selectedOption: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    // selectedPoints: PropTypes.number,
-    feedback: PropTypes.string,
-  })).isRequired,
+  criteria: PropTypes.arrayOf(
+    PropTypes.shape({
+      selectedOption: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      // selectedPoints: PropTypes.number,
+      feedback: PropTypes.string,
+    }),
+  ).isRequired,
   overallFeedback: PropTypes.string,
   stepLabel: PropTypes.string,
 };

src/components/Assessment/ReadonlyAssessment/Feedback.jsx

@@ -35,7 +35,7 @@ const Feedback = ({
           )}
         </div>
         {selectedOption && (
-          <p>{selectedOption}: {selectedPoints} points</p>
+          <p>{selectedOption}: {selectedPoints} {formatMessage(messages.points)}</p>
         )}
       </div>
       {commentBody && (

src/components/Assessment/ReadonlyAssessment/messages.js

@@ -66,6 +66,11 @@ const messages = defineMessages({
     defaultMessage: '{step} Comment',
     description: 'Header for comment component if step is provided',
   },
+  points: {
+    id: 'ora-collapsible-comment.points',
+    defaultMessage: 'Points',
+    description: 'Header for points component',
+  },
 });
 
 export default messages;

src/components/ConfirmDialog/index.jsx

@@ -2,9 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { ActionRow, AlertModal } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import ActionButton from 'components/ActionButton';
 
+import messages from './messages';
+
 const ConfirmDialog = ({
   title,
   description,
@@ -17,8 +20,8 @@ const ConfirmDialog = ({
     isOpen={isOpen}
     footerNode={(
       <ActionRow>
-        <ActionButton variant="tertiary" onClick={close}>
-          Go back
+        <ActionButton variant="light" onClick={close}>
+          <FormattedMessage {...messages.goBack} />
         </ActionButton>
         <ActionButton {...action} />
       </ActionRow>

src/components/ConfirmDialog/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  goBack: {
+    defaultMessage: 'Go back',
+    description: 'Label for the cancel button',
+    id: 'frontend-app-ora.ConfirmDialog.goBack',
+  },
+});
+
+export default messages;

src/components/FileUpload/index.jsx

@@ -33,6 +33,7 @@ const FileUpload = ({
   onFileUploaded,
   onDeletedFile,
   defaultCollapsePreview,
+  hideHeader,
 }) => {
   const { formatMessage } = useIntl();
   const {
@@ -76,7 +77,7 @@ const FileUpload = ({
 
   return (
     <div>
-      <h3>{formatMessage(messages.fileUploadTitle)}</h3>
+      {!hideHeader && <h3>{formatMessage(messages.fileUploadTitle)}</h3>}
       {uploadedFiles.length > 0 && isReadOnly && (
         <FilePreview defaultCollapsePreview={defaultCollapsePreview} />
       )}
@@ -119,6 +120,7 @@ FileUpload.defaultProps = {
   onFileUploaded: nullMethod,
   onDeletedFile: nullMethod,
   defaultCollapsePreview: false,
+  hideHeader: false,
 };
 FileUpload.propTypes = {
   isReadOnly: PropTypes.bool,
@@ -132,6 +134,7 @@ FileUpload.propTypes = {
   onFileUploaded: PropTypes.func,
   onDeletedFile: PropTypes.func,
   defaultCollapsePreview: PropTypes.bool,
+  hideHeader: PropTypes.bool,
 };
 
 export default FileUpload;

src/components/InfoPopover/index.jsx

@@ -20,7 +20,7 @@ import messages from './messages';
 export const InfoPopover = ({ onClick, children }) => {
   const { formatMessage } = useIntl();
   return (
-    <span className="d-inline-block" title={formatMessage(messages.rubricDetails)}>
+    <span className="d-inline-block small align-middle" title={formatMessage(messages.rubricDetails)}>
       <OverlayTrigger
         trigger="focus"
         placement="bottom"

src/components/Instructions/index.jsx

@@ -17,9 +17,8 @@ const Instructions = () => {
     return null;
   }
   return (
-    <div className="pb-4">
-      <h2 className="py-3">{formatMessage(messages.instructions)}</h2>
-      {message}
+    <div className="py-4">
+      <p className="mb-0"><strong>{formatMessage(messages.instructions)}: </strong>{message}</p>
     </div>
   );
 };

src/components/ProgressBar/index.jsx

@@ -72,7 +72,7 @@ export const ProgressBar = ({ className }) => {
   }
 
   return (
-    <Navbar className={classNames('px-0', className)} expand="md">
+    <Navbar className={classNames('px-0', className)} expand={stepOrders.length > 4 ? 'lg' : 'md'}>
       <Navbar.Toggle className="w-100 border-0">
         <div className="d-flex justify-content-between m-0 h3">
           <span className="d-flex">

src/components/ProgressBar/index.scss

@@ -1,13 +1,15 @@
 @import '@edx/paragon/scss/core/core';
 
 .ora-progress-nav-group {
-  width: 100%;
+  max-width: $max-width-lg;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin: auto;
   .ora-progress-divider {
     position: absolute;
-    width: 95%;
+    max-width: $max-width-lg;
+    width: 100%;
   }
   .ora-progress-nav {
     background-color: white;
@@ -35,20 +37,31 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
-  .ora-progress-nav-group {
-    flex-direction: column;
-    align-items: start;
-    border-top: 1px solid black;
-    padding: 0 map-get($spacers, 3);
+@mixin navbar-collapse-definition {
+  width: 100%;
+  flex-direction: column;
+  align-items: start;
+  border-top: 1px solid black;
+  padding: 0 map-get($spacers, 3);
 
-    .ora-progress-divider {
-      display: none;
-    }
+  .ora-progress-divider {
+    display: none;
+  }
 
-    .ora-progress-nav {
-      width: 100%;
-      margin: 0 0.25rem;
-    }
+  .ora-progress-nav {
+    width: 100%;
+    margin: 0 0.25rem;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-expand-lg .ora-progress-nav-group {
+    @extend navbar-collapse-definition !optional;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .navbar-expand-md .ora-progress-nav-group {
+    @extend navbar-collapse-definition !optional;
   }
 }

src/components/Prompt/index.jsx

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

src/components/StatusAlert/index.scss

@@ -1,3 +1,10 @@
-.ora-status-alert span svg {
-  display: inline-block;
+.ora-status-alert {
+  span svg {
+    display: inline-block;
+  }
+
+  .btn {
+    white-space: nowrap;
+    width: auto !important;
+  }
 }

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 completed this practice grading example. Continue to the next example, or if you have completed all examples, continue to the next step.',
+    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.',
     description: 'Practice Assessment submitted status alert',
   },
   [stepStates.trainingValidation]: {
@@ -196,7 +196,7 @@ const doneAlerts = defineMessages({
 const doneHeadings = defineMessages({
   status: {
     id: 'frontend-app-ora.StatusAlert.Heading.status',
-    defaultMessage: 'Assignment Complete and Graded',
+    defaultMessage: 'You have successfully submitted your self assessment',
     description: 'Done status alert heading',
   },
 });

src/components/TextResponse/index.scss

@@ -6,4 +6,5 @@
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
+  margin-bottom: 0;
 }

src/views/GradeView/Content.jsx

@@ -39,12 +39,12 @@ const Content = () => {
           prompts.map((prompt, index) => (
             <div key={uuid()}>
               <Prompt prompt={prompt} defaultOpen={false} />
-              <h3>{formatMessage(messages.yourResponse)}</h3>
+              <h3 className="pt-2">{formatMessage(messages.yourResponse)}</h3>
               {response.textResponses[index] && <TextResponse response={response.textResponses[index]} />}
             </div>
           ))
         }
-        <FileUpload isReadOnly uploadedFiles={response.uploadedFiles} defaultCollapsePreview />
+        <FileUpload isReadOnly uploadedFiles={response.uploadedFiles} defaultCollapsePreview hideHeader />
       </div>
     </div>
   );

src/views/GradeView/FinalGrade.jsx

@@ -35,7 +35,7 @@ const FinalGrade = () => {
 
   return (
     <div>
-      <h3>
+      <h1>
         {formatMessage(messages.yourFinalGrade, finalStepScore)}
         <InfoPopover>
           <p>
@@ -44,7 +44,7 @@ const FinalGrade = () => {
               : formatMessage(messages.finalGradeInfo, { step: effectiveAssessmentType })}
           </p>
         </InfoPopover>
-      </h3>
+      </h1>
       {renderAssessment(effectiveAssessment, true)}
       <div className="my-2" />
       {extraGrades.length > 0 && (

src/views/SubmissionView/TextResponseEditor/RichTextEditor.test.jsx

@@ -33,7 +33,7 @@ describe('<RichTextEditor />', () => {
     const wrapper = shallow(<RichTextEditor {...props} optional={false} />);
     expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.instance.findByType('label')[0].el.children).toContain('Required');
+    expect(wrapper.instance.findByType('label')[0].el.children).toContain('required');
   });
 
   it('render disabled', () => {

src/views/SubmissionView/TextResponseEditor/TextEditor.jsx

@@ -20,7 +20,7 @@ const TextEditor = ({
       className="textarea-response"
       label={(
         <h3>
-          {formatMessage(messages.yourResponse)} {formatMessage(optional ? messages.optional : messages.required)}
+          {formatMessage(messages.yourResponse)} ({formatMessage(optional ? messages.optional : messages.required)})
         </h3>
       )}
       value={value}

src/views/SubmissionView/TextResponseEditor/__snapshots__/RichTextEditor.test.jsx.snap

@@ -80,7 +80,7 @@ exports[`<RichTextEditor /> render required 1`] = `
   >
     Your response
      (
-    Required
+    required
     )
   </label>
   <Editor

src/views/SubmissionView/TextResponseEditor/__snapshots__/TextEditor.test.jsx.snap

@@ -7,8 +7,9 @@ exports[`<TextEditor /> render optional 1`] = `
   label={
     <h3>
       Your response
-
+       (
       Optional
+      )
     </h3>
   }
   name="text-response"
@@ -25,8 +26,9 @@ exports[`<TextEditor /> render required 1`] = `
   label={
     <h3>
       Your response
-
-      Required
+       (
+      required
+      )
     </h3>
   }
   name="text-response"

src/views/SubmissionView/TextResponseEditor/messages.js

@@ -12,7 +12,7 @@ const messages = defineMessages({
     id: 'frontend-app-ora.TextResponse.yourResponse',
   },
   required: {
-    defaultMessage: 'Required',
+    defaultMessage: 'required',
     description: 'Label for the required indicator',
     id: 'frontend-app-ora.TextResponse.required',
   },