PR

src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx

@@ -7,10 +7,12 @@ import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
 function CertificateAvailableAlert({ payload }) {
   const {
     certDate,
+    userTimezone,
     courseEndDate,
   } = payload;
 
-  const certificateAvailableDate = <FormattedDate value={certDate} day="numeric" month="long" year="numeric" />;
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+  const certificateAvailableDateFormatted = <FormattedDate value={certDate} day="numeric" month="long" year="numeric" />;
   const courseEndDateFormatted = <FormattedDate value={courseEndDate} day="numeric" month="long" year="numeric" />;
 
   return (
@@ -28,8 +30,9 @@ function CertificateAvailableAlert({ payload }) {
         scheduled to be available after {certificateAvailableDate}."
         values={{
           courseEndDateFormatted,
-          certificateAvailableDate,
+          certificateAvailableDate: certificateAvailableDateFormatted,
         }}
+        {...timezoneFormatArgs}
       />
     </Alert>
   );

src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js

@@ -25,7 +25,7 @@ function useCertificateAvailableAlert(courseId) {
   const isVisible = isEnrolled && certBlock && hasEnded; // only show if we're between end and cert dates
   const payload = {
     certDate: certBlock && certBlock.date,
-    courseEndDate: endBlock && endBlock.date,
+    courseEndDate: endDate,
     username,
     userTimezone,
   };

src/courseware/course/course-exit/CourseCelebration.jsx

@@ -134,15 +134,12 @@ function CourseCelebration({ intl }) {
             <FormattedMessage
               id="courseCelebration.certificateBody.notAvailable.endDate"
               defaultMessage="This course ended on {endDate} and final grades and certificates are scheduled to be
-              available after {certAvailableDate}"
+              available after {certAvailableDate}."
               values={{ endDate, certAvailableDate }}
             />
           </p>
           <p>
-            <FormattedMessage
-              id="courseCelebration.certificateBody.notAvailable.accessCertificate"
-              defaultMessage="If you have earned a passing grade, your certificate will be automatically issued."
-            />
+            {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)}
           </p>
         </>
       );

src/courseware/course/course-exit/messages.js

@@ -14,6 +14,11 @@ const messages = defineMessages({
   certificateHeaderNotAvailable: {
     id: 'courseCelebration.certificateHeader.notAvailable',
     defaultMessage: 'Your grade and certificate will be ready soon!',
+    description: 'Header displayed when course certificate is not yet available to be viewed',
+  },
+  certificateNotAvailableBodyAccessCert: {
+    id: 'courseCelebration.certificateBody.notAvailable.accessCertificate',
+    defaultMessage: 'If you have earned a passing grade, your certificate will be automatically issued.',
     description: 'Text displayed when course certificate is not yet available to be viewed',
   },
   certificateHeaderUnverified: {
@@ -180,6 +185,7 @@ const messages = defineMessages({
     id: 'courseExit.viewGradesButton',
     defaultMessage: 'View grades',
   },
+
 });
 
 export default messages;

src/generic/user-messages/Alert.jsx

@@ -41,6 +41,12 @@ function getAlertIcon(type) {
   return faInfoCircle;
 }
 
+function getAlertIconColor(type) {
+  if (type === ALERT_TYPES.SUCCESS) {
+    return 'text-success-500';
+  }
+}
+
 function Alert({
   type, dismissible, children, footer, intl, onDismiss,
 }) {
@@ -49,7 +55,7 @@ function Alert({
       <div className="row w-100 m-0">
         {type !== ALERT_TYPES.WELCOME && (
           <div className="col-auto p-0 mr-3">
-            <FontAwesomeIcon icon={getAlertIcon(type)} />
+            <FontAwesomeIcon icon={getAlertIcon(type)} className={getAlertIconColor(type)}/>
           </div>
         )}
         <div className="col mr-4 p-0 align-items-start">