fix: fixes UI according to figma

src/Notifications/NotificationRowItem.jsx

@@ -32,13 +32,13 @@ const NotificationRowItem = ({
       />
       <div className="d-flex w-100">
         <div className="d-flex align-items-center w-100">
-          <div className="py-2 w-100 px-0 cursor-pointer">
+          <div className="py-10px w-100 px-0 cursor-pointer">
             <span
-              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden"
+              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: content }}
             />
-            <div className="py-0 d-flex align-items-center">
+            <div className="py-0 d-flex">
               <span className="font-size-12 text-gray-500 line-height-20">
                 <span>{courseName}</span>
                 <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>

src/Notifications/NotificationSections.jsx

@@ -34,15 +34,15 @@ const NotificationSections = () => {
 
     return (
       <div className="pb-2">
-        <div className="d-flex justify-content-between align-items-center">
+        <div className="d-flex justify-content-between align-items-center py-10px mb-2">
-          <span className="text-gray-500">
+          <span className="text-gray-500 line-height-10">
             {section === 'today' && intl.formatMessage(messages.notificationTodayHeading)}
             {section === 'earlier' && intl.formatMessage(messages.notificationEarlierHeading)}
           </span>
           {notifications?.length > 0 && (section === 'earlier' ? today.length === 0 : true) && (
             <Button
               variant="link"
-              className="text-info-500 line-height-24 font-size-14 text-decoration-none"
+              className="text-info-500 font-size-14 line-height-10 text-decoration-none p-0 border-0"
               onClick={handleMarkAllAsRead}
             >
               {intl.formatMessage(messages.notificationMarkAsRead)}

src/Notifications/NotificationTabs.jsx

@@ -30,7 +30,7 @@ const NotificationTabs = () => {
       eventKey={appName}
       title={appName}
       notification={notificationUnseenCounts[appName]}
-      tabClassName="pt-0 pb-2.5 px-2.5 d-flex flex-row align-items-center line-height-24 text-capitalize"
+      tabClassName="pt-0 pb-2.5 px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
     >
       {appName === selectedAppName && (<NotificationSections />)}
     </Tab>
@@ -41,7 +41,7 @@ const NotificationTabs = () => {
       variant="tabs"
       defaultActiveKey={selectedAppName}
       onSelect={handleActiveTab}
-      className="px-2.5"
+      className="px-2.5 border-0 text-primary-500"
     >
       {tabArray}
     </Tabs>

src/index.scss

@@ -122,6 +122,13 @@ $white: #fff;
   }
 }
 
+.content{
+  b{
+    color: #00262B;
+    font-weight: 500;
+  }
+}
+
 .font-size-18{
   font-size: 18px !important;
 }
@@ -134,6 +141,11 @@ $white: #fff;
   font-size: 14px;
 }
 
+.py-10px{
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 .line-height-24{
   line-height: 24px;
 }
@@ -142,6 +154,10 @@ $white: #fff;
   line-height: 20px;
 }
 
+.line-height-10{
+  line-height: 10px !important;
+}
+
 .icon-size-20{
   width: 20px !important;
   height: 20px !important;