danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode v1

Browse Source
This commit is contained in:
hamid zarghami
2025-08-18 15:23:31 +03:30
parent 561bf9d5d5
commit 916b88731c
49 changed files with 655 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/notification/Notification.tsx
+11 -10
View File
@@ -1,6 +1,7 @@
import { CloseCircle, Notification } from 'iconsax-react';
import { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getIconColor } from '@/utils/colorUtils';
import { clx } from '../../helpers/utils';
import StatusCircle from '../../components/StatusCircle';
import { useOutsideClick } from '../../hooks/useOutSideClick';
@@ -81,7 +82,7 @@ const Notifications: FC = () => {
return (
<div ref={ref}>
<div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
<Notification size={18} color="black" />
<Notification size={18} color={getIconColor('primary')} />
<div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
{data?.pages[0]?.data?.notificationCount}
</div>
@@ -91,19 +92,19 @@ const Notifications: FC = () => {
<div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
<div className="flex justify-between items-center">
<div>{t('notif.natification')}</div>
<div className="size-7 rounded-full bg-white/30 flex justify-center items-center">
<CloseCircle size={20} color="black" onClick={() => setShowModal(false)} />
<div className="size-7 rounded-full bg-white/30 dark:bg-white/10 flex justify-center items-center">
<CloseCircle size={20} color={getIconColor('primary')} onClick={() => setShowModal(false)} />
</div>
</div>
<div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
<div className="mt-6 flex h-8 border border-white border-opacity-35 dark:border-white/20 text-xs rounded-lg overflow-hidden">
<div
onClick={() => setActiveTab('unread')}
className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
activeTab === 'unread' ? 'bg-white/70 text-black' : ''
activeTab === 'unread' ? 'bg-white/70 text-black dark:bg-white/15 dark:text-white' : ''
)}
>
خوانده نشده
@@ -112,7 +113,7 @@ const Notifications: FC = () => {
onClick={() => setActiveTab('read')}
className={clx(
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
activeTab === 'read' ? 'bg-white/70 text-black' : ''
activeTab === 'read' ? 'bg-white/70 text-black dark:bg-white/15 dark:text-white' : ''
)}
>
خوانده شده
@@ -124,7 +125,7 @@ const Notifications: FC = () => {
loading={readAll.isPending}
onClick={handleAllRead}
className={clx(
'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white dark:text-white border-white border-opacity-70 dark:border-white/40 flex justify-center items-center',
)}
>
{t('notif.all_read')}
@@ -136,12 +137,12 @@ const Notifications: FC = () => {
dataLength={posts.length}
next={fetchNextPage}
hasMore={hasNextPage}
loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
loader={<div className='flex justify-center'><MoonLoader color={getIconColor('primary')} size={20} /></div>}
scrollableTarget="notificationsContainer"
>
{
posts.map((item: NotificationItemType) => (
<div onClick={() => handleRedirect(item.type)} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
<div onClick={() => handleRedirect(item.type)} className="bg-white/60 dark:bg-white/10 dark:text-white cursor-pointer h-fit gap-4 items-start rounded-xl p-3 mb-4 flex" key={item.id}>
{
!item.isRead &&
<div className="mt-1">
@@ -150,7 +151,7 @@ const Notifications: FC = () => {
}
<div>
<div className="truncate max-w-[200px]">{item.message}</div>
<div className="mt-2 flex gap-2 text-[10px] text-description">
<div className="mt-2 flex gap-2 text-[10px] text-description dark:text-gray-400">
<div>{timeAgo(item.createdAt)}</div>
<div className="flex gap-1 items-center">
<StatusCircle color="#8C90A3" />