fix: Notification icon is now clickable and refactor some code (#496)

* fix: Notification icon is now clickable and refactor some code

* refactor: added missed blank space in index.scss

src/Notifications/NotificationEmptySection.jsx

@@ -1,7 +1,9 @@
 import React, { useContext } from 'react';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, IconButton } from '@edx/paragon';
 import { NotificationsNone } from '@edx/paragon/icons';
+
 import NotificationContext from './context';
 import messages from './messages';
 

src/Notifications/NotificationRowItem.jsx

@@ -1,13 +1,16 @@
 import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+
 import { useDispatch } from 'react-redux';
+import * as timeago from 'timeago.js';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
 import { Icon } from '@edx/paragon';
-import * as timeago from 'timeago.js';
-import { getIconByType } from './utils';
+
 import { markNotificationsAsRead } from './data/thunks';
 import messages from './messages';
 import timeLocale from '../common/time-locale';
+import { getIconByType } from './utils';
 
 const NotificationRowItem = ({
   id, type, contentUrl, content, courseName, createdAt, lastRead,

src/Notifications/NotificationSections.jsx

@@ -1,21 +1,25 @@
-import React, { useCallback, useMemo, useContext } from 'react';
-import { Button, Icon, Spinner } from '@edx/paragon';
-import { AutoAwesome, CheckCircleLightOutline } from '@edx/paragon/icons';
+import React, { useCallback, useContext, useMemo } from 'react';
+
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector } from 'react-redux';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import isEmpty from 'lodash/isEmpty';
-import classNames from 'classnames';
-import messages from './messages';
-import NotificationRowItem from './NotificationRowItem';
-import NotificationEmptySection from './NotificationEmptySection';
-import { markAllNotificationsAsRead, fetchNotificationList } from './data/thunks';
+import { Button, Icon, Spinner } from '@edx/paragon';
+import { AutoAwesome, CheckCircleLightOutline } from '@edx/paragon/icons';
+
 import {
-  selectExpiryDays, selectNotificationsByIds, selectPaginationData,
-  selectSelectedAppName, selectNotificationListStatus, selectNotificationTabs,
+  selectExpiryDays, selectNotificationListStatus, selectNotificationsByIds, selectNotificationTabs,
+  selectPaginationData,
+  selectSelectedAppName,
 } from './data/selectors';
-import { splitNotificationsByTime } from './utils';
 import { RequestStatus } from './data/slice';
+import { fetchNotificationList, markAllNotificationsAsRead } from './data/thunks';
 import NotificationContext from './context';
+import messages from './messages';
+import NotificationEmptySection from './NotificationEmptySection';
+import NotificationRowItem from './NotificationRowItem';
+import { splitNotificationsByTime } from './utils';
 
 const NotificationSections = () => {
   const intl = useIntl();

src/Notifications/NotificationTabs.jsx

@@ -1,12 +1,15 @@
 import React, { useCallback, useEffect } from 'react';
+
 import { useDispatch, useSelector } from 'react-redux';
+
 import { Tab, Tabs } from '@edx/paragon';
-import NotificationSections from './NotificationSections';
-import { fetchNotificationList, markNotificationsAsSeen } from './data/thunks';
+
 import {
   selectNotificationTabs, selectNotificationTabsCount, selectSelectedAppName, selectTrayOpened,
 } from './data/selectors';
-import { updateAppNameRequest, toggleTrayEvent } from './data/slice';
+import { toggleTrayEvent, updateAppNameRequest } from './data/slice';
+import { fetchNotificationList, markNotificationsAsSeen } from './data/thunks';
+import NotificationSections from './NotificationSections';
 import { useFeedbackWrapper } from './utils';
 
 const NotificationTabs = () => {

src/Notifications/index.jsx

@@ -1,23 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, {
-  useCallback, useEffect, useRef, useState, useMemo,
+  useCallback, useEffect, useMemo,
+  useRef, useState,
 } from 'react';
+
+import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
+
 import { getConfig } from '@edx/frontend-platform';
-import classNames from 'classnames';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Icon, IconButton, OverlayTrigger, Popover, Hyperlink, Button, Bubble,
+  Bubble,
+  Button, Hyperlink, Icon, IconButton, OverlayTrigger, Popover,
 } from '@edx/paragon';
 import { NotificationsNone, Settings } from '@edx/paragon/icons';
+
+import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
 import { selectNotificationTabsCount } from './data/selectors';
-import { resetNotificationState } from './data/thunks';
 import { toggleTrayEvent } from './data/slice';
-import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
-import NotificationTabs from './NotificationTabs';
-import messages from './messages';
+import { resetNotificationState } from './data/thunks';
 import NotificationTour from './tours/NotificationTour';
 import NotificationContext from './context';
+import messages from './messages';
+import NotificationTabs from './NotificationTabs';
 
 const Notifications = () => {
   const intl = useIntl();
@@ -285,10 +290,11 @@ const Notifications = () => {
           <Bubble
             variant="error"
             data-testid="notification-count"
-            className={classNames('notification-badge zindex-1', {
+            className={classNames('notification-badge zindex-1 cursor-pointer', {
               'notification-badge-unrounded': notificationCounts.count >= 10,
               'notification-badge-rounded': notificationCounts.count < 10,
             })}
+            onClick={toggleNotificationTray}
           >
             {notificationCounts.count >= 100 ? <div className="d-flex">99<p className="mb-0 plus-icon">+</p></div>
               : notificationCounts.count}

src/Notifications/notification.scss

@@ -0,0 +1,243 @@
+.content {
+  strong {
+    color: #00262B !important;
+    font-weight: 500 !important;
+  }
+}
+
+.font-size-18 {
+  font-size: 18px !important;
+}
+
+.font-size-12 {
+  font-size: 12px !important;
+}
+
+.font-size-14 {
+  font-size: 14px !important;
+}
+
+.font-size-22 {
+  font-size: 22px !important;
+}
+
+.py-10px {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.pb-10px {
+  padding-bottom: 10px;
+}
+
+.line-height-24 {
+  line-height: 24px;
+}
+
+.line-height-20 {
+  line-height: 20px;
+}
+
+.line-height-10 {
+  line-height: 10px !important;
+}
+
+.zIndex-2{
+  z-index: 2 !important;
+}
+
+#pgn__checkpoint{
+  z-index: 1 !important;
+}
+
+.icon-size-20 {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.icon-size-56 {
+  width: 56px !important;
+  height: 56px !important;
+}
+
+.plus-icon {
+  margin-top: -0.5px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.notification-button {
+  width: 36px !important;
+  height: 36px !important;
+
+  &:focus, &:active {
+    box-shadow: inset 0 0 0 2px #00262B !important;
+  }
+
+  &:focus, &:active, &:hover {
+    background-color: #F2F0EF !important;
+  }
+
+  span:first-child {
+    margin: 0px !important;
+  }
+}
+
+.notification-lg-bell-icon {
+  width: 56px !important;
+  height: 56px !important;
+
+  span:first-child {
+    width: 32px !important;
+    height: 32px !important;
+  }
+}
+
+.notification-button.btn-icon-light-active {
+    background-color: #F2F0EF !important;
+}
+
+.notification-icon {
+  height: 23.33px !important;
+  width: 23.33px !important;
+  z-index: 1;
+}
+
+.notification-badge {
+  position: absolute;
+  border: 2px solid #FFFFFF;
+  font-size: 11px !important;
+  font-weight: 500 !important;
+  font-variant-numeric: lining-nums tabular-nums;
+  background: var(--text-on-light-brand-500, #D23228) !important;
+  line-height: 20px !important;
+  padding: 4px !important;
+  padding-left: 3px !important;
+  margin-left: -21px;
+}
+
+.notification-end-title {
+  font-weight: 500 !important;
+  color: #00262B !important;
+  margin-top: 20px !important;
+}
+
+.line-height-normal {
+  line-height: normal;
+}
+
+.notification-badge-unrounded {
+  margin-top: 4px !important;
+  min-width: 23px !important;
+  height: 16px;
+  min-height: 16px !important;
+  border-radius: 54px !important;
+}
+
+.notification-badge-rounded {
+  border-radius: 50%;
+  margin-top: 1px;
+  height: 20px;
+  min-height: 20px !important;
+  width: 20px !important;
+  min-width: 20px !important;
+}
+
+.popover {
+  filter: none;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+  margin-left: 5px !important;
+  margin-top: 7px !important;
+
+  .popover-header{
+    top: 0px;
+  }
+
+  .tabs{
+    top: 72px;
+  }
+
+  &.medium-screen {
+    min-width: 34.313rem;
+  }
+
+  &.large-screen {
+    min-width: 34.313rem;
+  }
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .expandable {
+    position: relative !important;
+    margin-left: 4px;
+    padding: 2px 5px;
+    border-radius: 10rem;
+    font-size: 9px;
+  }
+
+  .dropdown-toggle {
+    font-size: 14px;
+    padding-top: 0px !important;
+    padding-bottom: 12px !important;
+
+    div {
+      min-height: 6px !important;
+      min-width: 6px !important;
+    }
+  }
+
+  .dropdown-item {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .notification-content {
+    .notification-item-content {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+
+      p {
+        margin-bottom: 0px;
+      }
+
+      b {
+        color: #00262B;
+      }
+    }
+
+    .unread {
+      height: 10px;
+      width: 10px;
+    }
+  }
+
+  .notification-feedback-widget {
+    right: -37px !important;
+    position: fixed !important;
+    transform: rotate(270deg) !important;
+    top: 50% !important;
+  }
+}
+
+
+.popover-margin-top {
+  margin-top: -68px !important;
+}
+
+.height-inherit {
+  height: inherit;
+}
+
+.height-100vh {
+  height: 100vh
+}
+
+.height-91vh {
+  height: 91vh
+}