dark mode v1

src/pages/received/Components/Header.tsx

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

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

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

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

@@ -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()}
             />