fix dark mode and design bug
This commit is contained in:
@@ -21,7 +21,7 @@ const Button: FC<ButtonProps> = (props) => {
|
|||||||
'w-full cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
|
'w-full cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
|
||||||
variant === 'secondary'
|
variant === 'secondary'
|
||||||
? 'bg-secondary text-secondary-foreground'
|
? 'bg-secondary text-secondary-foreground'
|
||||||
: 'bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground',
|
: 'bg-primary text-primary-foreground',
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@@ -20,14 +20,14 @@ const SwitchComponent = (props: Props) => {
|
|||||||
{({ checked }) => (
|
{({ checked }) => (
|
||||||
<button
|
<button
|
||||||
className={`${checked
|
className={`${checked
|
||||||
? 'bg-primary dark:bg-primary/80'
|
? 'bg-primary dark:bg-blue-500'
|
||||||
: 'bg-gray-300 dark:bg-gray-600'
|
: 'bg-gray-300 dark:bg-gray-700'
|
||||||
} relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200`}
|
} relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ease-in-out shadow-inner`}
|
||||||
>
|
>
|
||||||
<span className="sr-only">Enable notifications</span>
|
<span className="sr-only">Enable notifications</span>
|
||||||
<span
|
<span
|
||||||
className={`${checked ? 'translate-x-6' : 'translate-x-1'
|
className={`${checked ? 'translate-x-6' : 'translate-x-1'
|
||||||
} inline-block h-4 w-4 transform rounded-full bg-white dark:bg-gray-100 shadow-sm transition-all duration-200`}
|
} inline-block h-4 w-4 transform rounded-full bg-white dark:bg-gray-100 shadow-lg transition-all duration-300 ease-in-out`}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ const Forward: FC<ForwardProps> = ({
|
|||||||
onClick={expandForward}
|
onClick={expandForward}
|
||||||
className='flex gap-2 cursor-pointer items-center border-r border-border pr-5 hover:text-primary transition-colors'
|
className='flex gap-2 cursor-pointer items-center border-r border-border pr-5 hover:text-primary transition-colors'
|
||||||
>
|
>
|
||||||
<img src={ForwardIcon} className='w-[17px]' />
|
<img src={ForwardIcon} className='w-[17px] filterWhite' />
|
||||||
<div>{t('mail.forward')}</div>
|
<div>{t('mail.forward')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -160,7 +160,7 @@ const Forward: FC<ForwardProps> = ({
|
|||||||
{/* Forward Header */}
|
{/* Forward Header */}
|
||||||
<div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
|
<div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
|
||||||
<div className='flex items-center gap-2 text-sm text-gray-600'>
|
<div className='flex items-center gap-2 text-sm text-gray-600'>
|
||||||
<img src={ForwardIcon} className='w-4 h-4' />
|
<img src={ForwardIcon} className='w-4 h-4 filterWhite' />
|
||||||
<span>ارسال به دیگران</span>
|
<span>ارسال به دیگران</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center gap-2'>
|
||||||
|
|||||||
@@ -66,7 +66,7 @@ const Reply: FC<ReplyProps> = ({
|
|||||||
onClick={handleExpand}
|
onClick={handleExpand}
|
||||||
className='flex gap-2 cursor-pointer items-center hover:text-primary transition-colors'
|
className='flex gap-2 cursor-pointer items-center hover:text-primary transition-colors'
|
||||||
>
|
>
|
||||||
<img src={AnswerIcon} className='w-[17px]' />
|
<img src={AnswerIcon} className='w-[17px] filterWhite' />
|
||||||
<div>{t('mail.answer')}</div>
|
<div>{t('mail.answer')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -83,7 +83,7 @@ const Reply: FC<ReplyProps> = ({
|
|||||||
<div className={`mt-6 w-full ${className}`}>
|
<div className={`mt-6 w-full ${className}`}>
|
||||||
<div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
|
<div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
|
||||||
<div className='flex items-center gap-2 text-sm text-gray-600'>
|
<div className='flex items-center gap-2 text-sm text-gray-600'>
|
||||||
<img src={AnswerIcon} className='w-4 h-4' />
|
<img src={AnswerIcon} className='w-4 h-4 filterWhite' />
|
||||||
<span>پاسخ به {originalMessage.from.name || originalMessage.from.address}</span>
|
<span>پاسخ به {originalMessage.from.name || originalMessage.from.address}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center gap-2'>
|
||||||
|
|||||||
@@ -114,7 +114,7 @@ const ReportBug: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='text-[11px] text-muted-foreground leading-6'>
|
<div className='text-[11px] text-muted-foreground leading-6'>
|
||||||
با ادامه و ارسال، شما تأیید میکنید که «دیمیل» میتواند پاسخها و اطلاعات حساب شما را بهمنظور بهبود خدمات جمعآوری و استفاده کند. برای جزئیات بیشتر لطفاً به <span className='text-blue-500'>قوانین و شرایط و سیاست حریم خصوصی</span> مراجعه کنید.
|
با ادامه و ارسال، شما تأیید میکنید که «دیمیل» میتواند پاسخها و اطلاعات حساب شما را بهمنظور بهبود خدمات جمعآوری و استفاده کند. برای جزئیات بیشتر لطفاً به <a target='_blank' href='https://danakcorp.com/conditions' className='text-blue-500'>قوانین و شرایط و سیاست حریم خصوصی</a> مراجعه کنید.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='w-full flex justify-end'>
|
<div className='w-full flex justify-end'>
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ const Header: FC<{
|
|||||||
onClick={handleDownloadEmail}
|
onClick={handleDownloadEmail}
|
||||||
>
|
>
|
||||||
<div className='flex gap-2 items-center xl:px-5'>
|
<div className='flex gap-2 items-center xl:px-5'>
|
||||||
<DocumentDownload size={20} color={'#000000'} />
|
<DocumentDownload size={20} color={'#000000'} className='filterWhite' />
|
||||||
<span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
|
<span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
@@ -153,7 +153,7 @@ const Header: FC<{
|
|||||||
onClick={handlePrint}
|
onClick={handlePrint}
|
||||||
>
|
>
|
||||||
<div className='flex gap-2 items-center xl:px-5'>
|
<div className='flex gap-2 items-center xl:px-5'>
|
||||||
<Printer size={20} color={'#000000'} />
|
<Printer size={20} color={'#000000'} className='filterWhite' />
|
||||||
<span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
|
<span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const MessageFavorite: FC<{ flagged: boolean }> = ({ flagged }) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
setIsFavorite(!isFavorite)
|
setIsFavorite(!isFavorite)
|
||||||
}} className='lg:size-[18px] size-[20px]' variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : getIconColor('muted')} />
|
}} className='lg:size-[18px] size-[20px]' variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : getIconColor('primary')} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -221,7 +221,7 @@ const DetailEmail: FC = () => {
|
|||||||
<DocumentDownload
|
<DocumentDownload
|
||||||
size={20}
|
size={20}
|
||||||
color={getIconColor('primary')}
|
color={getIconColor('primary')}
|
||||||
className='cursor-pointer hover:opacity-70 transition-opacity'
|
className='cursor-pointer hover:opacity-70 transition-opacity filterWhite'
|
||||||
onClick={() => handleDownloadAttachment(
|
onClick={() => handleDownloadAttachment(
|
||||||
attachment.id || `ATT${String(index + 1).padStart(5, '0')}`,
|
attachment.id || `ATT${String(index + 1).padStart(5, '0')}`,
|
||||||
attachment.filename || `attachment-${index + 1}`
|
attachment.filename || `attachment-${index + 1}`
|
||||||
|
|||||||
Reference in New Issue
Block a user