fix: Ui modifications

src/Notifications/Notifications.jsx

@@ -13,17 +13,20 @@ import NotificationTabs from './NotificationTabs';
 import { getNotificationTabsCount } from './data/selectors';
 import { resetNotificationState } from './data/thunks';
 import { messages } from './messages';
-import { useIsOnDesktop, useIsOnXLDesktop } from './data/hook';
+import { useIsOnMediumScreen, useIsOnLargeScreen } from './data/hook';
 
 const Notifications = () => {
-  const [showNotificationTray, setShowNotificationTray] = useState(false);
   const intl = useIntl();
+  const dispatch = useDispatch();
   const popoverRef = useRef(null);
   const buttonRef = useRef(null);
-  const dispatch = useDispatch();
+  const [showNotificationTray, setShowNotificationTray] = useState(false);
   const notificationCounts = useSelector(getNotificationTabsCount());
-  const isOnDesktop = useIsOnDesktop();
-  const isOnXLDesktop = useIsOnXLDesktop();
+  const isOnMediumScreen = useIsOnMediumScreen();
+  const isOnLargeScreen = useIsOnLargeScreen();
+
+  console.log('isOnMediumScreen', isOnMediumScreen);
+  console.log('isOnLargeScreen', isOnLargeScreen);
 
   const handleNotificationTray = useCallback((value) => {
     setShowNotificationTray(value);
@@ -49,22 +52,21 @@ const Notifications = () => {
       trigger="click"
       key="bottom"
       placement="bottom"
+      id="notificationTray"
       show={showNotificationTray}
       overlay={(
         <Popover
-          id="popover-positioned-bottom"
-          className={classNames('notification-tray-container pt-4.5 pb-4.5 overflow-auto rounded-0 border-0', {
-            'w-100': !isOnDesktop,
-            'notificationbar-desktop-width': isOnDesktop && !isOnXLDesktop,
-            'w-25 notificationbar-XL-width': isOnXLDesktop,
+          id="notificationTray"
+          data-testid="notificationTray"
+          className={classNames('notification-tray-container overflow-auto rounded-0 border-0', {
+            'w-100': !isOnMediumScreen && !isOnLargeScreen,
+            'medium-screen': isOnMediumScreen,
+            'large-screen': isOnLargeScreen,
           })}
-          data-testid="notificationbar"
         >
           <div ref={popoverRef}>
-            <Popover.Title as="h3" className="d-flex flex-row justify-content-between py-0 mb-4 border-0 px-4">
-              <h2 className="text-primary-500 font-size-18 line-height-24">
-                {intl.formatMessage(messages.notificationTitle)}
-              </h2>
+            <Popover.Title as="h2" className="d-flex justify-content-between p-0 m-4 border-0 text-primary-500 font-size-18 line-height-24">
+              {intl.formatMessage(messages.notificationTitle)}
               <Icon src={Settings} className="icon-size-20" />
             </Popover.Title>
             <Popover.Content className="notification-content p-0">

src/Notifications/data/hook.js

@@ -1,10 +1,11 @@
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
-export function useIsOnDesktop() {
+export function useIsOnMediumScreen() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.medium.minWidth;
+  return breakpoints.large.maxWidth > windowSize.width && windowSize.width >= breakpoints.medium.minWidth;
 }
-export function useIsOnXLDesktop() {
+
+export function useIsOnLargeScreen() {
   const windowSize = useWindowSize();
   return windowSize.width >= breakpoints.extraLarge.minWidth;
 }

src/index.scss

@@ -123,7 +123,7 @@ $white: #fff;
 }
 
 .font-size-18{
-  font-size: 18px;
+  font-size: 18px !important;
 }
 .font-size-12{
   font-size: 12px;
@@ -159,10 +159,20 @@ $white: #fff;
   margin-left: -21px;
   border: 2px solid #FFFFFF;
 }
+
 .notification-tray-container{
+  &.medium-screen {
+    min-width: 24.313rem;
+  }
+
+  &.large-screen {
+    min-width: 34.313rem;
+  }
+
   .dropdown-toggle::after {
     display: none;
   }
+
   .expandable{
     position: relative !important;
     margin-left: 4px;
@@ -170,6 +180,7 @@ $white: #fff;
     border-radius: 10rem;
     font-size: 9px;
   }
+
   .dropdown-toggle{
     font-size: 14px;
     padding-top: 0px !important;
@@ -179,10 +190,12 @@ $white: #fff;
       min-width: 6px !important;
     }
   }
+
   .dropdown-item{
     font-size: 14px;
     font-weight: 500;
   }
+
   .notification-content{
     .notification-item-content{
       p{
@@ -196,6 +209,7 @@ $white: #fff;
       -webkit-box-orient: vertical;
       text-overflow: ellipsis;
     }
+
     .unread{
       height: 10px;
       width: 10px;