diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx index 5156f211..c1beb1bf 100644 --- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx +++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx @@ -3,7 +3,12 @@ import PropTypes from 'prop-types'; import { Button } from '@edx/paragon'; import { ChevronLeft, ChevronRight } from '@edx/paragon/icons'; import classNames from 'classnames'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { + injectIntl, + intlShape, + isRtl, + getLocale, +} from '@edx/frontend-platform/i18n'; import { useSelector } from 'react-redux'; import { getCourseExitNavigation } from '../../course-exit'; @@ -67,16 +72,20 @@ function SequenceNavigation({ const buttonOnClick = isLastUnit ? goToCourseExitPage : nextSequenceHandler; const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton); const disabled = isLastUnit && !exitActive; + const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight; + return ( - ); }; + const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft; + return sequenceStatus === LOADED && (