diff --git a/.env b/.env index 3be594be..0007e598 100644 --- a/.env +++ b/.env @@ -17,4 +17,5 @@ SEGMENT_KEY=null SITE_NAME=null TWITTER_URL=null STUDIO_BASE_URL= +SUPPORT_URL=null USER_INFO_COOKIE_NAME=null diff --git a/.env.development b/.env.development index 1ad937b0..ff8c88dd 100644 --- a/.env.development +++ b/.env.development @@ -17,4 +17,5 @@ SEGMENT_KEY=null SITE_NAME='edX' TWITTER_URL='https://twitter.com/edXOnline' STUDIO_BASE_URL='http://localhost:18010' +SUPPORT_URL='https://support.edx.org' USER_INFO_COOKIE_NAME='edx-user-info' diff --git a/.env.test b/.env.test index 0a2b8012..b7421169 100644 --- a/.env.test +++ b/.env.test @@ -16,4 +16,5 @@ SEGMENT_KEY=null SITE_NAME='edX' TWITTER_URL='https://twitter.com/edXOnline' STUDIO_BASE_URL='http://localhost:18010' +SUPPORT_URL='https://support.edx.org' USER_INFO_COOKIE_NAME='edx-user-info' diff --git a/package-lock.json b/package-lock.json index 376bee67..d664f81b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1443,9 +1443,9 @@ } }, "@edx/paragon": { - "version": "10.1.1", - "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-10.1.1.tgz", - "integrity": "sha512-2M8b3H2EhsHHheNblLCKkJtOJwFM6zFMLrIJYWUdhJCLNInHzNcGevrNxsiAXX8sKzpvHPkKpknrm57NJDpcIQ==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-12.0.0.tgz", + "integrity": "sha512-H+lwlDzYOEltDV3zdzmgbAM4D/mFEEEeNw/fwBwt8Nk2Cbf5yqcjPINMoEh7TkclTYqqxsoIsvI/si9cVQ/rnw==", "requires": { "@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-solid-svg-icons": "^5.14.0", @@ -3006,9 +3006,9 @@ "dev": true }, "@types/invariant": { - "version": "2.2.33", - "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.33.tgz", - "integrity": "sha512-/jUNmS8d4bCKdqslfxW6dg/9Gksfzxz67IYfqApHn+HvHlMVXwYv2zpTDnS/yaK9BB0i0GlBTaYci0EFE62Hmw==" + "version": "2.2.34", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz", + "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==" }, "@types/istanbul-lib-coverage": { "version": "2.0.3", @@ -3207,9 +3207,9 @@ "dev": true }, "@types/react": { - "version": "16.9.48", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.48.tgz", - "integrity": "sha512-4ykBVswgYitPGMXFRxJCHkxJDU2rjfU3/zw67f8+dB7sNdVJXsrwqoYxz/stkAucymnEEbRPFmX7Ce5Mc/kJCw==", + "version": "16.9.49", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.49.tgz", + "integrity": "sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==", "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -7034,9 +7034,9 @@ } }, "dom-serializer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.0.1.tgz", - "integrity": "sha512-1Aj1Qy3YLbdslkI75QEOfdp9TkQ3o8LRISAzxOibjBs/xWwr1WxZFOQphFkZuepHFGo+kB8e5FVJSS0faAJ4Rw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz", + "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==", "requires": { "domelementtype": "^2.0.1", "domhandler": "^3.0.0", @@ -7050,9 +7050,9 @@ "dev": true }, "domelementtype": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz", - "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==" + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz", + "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==" }, "domexception": { "version": "2.0.1", @@ -7080,9 +7080,9 @@ } }, "domutils": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.2.0.tgz", - "integrity": "sha512-0haAxVr1PR0SqYwCH7mxMpHZUwjih9oPPedqpR/KufsnxPyZ9dyVw1R5093qnJF3WXSbjBkdzRWLw/knJV/fAg==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.3.0.tgz", + "integrity": "sha512-xWC75PM3QF6MjE5e58OzwTX0B/rPQnlqH0YyXB/c056RtVJA+eu60da2I/bdnEHzEYC00g8QaZUlAbqOZVbOsw==", "requires": { "dom-serializer": "^1.0.1", "domelementtype": "^2.0.1", diff --git a/package.json b/package.json index 39948c1f..dcff3f17 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@edx/frontend-component-header": "2.0.5", "@edx/frontend-enterprise": "4.2.2", "@edx/frontend-platform": "1.5.2", - "@edx/paragon": "10.1.1", + "@edx/paragon": "12.0.0", "@fortawesome/fontawesome-svg-core": "1.2.30", "@fortawesome/free-brands-svg-icons": "5.13.1", "@fortawesome/free-regular-svg-icons": "5.13.1", diff --git a/src/course-header/Header.jsx b/src/course-header/Header.jsx index b2d8c49e..b91375e6 100644 --- a/src/course-header/Header.jsx +++ b/src/course-header/Header.jsx @@ -78,13 +78,13 @@ function Header({ return (
-
+
{headerLogo}
{courseOrg} {courseNumber} {courseTitle}
- + {intl.formatMessage(messages.help)} diff --git a/src/course-header/messages.js b/src/course-header/messages.js index 5a74ff56..07d5de93 100644 --- a/src/course-header/messages.js +++ b/src/course-header/messages.js @@ -11,6 +11,11 @@ const messages = defineMessages({ defaultMessage: 'Dashboard', description: 'The text for the user menu Dashboard navigation link.', }, + help: { + id: 'header.help.label', + defaultMessage: 'Help', + description: 'The text for the link to the Help Center', + }, profile: { id: 'header.menu.profile.label', defaultMessage: 'Profile', diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap index fac3b8b6..acee81c3 100644 --- a/src/course-home/data/__snapshots__/redux.test.js.snap +++ b/src/course-home/data/__snapshots__/redux.test.js.snap @@ -7,7 +7,7 @@ Object { "courseStatus": "loading", "toastBodyLink": null, "toastBodyText": null, - "toastHeader": null, + "toastHeader": "", }, "courseware": Object { "courseId": null, @@ -26,7 +26,7 @@ Object { "courseStatus": "loaded", "toastBodyLink": null, "toastBodyText": null, - "toastHeader": null, + "toastHeader": "", }, "courseware": Object { "courseId": null, @@ -112,7 +112,7 @@ Object { "courseStatus": "loaded", "toastBodyLink": null, "toastBodyText": null, - "toastHeader": null, + "toastHeader": "", }, "courseware": Object { "courseId": null, diff --git a/src/course-home/data/slice.js b/src/course-home/data/slice.js index 8b55f619..7e037d7c 100644 --- a/src/course-home/data/slice.js +++ b/src/course-home/data/slice.js @@ -12,7 +12,7 @@ const slice = createSlice({ courseId: null, toastBodyText: null, toastBodyLink: null, - toastHeader: null, + toastHeader: '', }, reducers: { fetchTabRequest: (state, { payload }) => { diff --git a/src/course-home/outline-tab/DateSummary.jsx b/src/course-home/outline-tab/DateSummary.jsx index a09516d4..acc36cd4 100644 --- a/src/course-home/outline-tab/DateSummary.jsx +++ b/src/course-home/outline-tab/DateSummary.jsx @@ -15,8 +15,8 @@ export default function DateSummary({ return (
- -
+ +
-
+
{linkedTitle && } diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index fee37212..188a55c1 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -2,13 +2,14 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { Button, Toast } from '@edx/paragon'; import { AlertList } from '../../generic/user-messages'; import CourseDates from './widgets/CourseDates'; import CourseGoalCard from './widgets/CourseGoalCard'; import CourseHandouts from './widgets/CourseHandouts'; import CourseTools from './widgets/CourseTools'; -import LearningToast from '../../toast/LearningToast'; +import genericMessages from '../../generic/messages'; import messages from './messages'; import Section from './Section'; import UpdateGoalSelector from './widgets/UpdateGoalSelector'; @@ -55,7 +56,8 @@ function OutlineTab({ intl }) { } = useModel('outline', courseId); const [courseGoalToDisplay, setCourseGoalToDisplay] = useState(selectedGoal); - const [goalToastHeader, setGoalToastHeader] = useState(null); + const [goalToastHeader, setGoalToastHeader] = useState(''); + const [expandAll, setExpandAll] = useState(false); // Above the tab alerts (appearing in the order listed here) const logistrationAlert = useLogistrationAlert(); @@ -81,17 +83,23 @@ function OutlineTab({ intl }) { ...logistrationAlert, }} /> - setGoalToastHeader(null)} + setGoalToastHeader('')} show={!!(goalToastHeader)} - /> -
-
{title}
+ > + {goalToastHeader} + +
@@ -117,10 +125,18 @@ function OutlineTab({ intl }) { ...offerAlert, }} /> +
+
+ +
+
{sectionIds.map((sectionId) => (
))} diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx index 62de2ab3..e5e339af 100644 --- a/src/course-home/outline-tab/Section.jsx +++ b/src/course-home/outline-tab/Section.jsx @@ -1,12 +1,21 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { Collapsible } from '@edx/paragon'; -import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { Collapsible, IconButton } from '@edx/paragon'; +import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'; +import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import SequenceLink from './SequenceLink'; import { useModel } from '../../generic/model-store'; +import genericMessages from '../../generic/messages'; +import messages from './messages'; -export default function Section({ courseId, section }) { +function Section({ + courseId, + expand, + intl, + section, +}) { const { complete, sequenceIds, @@ -18,15 +27,60 @@ export default function Section({ courseId, section }) { }, } = useModel('outline', courseId); + const [open, setOpen] = useState(expand); + + useEffect(() => { + setOpen(expand); + }, [expand]); + const sectionTitle = (
- {complete && } -
{title}
+ {complete ? ( +
); return ( - + { setOpen(!open); }} + iconWhenClosed={( + { setOpen(true); }} + /> + )} + iconWhenOpen={( + { setOpen(false); }} + /> + )} + > {sequenceIds.map((sequenceId, index) => ( {text}; - } - - if (due) { - text = ( - <> - {text}
- - - ), - description: description || '', - }} - /> - - - ); - } - - text =
{text}
; - - if (complete) { - text = <>{text}; - } - - // Do link last so we include everything above in the link - if (showLink) { - text =
{text}
; - } + const displayTitle = showLink ? {title} : title; return (
- {text} +
+
+ {complete ? ( +
+
{displayTitle}
+ + , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)} + +
+ {due && ( +
+ + + ), + description: description || '', + }} + /> + +
+ )}
); } SequenceLink.propTypes = { id: PropTypes.string.isRequired, + intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, first: PropTypes.bool.isRequired, sequence: PropTypes.shape().isRequired, }; + +export default injectIntl(SequenceLink); diff --git a/src/course-home/outline-tab/messages.js b/src/course-home/outline-tab/messages.js index 66b9fe44..fc10d2fe 100644 --- a/src/course-home/outline-tab/messages.js +++ b/src/course-home/outline-tab/messages.js @@ -5,6 +5,21 @@ const messages = defineMessages({ id: 'learning.outline.dates.all', defaultMessage: 'View all course dates', }, + collapseAll: { + id: 'learning.outline.collapseAll', + defaultMessage: 'Collapse All', + description: 'Label for button to close all of the collapsible sections', + }, + completedAssignment: { + id: 'learning.outline.completedAssignment', + defaultMessage: 'Completed', + description: 'Text used to describe the green checkmark icon in front of an assignment title', + }, + completedSection: { + id: 'learning.outline.completedSection', + defaultMessage: 'Completed section', + description: 'Text used to describe the green checkmark icon in front of a section title', + }, dates: { id: 'learning.outline.dates', defaultMessage: 'Upcoming Dates', @@ -14,6 +29,11 @@ const messages = defineMessages({ defaultMessage: 'Edit goal', description: 'Edit course goal button', }, + expandAll: { + id: 'learning.outline.expandAll', + defaultMessage: 'Expand All', + description: 'Label for button to open all of the collapsible sections', + }, goal: { id: 'learning.outline.goal', defaultMessage: 'Goal', @@ -32,6 +52,21 @@ const messages = defineMessages({ id: 'learning.outline.handouts', defaultMessage: 'Course Handouts', }, + incompleteAssignment: { + id: 'learning.outline.incompleteAssignment', + defaultMessage: 'Incomplete', + description: 'Text used to describe the gray checkmark icon in front of an assignment title', + }, + incompleteSection: { + id: 'learning.outline.incompleteSection', + defaultMessage: 'Incomplete section', + description: 'Text used to describe the gray checkmark icon in front of a section title', + }, + openSection: { + id: 'learning.outline.altText.openSection', + defaultMessage: 'Open', + description: 'A button to open the given section of the course outline', + }, resume: { id: 'learning.outline.resume', defaultMessage: 'Resume Course', diff --git a/src/course-home/outline-tab/widgets/CourseDates.jsx b/src/course-home/outline-tab/widgets/CourseDates.jsx index 2d2c1d77..d8dbb258 100644 --- a/src/course-home/outline-tab/widgets/CourseDates.jsx +++ b/src/course-home/outline-tab/widgets/CourseDates.jsx @@ -9,20 +9,24 @@ import { useModel } from '../../../generic/model-store'; function CourseDates({ courseId, intl }) { const { - datesWidget, + datesWidget: { + courseDateBlocks, + datesTabLink, + userTimezone, + }, } = useModel('outline', courseId); return (

{intl.formatMessage(messages.dates)}

- {datesWidget.courseDateBlocks.map((courseDateBlock) => ( + {courseDateBlocks.map((courseDateBlock) => ( ))} - + {intl.formatMessage(messages.allDates)}
diff --git a/src/course-home/outline-tab/widgets/CourseTools.jsx b/src/course-home/outline-tab/widgets/CourseTools.jsx index b6539980..5a9fc8c0 100644 --- a/src/course-home/outline-tab/widgets/CourseTools.jsx +++ b/src/course-home/outline-tab/widgets/CourseTools.jsx @@ -52,7 +52,7 @@ function CourseTools({ courseId, intl }) { {courseTools.map((courseTool) => ( diff --git a/src/course-home/outline-tab/widgets/UpdateGoalSelector.jsx b/src/course-home/outline-tab/widgets/UpdateGoalSelector.jsx index 4a234cfe..8d27dba5 100644 --- a/src/course-home/outline-tab/widgets/UpdateGoalSelector.jsx +++ b/src/course-home/outline-tab/widgets/UpdateGoalSelector.jsx @@ -1,10 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Button, Card, Input } from '@edx/paragon'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'; +import { Dropdown } from '@edx/paragon'; import messages from '../messages'; import { saveCourseGoal } from '../../data'; @@ -17,18 +15,14 @@ function UpdateGoalSelector({ setGoalToDisplay, setGoalToastHeader, }) { - const [editingGoal, setEditingGoal] = useState(false); - function selectGoalHandler(event) { - const key = event.currentTarget.value; - const { options } = event.currentTarget; - const { text } = options[options.selectedIndex]; + const key = event.currentTarget.id; + const text = event.currentTarget.innerText; const newGoal = { key, text, }; - setEditingGoal(false); setGoalToDisplay(newGoal); saveCourseGoal(courseId, key).then((response) => { const { data } = response; @@ -45,44 +39,28 @@ function UpdateGoalSelector({
-
- - -
-
- {!editingGoal && ( -

{selectedGoal.text}

- )} - {editingGoal && ( - { setEditingGoal(false); }} - onChange={(event) => { selectGoalHandler(event); }} - options={goalOptions.map(([goalKey, goalText]) => ( - { value: goalKey, label: goalText } - ))} - autoFocus - /> - )} -
- -
- - + {goalText} + + ))} + +
diff --git a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx index c12c0d86..9b62b5a6 100644 --- a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx +++ b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { Button, TransitionReplace } from '@edx/paragon'; import { useDispatch } from 'react-redux'; import LmsHtmlFragment from '../LmsHtmlFragment'; @@ -34,27 +35,36 @@ function WelcomeMessage({ courseId, intl }) { setDisplay(false); dispatch(dismissWelcomeMessage(courseId)); }} - > -
- -
- { - shortWelcomeMessageHtml && ( -
- +
- ) - } +
+ )} + > + + {showShortMessage ? ( + + ) : ( + + )} + ) ); diff --git a/src/generic/messages.js b/src/generic/messages.js new file mode 100644 index 00000000..6d961612 --- /dev/null +++ b/src/generic/messages.js @@ -0,0 +1,11 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + close: { + id: 'general.altText.close', + defaultMessage: 'Close', + description: 'Text used as an aria-label to describe closing or dismissing a component', + }, +}); + +export default messages; diff --git a/src/generic/user-messages/Alert.jsx b/src/generic/user-messages/Alert.jsx index fa5fe336..832fc12f 100644 --- a/src/generic/user-messages/Alert.jsx +++ b/src/generic/user-messages/Alert.jsx @@ -5,10 +5,12 @@ import { faExclamationTriangle, faInfoCircle, faCheckCircle, faMinusCircle, faTimes, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button } from '@edx/paragon'; +import { IconButton } from '@edx/paragon'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { ALERT_TYPES } from './UserMessagesProvider'; import './Alert.scss'; +import messages from '../messages'; function getAlertClass(type) { if (type === ALERT_TYPES.ERROR) { @@ -40,21 +42,33 @@ function getAlertIcon(type) { } function Alert({ - type, dismissible, children, onDismiss, + type, dismissible, children, footer, intl, onDismiss, }) { return ( -
-
+
+
{type !== ALERT_TYPES.WELCOME && ( -
+
)} -
- {children} +
+
+ {children} +
+ {dismissible && ( +
+ +
+ )}
- {dismissible && } + {footer}
); } @@ -69,13 +83,16 @@ Alert.propTypes = { ]).isRequired, dismissible: PropTypes.bool, children: PropTypes.node, + footer: PropTypes.node, + intl: intlShape.isRequired, onDismiss: PropTypes.func, }; Alert.defaultProps = { dismissible: false, children: undefined, + footer: null, onDismiss: null, }; -export default Alert; +export default injectIntl(Alert); diff --git a/src/generic/user-messages/Alert.scss b/src/generic/user-messages/Alert.scss index 8808693e..93d77aa0 100644 --- a/src/generic/user-messages/Alert.scss +++ b/src/generic/user-messages/Alert.scss @@ -1,4 +1,3 @@ .alert-welcome { border: #b9babe solid 1px !important; - border-left: #000000 solid 3px !important; } diff --git a/src/index.jsx b/src/index.jsx index 308da6a2..81d23ad1 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -75,6 +75,7 @@ initialize({ mergeConfig({ INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null, STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null, + SUPPORT_URL: process.env.SUPPORT_URL || null, TWITTER_URL: process.env.TWITTER_URL || null, ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME || null, }, 'LearnerAppConfig'); diff --git a/src/index.scss b/src/index.scss index e29c11a8..fa9b1516 100755 --- a/src/index.scss +++ b/src/index.scss @@ -61,6 +61,7 @@ $primary: #1176B2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + padding-bottom: .1rem; } } .user-dropdown { diff --git a/src/instructor-toolbar/InstructorToolbar.jsx b/src/instructor-toolbar/InstructorToolbar.jsx index 42335157..af117636 100644 --- a/src/instructor-toolbar/InstructorToolbar.jsx +++ b/src/instructor-toolbar/InstructorToolbar.jsx @@ -53,7 +53,7 @@ export default function InstructorToolbar(props) { const [masqueradeErrorMessage, showMasqueradeError] = useState(null); return (
-
+
diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx index 5b65b232..3166c708 100644 --- a/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx +++ b/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx @@ -47,6 +47,7 @@ class MasqueradeUserNameInput extends Component { } = this.props; return ( this.onKeyPress(event)} type="text" diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx index 0de94cbc..1255a573 100644 --- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx +++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx @@ -132,7 +132,7 @@ class MasqueradeWidget extends Component {
{shouldShowUserNameInput && (
- {`${specificLearnerInputText}:`} + {`${specificLearnerInputText}:`} - dispatch(setCallToActionToast({ header: null, link: null, link_text: null }))} + dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))} show={!!(toastHeader)} - /> + > + {toastHeader} + ); diff --git a/src/toast/LearningToast.jsx b/src/toast/LearningToast.jsx deleted file mode 100644 index 8335145f..00000000 --- a/src/toast/LearningToast.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Toast } from '@edx/paragon'; - -import './LearningToast.scss'; - -export default function LearningToast({ - bodyLink, - bodyText, - header, - onClose, - show, -}) { - return ( - - -

{header}

- - {bodyLink && bodyText && ( - - {bodyText} - - )} - - ); -} - -LearningToast.propTypes = { - bodyLink: PropTypes.string, - bodyText: PropTypes.string, - header: PropTypes.string, - onClose: PropTypes.func.isRequired, - show: PropTypes.bool.isRequired, -}; - -LearningToast.defaultProps = { - bodyLink: null, - bodyText: null, - header: null, -}; diff --git a/src/toast/LearningToast.scss b/src/toast/LearningToast.scss deleted file mode 100644 index f2bed044..00000000 --- a/src/toast/LearningToast.scss +++ /dev/null @@ -1,29 +0,0 @@ -.learning-toast { - bottom: 20px; - radius: 3px; - left: 20px; - max-width: 400px; - padding: 11px 20px; - - @media only screen and (max-width: 768px) { - bottom: 10px; - left: 10px; - right: 10px; - } -} - -.toast-header { - button { - align-self: flex-start; - color: #FFFFFF; - &:hover { - color: #FFFFFF; - } - } -} - -.toast-body { - a:hover { - color: #2D323E; - } -}