diff --git a/src/Notifications/NotificationRowItem.jsx b/src/Notifications/NotificationRowItem.jsx index b6ebc7b..c21793a 100644 --- a/src/Notifications/NotificationRowItem.jsx +++ b/src/Notifications/NotificationRowItem.jsx @@ -5,11 +5,11 @@ import { Icon } from '@edx/paragon'; import * as timeago from 'timeago.js'; import PropTypes from 'prop-types'; import { AppContext } from '@edx/frontend-platform/react'; -import { messages } from './messages'; import { - PostOutline, HelpOutline, QuestionAnswerOutline, CheckCircleFilled, Verified, Report, ThumbsUpOutline, EditOutline, -} from './icons'; -import timeLocale from '../time-locale'; + CheckCircle, HelpOutline, QuestionAnswerOutline, Verified, Report, EditOutline, ThumbUpOutline, PostOutline, +} from '@edx/paragon/icons'; +import { messages } from './messages'; +import timeLocale from '../common/time-locale'; const NotificationRowItem = ({ notification }) => { const intl = useIntl(); @@ -17,20 +17,21 @@ const NotificationRowItem = ({ notification }) => { const { authenticatedUser } = useContext(AppContext); const getIconByType = (type) => { - switch (type) { - case 'post': return PostOutline; - case 'help': return HelpOutline; - case 'respond': return QuestionAnswerOutline; - case 'comment': return QuestionAnswerOutline; - case 'question': return QuestionAnswerOutline; - case 'answer': return CheckCircleFilled; - case 'endorsed': return Verified; - case 'reported': return Report; - case 'postLiked': return ThumbsUpOutline; - case 'commentLiked': return ThumbsUpOutline; - case 'edited': return EditOutline; - default: return null; - } + const iconMap = { + post: { icon: PostOutline, class: 'text-primary-500' }, + help: { icon: HelpOutline, class: 'text-primary-500' }, + respond: { icon: QuestionAnswerOutline, class: 'text-primary-500' }, + comment: { icon: QuestionAnswerOutline, class: 'text-primary-500' }, + question: { icon: QuestionAnswerOutline, class: 'text-primary-500' }, + answer: { icon: CheckCircle, class: 'text-success' }, + endorsed: { icon: Verified, class: 'text-primary-500' }, + reported: { icon: Report, class: 'text-danger-500' }, + postLiked: { icon: ThumbUpOutline, class: 'text-primary-500' }, + commentLiked: { icon: ThumbUpOutline, class: 'text-primary-500' }, + edited: { icon: EditOutline, class: 'text-primary-500' }, + }; + + return iconMap[type] || null; }; const getContentMessageByType = useCallback(() => { @@ -52,17 +53,19 @@ const NotificationRowItem = ({ notification }) => { return contentMessage[notification.type] ? intl.formatMessage(contentMessage[notification.type]) : null; }, [authenticatedUser, notification, intl]); + const iconComponent = getIconByType(notification.type); return ( -
-
+
+
- + {notification?.respondingUser} {' '} {getContentMessageByType()} {notification?.targetUser && ( @@ -80,8 +83,7 @@ const NotificationRowItem = ({ notification }) => {
- {notification.status === 'unread' - &&
} + {notification.status === 'unread' &&
}
diff --git a/src/Notifications/NotificationSections.jsx b/src/Notifications/NotificationSections.jsx index e40a64b..d71329c 100644 --- a/src/Notifications/NotificationSections.jsx +++ b/src/Notifications/NotificationSections.jsx @@ -15,7 +15,7 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) => return ( notifications && (
-
+
{TODAY && TODAY.length > 0 && intl.formatMessage(messages.notificationTodayHeading)} @@ -29,7 +29,7 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) => {TODAY && TODAY.map( (notification) => , )} -
+
{EARLIER && EARLIER.length > 0 && intl.formatMessage(messages.notificationEarlierHeading)} diff --git a/src/Notifications/NotificationTabs.jsx b/src/Notifications/NotificationTabs.jsx index 6898d3a..0828fab 100644 --- a/src/Notifications/NotificationTabs.jsx +++ b/src/Notifications/NotificationTabs.jsx @@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'; import NotificationSections from './NotificationSections'; import { getNotificationTotalUnseenCounts } from './data/selectors'; import { fetchNotificationList } from './data/thunks'; -import { notificationTabsOptions } from '../constants'; +import { notificationTabsOptions } from './data/constants'; const NotificationTabs = () => { const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts()); @@ -32,7 +32,7 @@ const NotificationTabs = () => { eventKey={option.key} title={option.title} notification={notificationUnseenCounts[option.title]} - tabClassName="notification-tab" + tabClassName="notification-tab d-flex flex-row align-items-center" > @@ -42,8 +42,7 @@ const NotificationTabs = () => { activeTab && ( {tabArray} diff --git a/src/Notifications/Notifications.jsx b/src/Notifications/Notifications.jsx index 0a70add..60d0f96 100644 --- a/src/Notifications/Notifications.jsx +++ b/src/Notifications/Notifications.jsx @@ -58,18 +58,20 @@ const Notifications = () => { overlay={(

{intl.formatMessage(messages.notificationTitle)}

-
+
- +
@@ -78,16 +80,16 @@ const Notifications = () => { > <> {notificationCounts?.Total > 0 && ( - + {notificationCounts?.Total} )} -
+
{ handleNotificationTray(!showNotificationTray); }} src={NotificationsNone} iconAs={Icon} - className="d-inline-block align-bottom ml-1 bell-icon" + className="d-inline-block align-bottom ml-1 ml-n1 shadow-none bg-transparent text-primary-500" />
diff --git a/src/constants.js b/src/Notifications/data/constants.js similarity index 100% rename from src/constants.js rename to src/Notifications/data/constants.js diff --git a/src/Notifications/icons/CheckCircleFilled.jsx b/src/Notifications/icons/CheckCircleFilled.jsx deleted file mode 100644 index bd51c42..0000000 --- a/src/Notifications/icons/CheckCircleFilled.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const CheckCircleFilled = () => ( - - - - -); - -export default CheckCircleFilled; diff --git a/src/Notifications/icons/EditOutline.jsx b/src/Notifications/icons/EditOutline.jsx deleted file mode 100644 index 4b158a9..0000000 --- a/src/Notifications/icons/EditOutline.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const EditOutline = () => ( - - - - -); - -export default EditOutline; diff --git a/src/Notifications/icons/HelpOutline.jsx b/src/Notifications/icons/HelpOutline.jsx deleted file mode 100644 index 53cdd48..0000000 --- a/src/Notifications/icons/HelpOutline.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -const HelpOutline = () => ( - - - - - - - - - - - -); - -export default HelpOutline; diff --git a/src/Notifications/icons/PostOutline.jsx b/src/Notifications/icons/PostOutline.jsx deleted file mode 100644 index a7bb4d4..0000000 --- a/src/Notifications/icons/PostOutline.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -const PostOutline = () => ( - - - -); - -export default PostOutline; diff --git a/src/Notifications/icons/QuestionAnswerOutline.jsx b/src/Notifications/icons/QuestionAnswerOutline.jsx deleted file mode 100644 index 0137d49..0000000 --- a/src/Notifications/icons/QuestionAnswerOutline.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const QuestionAnswerOutline = () => ( - - - - -); - -export default QuestionAnswerOutline; diff --git a/src/Notifications/icons/Report.jsx b/src/Notifications/icons/Report.jsx deleted file mode 100644 index 87123c6..0000000 --- a/src/Notifications/icons/Report.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const Report = () => ( - - - - -); - -export default Report; diff --git a/src/Notifications/icons/ThumbsUpOutline.jsx b/src/Notifications/icons/ThumbsUpOutline.jsx deleted file mode 100644 index a38b685..0000000 --- a/src/Notifications/icons/ThumbsUpOutline.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -const ThumbsUpOutline = () => ( - - - - - -); - -export default ThumbsUpOutline; diff --git a/src/Notifications/icons/Verified.jsx b/src/Notifications/icons/Verified.jsx deleted file mode 100644 index 65cda1b..0000000 --- a/src/Notifications/icons/Verified.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const Verified = () => ( - - - - -); - -export default Verified; diff --git a/src/Notifications/icons/index.js b/src/Notifications/icons/index.js deleted file mode 100644 index 8cde1f2..0000000 --- a/src/Notifications/icons/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export { default as PostOutline } from './PostOutline'; -export { default as HelpOutline } from './HelpOutline'; -export { default as QuestionAnswerOutline } from './QuestionAnswerOutline'; -export { default as CheckCircleFilled } from './CheckCircleFilled'; -export { default as Verified } from './Verified'; -export { default as Report } from './Report'; -export { default as ThumbsUpOutline } from './ThumbsUpOutline'; -export { default as EditOutline } from './EditOutline'; diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap index 4c36abd..e19fabe 100644 --- a/src/__snapshots__/Header.test.jsx.snap +++ b/src/__snapshots__/Header.test.jsx.snap @@ -241,10 +241,10 @@ exports[`
renders correctly for authenticated desktop 1`] = ` className="d-flex mx-4 my-3 bell-container" >