fix: fixes UI according to figma

This commit is contained in:
ayeshoali
2023-06-06 12:48:10 +05:00
parent cabf4e3f27
commit b1feed2443
4 changed files with 24 additions and 8 deletions

View File

@@ -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>

View File

@@ -34,15 +34,15 @@ const NotificationSections = () => {
return (
<div className="pb-2">
<div className="d-flex justify-content-between align-items-center">
<span className="text-gray-500">
<div className="d-flex justify-content-between align-items-center py-10px mb-2">
<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)}

View File

@@ -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>