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/Trash/List.tsx
+5 -4
View File
@@ -13,6 +13,7 @@ import { ErrorType } from '@/helpers/types';
import { toast } from '@/components/Toast';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -137,14 +138,14 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer min-w-[18px] ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
<RowActionsDropdown actions={[
{
label: 'حذف همه',
icon: <Trash size={18} color='black' />,
icon: <Trash size={18} color={getIconColor('primary')} />,
onClick: () => setShowModal(true)
}
]} />
@@ -153,7 +154,7 @@ const List: FC = () => {
const selectedActions = (
<>
<RecoveryConvert size={18} color='black' onClick={() => handleRestoreSelected()} className="cursor-pointer" />
<RecoveryConvert size={18} color={getIconColor('primary')} onClick={() => handleRestoreSelected()} className="cursor-pointer" />
<Trash size={18} color='red' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
</>
);
@@ -199,7 +200,7 @@ const List: FC = () => {
const getRowActions = (message: TrashMessage): RowActionItem[] => [
{
label: 'بازگردانی',
icon: <RecoveryConvert size={16} color="black" />,
icon: <RecoveryConvert size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.restore({ messageId: message.id, mailbox: message.mailbox }),
},
{
src/pages/archive/List.tsx
+5 -4
View File
@@ -10,6 +10,7 @@ import { ArchiveMessage } from './types/ArchiveTypes';
import { useEmailActions } from '@/hooks/useEmailActions';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -137,7 +138,7 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
@@ -146,8 +147,8 @@ const List: FC = () => {
const selectedActions = (
<>
<ArchiveSlash size={18} color='black' onClick={() => handleUnarchiveSelected()} className="cursor-pointer" />
<Trash size={18} color='black' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
<ArchiveSlash size={18} color={getIconColor('primary')} onClick={() => handleUnarchiveSelected()} className="cursor-pointer" />
<Trash size={18} color={getIconColor('primary')} onClick={() => handleDeleteSelected()} className="cursor-pointer" />
</>
);
@@ -181,7 +182,7 @@ const List: FC = () => {
const getRowActions = (message: ArchiveMessage): RowActionItem[] => [
{
label: 'خروج از آرشیو',
icon: <ArchiveSlash size={16} color="black" />,
icon: <ArchiveSlash size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.unarchive({ messageId: message.id, mailbox: message.mailbox }),
},
{
src/pages/auth/Login.tsx
+7 -7
View File
@@ -63,18 +63,18 @@ const Login: FC = () => {
return (
<div className='w-full h-full flex justify-center lg:py-[75px] py-4 lg:items-center lg:px-10 px-4'>
<div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
<div className='flex-1 min-w-[50%] overflow-y-auto bg-white lg:px-9 px-4 py-7'>
<div className='flex-1 min-w-[50%] overflow-y-auto bg-card lg:px-9 px-4 py-7'>
<div className='flex-1 h-full flex flex-col'>
<div className='flex relative flex-1 flex-col h-full justify-center'>
<img src={LogoSmallImage} className='w-8 hidden xl:block' />
<img src={LogoImage} className='w-44 right-0 left-0 mx-auto absolute top-10 xl:hidden' />
<img src={LogoSmallImage} className='w-8 hidden xl:block filterWhite' />
<img src={LogoImage} className='w-44 right-0 left-0 mx-auto absolute top-10 xl:hidden filterWhite' />
<div>
<div className='mt-5'>
<h2 className='text-2xl font-bold'>
<h2 className='text-2xl font-bold text-primary-content'>
{t('auth.welcome')}
</h2>
<p className='text-description text-sm mt-2'>
<p className='text-secondary-content text-sm mt-2'>
{t('auth.enter_info_login')}
</p>
</div>
@@ -132,8 +132,8 @@ const Login: FC = () => {
</div>
</div>
<div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center'>
<img src={LogoImage} className='h-14' />
<div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center bg-surface'>
<img src={LogoImage} className='h-14 filterWhite' />
</div>
</div>
</div>
src/pages/auth/components/LoginStep1.tsx
+5 -4
View File
@@ -12,6 +12,7 @@ import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData'
import { ErrorType } from '../../../helpers/types'
import { ArrowLeft } from 'iconsax-react'
import { toast } from '../../../components/Toast'
import { getIconColor } from '@/utils/colorUtils'
const LoginStep1: FC = () => {
const { t } = useTranslation('global')
@@ -56,10 +57,10 @@ const LoginStep1: FC = () => {
return (
<div>
<div className='mt-5'>
<h2 className='text-2xl font-bold'>
<h2 className='text-2xl font-bold text-primary-content'>
{t('auth.welcome')}
</h2>
<p className='text-description text-sm mt-2'>
<p className='text-secondary-content text-sm mt-2'>
{t('auth.enter_info_login')}
</p>
</div>
@@ -91,11 +92,11 @@ const LoginStep1: FC = () => {
onClick={() => formik.handleSubmit()}
loading={loginWithOtp.isPending || checkHasAccount.isPending}
/>
<a href='https://accounts.danakcorp.com' target='_blank' className='mt-4 flex gap-1 text-sm justify-center text-description'>
<a href='https://accounts.danakcorp.com' target='_blank' className='mt-4 flex gap-1 text-sm justify-center text-secondary-content'>
<div>
{t('auth.old_version')}
</div>
<ArrowLeft size={20} color='black' />
<ArrowLeft size={20} color={getIconColor('muted')} />
</a>
</div>
)
src/pages/auth/components/LoginStep2.tsx
+6 -6
View File
@@ -95,10 +95,10 @@ const LoginStep2: FC = () => {
return (
<div>
<div className='mt-5'>
<h2 className='lg:text-2xl font-bold'>
<h2 className='lg:text-2xl font-bold text-primary-content'>
{t('auth.enter_otp')}
</h2>
<p className='text-description flex lg:flex-row flex-col lg:gap-1 gap-2 text-sm lg:mt-2 mt-3'>
<p className='text-secondary-content flex lg:flex-row flex-col lg:gap-1 gap-2 text-sm lg:mt-2 mt-3'>
<div className='flex gap-1'>
<div>{t('auth.verfify_code_text_1')}</div>
<div>{phone}</div>
@@ -106,7 +106,7 @@ const LoginStep2: FC = () => {
{t('auth.verfify_code_text_2')}
</div>
</div>
<div onClick={() => setStepLogin(1)} className='text-black cursor-pointer'>
<div onClick={() => setStepLogin(1)} className='text-primary-content cursor-pointer'>
{t('auth.change_number')}
</div>
</p>
@@ -129,7 +129,7 @@ const LoginStep2: FC = () => {
type='tel'
autoComplete="one-time-code"
inputMode="numeric"
className='w-full h-[50px] flex-1 mx-2 bg-white border rounded-2.5' />
className='w-full h-[50px] flex-1 mx-2 input-surface rounded-2.5' />
}
/>
</div>
@@ -142,12 +142,12 @@ const LoginStep2: FC = () => {
<div className='flex mt-4 justify-end'>
{
value !== '00:00' ?
<div className='flex gap-1 text-description text-xs'>
<div className='flex gap-1 text-secondary-content text-xs'>
<div>{value}</div>
<div>{t('auth.counter_otp')}</div>
</div>
:
<div onClick={reSend} className='flex cursor-pointer gap-1 pl-2 text-black text-sm'>
<div onClick={reSend} className='flex cursor-pointer gap-1 pl-2 text-primary-content text-sm'>
<div className=''>
{t('auth.try_again')}
</div>
src/pages/auth/components/LoginStep3.tsx
+4 -4
View File
@@ -55,10 +55,10 @@ const LoginStep3: FC = () => {
return (
<div>
<div className='mt-5'>
<h2 className='text-2xl font-bold'>
<h2 className='text-2xl font-bold text-primary-content'>
{t('auth.enter_password_step3')}
</h2>
<p className='text-description text-sm mt-2'>
<p className='text-secondary-content text-sm mt-2'>
{t('auth.enter_your_password')}
</p>
</div>
@@ -90,10 +90,10 @@ const LoginStep3: FC = () => {
/>
<div onClick={() => setStepLogin(1)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>
<p className='text-description'>
<p className='text-secondary-content'>
{t('auth.login_with_otp')}
</p>
<ArrowLeft size={20} color='black' />
<ArrowLeft size={20} color={'currentColor'} />
</div>
</div>
)
src/pages/draft/List.tsx
+7 -6
View File
@@ -12,6 +12,7 @@ import { useEmailActions } from '@/hooks/useEmailActions';
import { useSharedStore } from '@/shared/store/sharedStore';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -155,7 +156,7 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
@@ -166,19 +167,19 @@ const List: FC = () => {
<>
<Send
size={18}
color='black'
color={getIconColor('primary')}
onClick={() => handleSendSelected()}
className="cursor-pointer"
/>
<Edit
size={18}
color='black'
color={getIconColor('primary')}
onClick={() => handleEditSelected()}
className="cursor-pointer"
/>
<Trash
size={18}
color='black'
color={getIconColor('primary')}
onClick={() => handleDeleteSelected()}
className="cursor-pointer"
/>
@@ -243,12 +244,12 @@ const List: FC = () => {
const getRowActions = (message: DraftMessage): RowActionItem[] => [
{
label: 'ارسال',
icon: <Send size={16} color="black" />,
icon: <Send size={16} color={getIconColor('primary')} />,
onClick: () => handleSendDraft(message.id),
},
{
label: 'ویرایش',
icon: <Edit size={16} color="black" />,
icon: <Edit size={16} color={getIconColor('primary')} />,
onClick: () => handleEditDraft(message.id),
},
{
src/pages/favorite/List.tsx
+5 -4
View File
@@ -11,6 +11,7 @@ import { useEmailActions } from '@/hooks/useEmailActions';
import Favorite from '../received/Components/Favorite';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -138,7 +139,7 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
@@ -148,8 +149,8 @@ const List: FC = () => {
const selectedActions = (
<>
<Star1 variant='Bold' size={18} color="#FFC107" onClick={() => handleUnfavoriteSelected()} className="cursor-pointer" />
<Archive size={18} color='black' onClick={() => handleArchiveSelected()} className="cursor-pointer" />
<Trash size={18} color='black' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
<Archive size={18} color={getIconColor('primary')} onClick={() => handleArchiveSelected()} className="cursor-pointer" />
<Trash size={18} color={getIconColor('primary')} onClick={() => handleDeleteSelected()} className="cursor-pointer" />
</>
);
@@ -202,7 +203,7 @@ const List: FC = () => {
},
{
label: 'بایگانی',
icon: <Archive size={16} color="black" />,
icon: <Archive size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.archive({ messageId: message.id, mailbox: message.mailbox }),
},
{
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" />
src/pages/profile/Profile.tsx
+4 -4
View File
@@ -100,13 +100,13 @@ const Profile: FC = () => {
getProfile.isPending ?
<div></div>
:
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
<div className='bg-card border border-border rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
<div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
<div className='flex-1'>
<div>
{t('profile.image_profile')}
</div>
<div className='text-description text-xs mt-2'>
<div className='text-muted-foreground text-xs mt-2'>
{t('profile.image_profile_desc')}
</div>
</div>
@@ -123,7 +123,7 @@ const Profile: FC = () => {
<div>{t('profile.upload_image')}</div>
</div>
</Button>
<p className='mt-3 items-center flex gap-0.5 text-description'>
<p className='mt-3 items-center flex gap-0.5 text-muted-foreground'>
{t('profile.formats')}
<div className='-mt-0.5'>{t('profile.format_image')}</div>
<span>{t('profile.max_size')}</span>
@@ -137,7 +137,7 @@ const Profile: FC = () => {
<div>
{t('profile.info_account')}
</div>
<div className='text-description text-xs mt-2'>
<div className='text-muted-foreground text-xs mt-2'>
{t('profile.auth_after_change_info')}
</div>
</div>
src/pages/profile/components/Email.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ const Email: FC<Props> = (props: Props) => {
/>
{
isReadOnly ?
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-primary text-xs items-center'>
{/* <Edit className='xl:size-[18px] size-4' color='#0047FF' />
<div>
{t('edit')}
src/pages/profile/components/Phone.tsx
+2 -2
View File
@@ -65,7 +65,7 @@ const Phone: FC<Props> = (props: Props) => {
/>
{
isReadOnly ?
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-primary text-xs items-center'>
{/* <Edit className='xl:size-[18px] size-4' color='#0047FF' />
<div>
{t('edit')}
@@ -114,7 +114,7 @@ const Phone: FC<Props> = (props: Props) => {
<div className='mt-14 flex justify-end border-t border-border pt-8'>
<div className='flex gap-5'>
<Button
className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
className='bg-card text-muted-foreground w-[150px] text-xs border border-border'
label='لغو'
onClick={() => setShowModal(false)}
/>
src/pages/profile/components/Username.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ const Username: FC<Props> = (props: Props) => {
</div>
}
</div>
<div className='flex relative gap-1 text-[#0047FF] text-xs items-center'>
<div className='flex relative gap-1 text-primary text-xs items-center'>
{
!canEdit ?
<div onClick={() => setCanEdit(true)} className='flex gap-1 cursor-pointer relative -top-3'>
src/pages/received/Components/Header.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import Button from '@/components/Button'
import { ArrowRight, DocumentDownload, Printer } from 'iconsax-react'
import { getIconColor } from '@/utils/colorUtils'
import { useNavigate } from 'react-router-dom'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
@@ -124,7 +125,7 @@ const Header: FC<{
return (
<div className='flex justify-between items-center border-b border-border pb-6'>
<div className='flex flex-1 lg:gap-4'>
<ArrowRight size={18} color='black' onClick={() => navigate(-1)} />
<ArrowRight size={18} color={getIconColor('primary')} onClick={() => navigate(-1)} />
<div className='flex xl:gap-4 gap-4 flex-1 lg:justify-start justify-center '>
<MessageUnread />
<MessageSpam isActiveSpam={mailBoxName === MailboxEnum.Junk} />
@@ -143,7 +144,7 @@ const Header: FC<{
onClick={handleDownloadEmail}
>
<div className='flex gap-2 items-center xl:px-5'>
<DocumentDownload size={20} color='black' />
<DocumentDownload size={20} color={getIconColor('primary')} />
<span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
</div>
</Button>
@@ -152,7 +153,7 @@ const Header: FC<{
onClick={handlePrint}
>
<div className='flex gap-2 items-center xl:px-5'>
<Printer size={20} color='black' />
<Printer size={20} color={getIconColor('primary')} />
<span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
</div>
</Button>
src/pages/received/Components/MessageArchive.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import { useMoveToArchive, useUnArchiveMessage } from '../hooks/useEmailData'
import { ArchiveTick } from 'iconsax-react'
import { getIconColor } from '@/utils/colorUtils'
import { FC, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
@@ -26,7 +27,7 @@ const MessageArchive: FC<{ isActiveArchive: boolean }> = ({ isActiveArchive }) =
})
}
setIsArchive(!isArchive)
}} className='lg:size-[18px] size-[20px]' variant={isArchive ? 'Bold' : 'Outline'} color='black' />
}} className='lg:size-[18px] size-[20px]' variant={isArchive ? 'Bold' : 'Outline'} color={getIconColor('primary')} />
)
}
src/pages/received/Components/MessageSpam.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { InfoCircle } from 'iconsax-react'
import { getIconColor } from '@/utils/colorUtils'
import { FC, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useMoveToJunk, useMoveToNotJunk } from '../hooks/useEmailData'
@@ -27,7 +28,7 @@ const MessageSpam: FC<{ isActiveSpam: boolean }> = ({ isActiveSpam }) => {
})
}
setIsSpam(!isSpam)
}} className='lg:size-[18px] size-[20px]' variant={isSpam ? 'Bold' : 'Outline'} color='black' />
}} className='lg:size-[18px] size-[20px]' variant={isSpam ? 'Bold' : 'Outline'} color={getIconColor('primary')} />
)
}
src/pages/received/Components/MessageUnread.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { SmsNotification } from 'iconsax-react'
import { getIconColor } from '@/utils/colorUtils'
import { FC, useState } from 'react'
import { useMarkAsRead, useMarkAsUnread } from '../hooks/useEmailData'
import { useParams } from 'react-router-dom'
@@ -18,7 +19,7 @@ const MessageUnread: FC = () => {
markAsRead({ messageId: id || '', mailbox: mailbox || '' })
}
setIsRead(!isRead)
}} className='lg:size-[18px] size-[22px]' variant={isRead ? 'Outline' : 'Bold'} color='black' />
}} className='lg:size-[18px] size-[22px]' variant={isRead ? 'Outline' : 'Bold'} color={getIconColor('primary')} />
)
}
src/pages/received/List.tsx
+7 -6
View File
@@ -19,6 +19,7 @@ import ModalConfrim from '@/components/ModalConfrim';
import { ErrorType } from '@/helpers/types';
import { toast } from '@/components/Toast';
import { Checkbox } from '@/components/ui/checkbox';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
@@ -159,7 +160,7 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer min-w-[18px] ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
@@ -167,7 +168,7 @@ const List: FC = () => {
<RowActionsDropdown actions={[
{
label: 'خواندن همه',
icon: <img src={MarkAsRead} className='w-[18px]' />,
icon: <img src={MarkAsRead} className='w-[18px] filterWhite' />,
onClick: () => handleMarkAll()
}
]} />
@@ -181,18 +182,18 @@ const List: FC = () => {
<>
<img
src={MarkAsRead}
className='w-[18px] cursor-pointer'
className='w-[18px] cursor-pointer filterWhite'
onClick={() => handleMarkAsReadSelected()}
/>
<ArchiveTick
color='black'
color={getIconColor('primary')}
onClick={() => handleArchiveSelected()}
className="cursor-pointer lg:size-[18px] size-[20px]"
/>
<InfoCircle color='black' className="cursor-pointer lg:size-[18px] size-[20px]" />
<InfoCircle color={getIconColor('primary')} className="cursor-pointer lg:size-[18px] size-[20px]" />
<Star1
color='black'
color={getIconColor('primary')}
className="cursor-pointer lg:size-[18px] size-[20px]"
onClick={() => handleFavoriteSelected()}
/>
src/pages/search/List.tsx
+8 -7
View File
@@ -10,6 +10,7 @@ import { SearchMessage } from './types/SearchTypes';
import { useEmailActions } from '@/hooks/useEmailActions';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -143,19 +144,19 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
<More size={18} color='black' className='rotate-90 cursor-pointer' />
<More size={18} color={getIconColor('primary')} className='rotate-90 cursor-pointer' />
</div>
);
const selectedActions = (
<>
<Star size={18} color='black' onClick={() => handleFavoriteSelected()} className="cursor-pointer" />
<Archive size={18} color='black' onClick={() => handleArchiveSelected()} className="cursor-pointer" />
<Trash size={18} color='black' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
<Star size={18} color={getIconColor('primary')} onClick={() => handleFavoriteSelected()} className="cursor-pointer" />
<Archive size={18} color={getIconColor('primary')} onClick={() => handleArchiveSelected()} className="cursor-pointer" />
<Trash size={18} color={getIconColor('primary')} onClick={() => handleDeleteSelected()} className="cursor-pointer" />
</>
);
@@ -195,12 +196,12 @@ const List: FC = () => {
const getRowActions = (message: SearchMessage): RowActionItem[] => [
{
label: 'اضافه به علاقه‌مندی‌ها',
icon: <Star size={16} color="black" />,
icon: <Star size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.favorite({ messageId: message.id, mailbox: message.mailbox }),
},
{
label: 'بایگانی',
icon: <Archive size={16} color="black" />,
icon: <Archive size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.archive({ messageId: message.id, mailbox: message.mailbox }),
},
{
src/pages/sent/List.tsx
+7 -6
View File
@@ -11,6 +11,7 @@ import { useEmailActions } from '@/hooks/useEmailActions';
import { RowActionItem } from '../../components/RowActionsDropdown';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -148,7 +149,7 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
@@ -157,9 +158,9 @@ const List: FC = () => {
const selectedActions = (
<>
<Star size={18} color='black' onClick={() => handleFavoriteSelected()} className="cursor-pointer" />
<Archive size={18} color='black' onClick={() => handleArchiveSelected()} className="cursor-pointer" />
<Trash size={18} color='black' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
<Star size={18} color={getIconColor('primary')} onClick={() => handleFavoriteSelected()} className="cursor-pointer" />
<Archive size={18} color={getIconColor('primary')} onClick={() => handleArchiveSelected()} className="cursor-pointer" />
<Trash size={18} color={getIconColor('primary')} onClick={() => handleDeleteSelected()} className="cursor-pointer" />
</>
);
@@ -203,12 +204,12 @@ const List: FC = () => {
const getRowActions = (message: InboxMessage): RowActionItem[] => [
{
label: 'اضافه به علاقه‌مندی‌ها',
icon: <Star size={16} color="black" />,
icon: <Star size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.favorite({ messageId: message.id, mailbox: message.mailbox }),
},
{
label: 'بایگانی',
icon: <Archive size={16} color="black" />,
icon: <Archive size={16} color={getIconColor('primary')} />,
onClick: () => emailActions.archive({ messageId: message.id, mailbox: message.mailbox }),
},
{
src/pages/setting/Setting.tsx
+5 -4
View File
@@ -8,6 +8,7 @@ import ChangePassword from './components/ChangePassword'
import TwoFactor from './components/TwoFactor'
import TitleLine from '@/components/TitleLine'
import { SettingCategoryType, SettingItemType } from './types/SettingTypes'
import { getIconColor } from '@/utils/colorUtils'
const Setting: FC = () => {
@@ -25,17 +26,17 @@ const Setting: FC = () => {
<Tabs
items={[
{
icon: <Notification1 color={activeTab === 'notification' ? 'black' : '#8C90A3'} size={22} />,
icon: <Notification1 color={activeTab === 'notification' ? getIconColor('primary') : getIconColor('muted')} size={22} />,
label: t('setting.notification'),
value: 'notification'
},
{
icon: <KeySquare color={activeTab === 'password' ? 'black' : '#8C90A3'} size={22} />,
icon: <KeySquare color={activeTab === 'password' ? getIconColor('primary') : getIconColor('muted')} size={22} />,
label: t('setting.password'),
value: 'password'
},
{
icon: <Key color={activeTab === '2fa' ? 'black' : '#8C90A3'} size={22} />,
icon: <Key color={activeTab === '2fa' ? getIconColor('primary') : getIconColor('muted')} size={22} />,
label: t('setting.2fa'),
value: '2fa'
},
@@ -47,7 +48,7 @@ const Setting: FC = () => {
{
activeTab === 'notification' ?
<div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
<div className='mt-10 bg-white dark:bg-[#252526] xl:p-8 p-4 rounded-3xl'>
<div>
{t('setting.setting_email_message')}
</div>
src/pages/setting/components/ChangePassword.tsx
+2 -2
View File
@@ -47,7 +47,7 @@ const ChangePassword: FC = () => {
})
return (
<div className='mt-10 bg-white p-8 rounded-3xl'>
<div className='mt-10 bg-white dark:bg-[#252526] p-8 rounded-3xl'>
<div>
{t('setting.change_password')}
</div>
@@ -94,7 +94,7 @@ const ChangePassword: FC = () => {
</div>
</div>
<div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] rounded-3xl text-sm'>
<div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] dark:bg-[#2d2d30] dark:text-gray-300 rounded-3xl text-sm'>
<div>
{t('setting.password_is')}
</div>
src/pages/setting/components/Enabled.tsx
+3 -3
View File
@@ -35,12 +35,12 @@ const Enabled: FC = () => {
return (
<div>
<div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
<div className='mt-10 bg-white dark:bg-[#252526] xl:p-8 p-4 rounded-3xl'>
<div className='text-center py-8'>
<div className='inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4'>
<div className='inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full mb-4'>
<TickCircle size={32} color='#22c55e' />
</div>
<h2 className='text-lg font-semibold text-green-600 mb-2'>
<h2 className='text-lg font-semibold text-green-600 dark:text-green-400 mb-2'>
{t('setting.2fa_enabled_successfully')}
</h2>
</div>
src/pages/setting/components/TwoFactor.tsx
+16 -16
View File
@@ -79,7 +79,7 @@ const TwoFactor: FC = () => {
}
return (
<div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
<div className='mt-10 bg-white dark:bg-[#252526] xl:p-8 p-4 rounded-3xl'>
<div className='mb-6 border-b border-border pb-4'>
<h2>
{t('setting.2fa_setup')}
@@ -94,10 +94,10 @@ const TwoFactor: FC = () => {
<div className='flex-1'>
{!qrData ? (
<div className='text-center py-8'>
<div className='inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4'>
<div className='inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full mb-4'>
<Key size={32} color='#3b82f6' />
</div>
<p className='text-sm text-gray-600 mb-6'>
<p className='text-sm text-gray-600 dark:text-gray-400 mb-6'>
{t('setting.2fa_setup_description')}
</p>
<Button
@@ -119,7 +119,7 @@ const TwoFactor: FC = () => {
{t('setting.scan_qr_code')}
</h3>
<div className='flex justify-center mb-4'>
<div className='p-4 bg-white border-2 border-gray-200 rounded-xl shadow-sm'>
<div className='p-4 bg-white dark:bg-[#2d2d30] border-2 border-gray-200 dark:border-[#3e3e42] rounded-xl shadow-sm'>
<img
src={qrData.qr}
alt="QR Code"
@@ -127,9 +127,9 @@ const TwoFactor: FC = () => {
/>
</div>
</div>
<div className='text-xs text-gray-500 bg-gray-50 p-3 rounded-lg'>
<div className='text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-[#2d2d30] p-3 rounded-lg'>
<div className='font-medium mb-1'>{t('setting.manual_entry')}:</div>
<div onClick={() => handleCopySeed(qrData.seed)} className='font-mono break-all text-gray-700 cursor-pointer'>{qrData.seed}</div>
<div onClick={() => handleCopySeed(qrData.seed)} className='font-mono break-all text-gray-700 dark:text-gray-300 cursor-pointer'>{qrData.seed}</div>
</div>
</div>
@@ -162,39 +162,39 @@ const TwoFactor: FC = () => {
</div>
{/* Information Section */}
<div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] rounded-3xl text-sm'>
<div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] dark:bg-[#2d2d30] rounded-3xl text-sm'>
<div className='mb-4'>
<h3 className='font-medium mb-2'>{t('setting.2fa_info_title')}</h3>
<p className='text-xs text-gray-600'>
<p className='text-xs text-gray-600 dark:text-gray-400'>
{t('setting.2fa_info_description')}
</p>
</div>
<div className='space-y-3'>
<div className='flex items-start gap-3'>
<div className='w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
<span className='text-xs font-medium text-blue-600'>1</span>
<div className='w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
<span className='text-xs font-medium text-blue-600 dark:text-blue-400'>1</span>
</div>
<p className='text-xs'>{t('setting.2fa_step_1')}</p>
</div>
<div className='flex items-start gap-3'>
<div className='w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
<span className='text-xs font-medium text-blue-600'>2</span>
<div className='w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
<span className='text-xs font-medium text-blue-600 dark:text-blue-400'>2</span>
</div>
<p className='text-xs'>{t('setting.2fa_step_2')}</p>
</div>
<div className='flex items-start gap-3'>
<div className='w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
<span className='text-xs font-medium text-blue-600'>3</span>
<div className='w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
<span className='text-xs font-medium text-blue-600 dark:text-blue-400'>3</span>
</div>
<p className='text-xs'>{t('setting.2fa_step_3')}</p>
</div>
</div>
<div className='mt-6 p-3 bg-yellow-50 border border-yellow-200 rounded-lg'>
<p className='text-xs text-yellow-800'>
<div className='mt-6 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg'>
<p className='text-xs text-yellow-800 dark:text-yellow-300'>
<span className='font-medium'>{t('setting.note')}:</span> {t('setting.2fa_note')}
</p>
</div>
src/pages/spam/List.tsx
+6 -5
View File
@@ -13,6 +13,7 @@ import { ErrorType } from '@/helpers/types';
import { toast } from '@/components/Toast';
import { Checkbox } from '@/components/ui/checkbox';
import React from 'react';
import { getIconColor } from '@/utils/colorUtils';
const List: FC = () => {
const navigate = useNavigate();
@@ -137,14 +138,14 @@ const List: FC = () => {
</div>
<Refresh2
size={18}
color='black'
color={getIconColor('primary')}
className={`cursor-pointer min-w-[18px] ${isFetching ? 'animate-spin-reverse' : ''}`}
onClick={() => refetch()}
/>
<RowActionsDropdown actions={[
{
label: 'حذف همه',
icon: <Trash size={18} color='black' />,
icon: <Trash size={18} color={getIconColor('primary')} />,
onClick: () => setShowModal(true)
}
]} />
@@ -153,8 +154,8 @@ const List: FC = () => {
const selectedActions = (
<>
<RecoveryConvert size={18} color='black' onClick={() => handleNotSpamSelected()} className="cursor-pointer" />
<Trash size={18} color='black' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
<RecoveryConvert size={18} color={getIconColor('primary')} onClick={() => handleNotSpamSelected()} className="cursor-pointer" />
<Trash size={18} color={getIconColor('primary')} onClick={() => handleDeleteSelected()} className="cursor-pointer" />
</>
);
@@ -198,7 +199,7 @@ const List: FC = () => {
const getRowActions = (message: SpamMessage): RowActionItem[] => [
{
label: 'غیر اسپم',
icon: <RecoveryConvert size={16} color="black" />,
icon: <RecoveryConvert size={16} color={getIconColor('primary')} />,
onClick: () => null,
},
{