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/shared/Header.tsx
+31 -27
View File
@@ -11,6 +11,8 @@ import SideBarItem from './SideBarItem'
import AvatarImage from '@/assets/images/avatar_image.png'
import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
import { useGetInbox } from '@/pages/received/hooks/useEmailData'
import ThemeToggle from '@/components/ThemeToggle'
import { getIconColor } from '@/utils/colorUtils'
const Header: FC = () => {
@@ -122,7 +124,7 @@ const Header: FC = () => {
}, [pathname])
return (
<div className='fixed z-1 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
<div className='fixed z-1 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-surface justify-between rounded-[32px] xl:w-[calc(100%-305px)] border border-surface'>
{/* Desktop Search */}
<div className='min-w-[270px] hidden xl:block relative'>
<div id="search-input-container">
@@ -138,7 +140,7 @@ const Header: FC = () => {
{showSearchResults && search && inputFocused && (
<div
id="search-dropdown-container"
className='absolute z-20 mt-1 w-full bg-white rounded-xl shadow-lg max-h-80 overflow-y-auto'
className='absolute z-20 mt-1 w-full bg-surface border border-surface rounded-xl shadow-lg max-h-80 overflow-y-auto'
>
{inboxData?.data?.results && inboxData.data.results.length > 0 ? (
<div className='py-2'>
@@ -146,7 +148,7 @@ const Header: FC = () => {
<Link
key={message.id}
to={`/mail/${message.id}/${message.mailbox}`}
className='flex items-center gap-3 px-4 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0'
className='flex items-center gap-3 px-4 py-2 hover:bg-accent cursor-pointer border-b border-border last:border-b-0'
onClick={clearSearch}
>
<div className='flex-1 min-w-0'>
@@ -154,18 +156,18 @@ const Header: FC = () => {
{!message.seen && (
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
)}
<span className='text-sm font-medium text-gray-900 truncate'>
<span className='text-sm font-medium text-foreground truncate'>
{message.from.name || message.from.address}
</span>
</div>
<div className='text-sm text-gray-800 font-medium truncate mb-1'>
<div className='text-sm text-foreground font-medium truncate mb-1'>
{message.subject || 'بدون موضوع'}
</div>
<div className='text-xs text-gray-500 truncate'>
<div className='text-xs text-muted-foreground truncate'>
{message.intro}
</div>
</div>
<div className='text-xs text-gray-400 flex-shrink-0'>
<div className='text-xs text-muted-foreground flex-shrink-0'>
{new Date(message.date).toLocaleDateString('fa-IR')}
</div>
</Link>
@@ -173,7 +175,7 @@ const Header: FC = () => {
</div>
) : (
<div className='p-4 text-center text-sm text-description'>
<div className='p-4 text-center text-sm text-muted-foreground'>
نتیجه‌ای یافت نشد
</div>
)}
@@ -185,7 +187,7 @@ const Header: FC = () => {
<div className={`${showMobileSearch ? 'w-full' : ''} items-center`}>
{!showMobileSearch && (
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
<HambergerMenu size={24} color='black' />
<HambergerMenu size={24} color={getIconColor('primary')} />
</div>
)}
@@ -207,7 +209,7 @@ const Header: FC = () => {
onClick={toggleMobileSearch}
className='p-2 flex-shrink-0 flex items-center justify-center'
>
<CloseCircle size={20} color='#8C90A3' />
<CloseCircle size={20} color={getIconColor('muted')} />
</div>
</div>
)}
@@ -217,7 +219,7 @@ const Header: FC = () => {
{showMobileSearch && showSearchResults && search && (
<div
id="mobile-search-dropdown-container"
className='fixed right-4 left-4 top-16 z-1 bg-white rounded-xl shadow-lg max-h-[calc(100vh-80px)] overflow-y-auto'
className='fixed right-4 left-4 top-16 z-1 bg-surface border border-surface rounded-xl shadow-lg max-h-[calc(100vh-80px)] overflow-y-auto'
>
{inboxData?.data?.results && inboxData.data.results.length > 0 ? (
<div className='py-2'>
@@ -225,7 +227,7 @@ const Header: FC = () => {
<Link
key={message.id}
to={`/mail/${message.id}/${message.mailbox}`}
className='flex items-center gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0'
className='flex items-center gap-3 px-4 py-3 hover:bg-accent cursor-pointer border-b border-border last:border-b-0'
onClick={clearSearchMobile}
>
<div className='flex-1 min-w-0'>
@@ -233,18 +235,18 @@ const Header: FC = () => {
{!message.seen && (
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
)}
<span className='text-sm font-medium text-gray-900 truncate'>
<span className='text-sm font-medium text-foreground truncate'>
{message.from.name || message.from.address}
</span>
</div>
<div className='text-sm text-gray-800 font-medium truncate mb-1'>
<div className='text-sm text-foreground font-medium truncate mb-1'>
{message.subject || 'بدون موضوع'}
</div>
<div className='text-xs text-gray-500 truncate'>
<div className='text-xs text-muted-foreground truncate'>
{message.intro}
</div>
</div>
<div className='text-xs text-gray-400 flex-shrink-0'>
<div className='text-xs text-muted-foreground flex-shrink-0'>
{new Date(message.date).toLocaleDateString('fa-IR')}
</div>
</Link>
@@ -252,7 +254,7 @@ const Header: FC = () => {
</div>
) : (
<div className='p-4 text-center text-sm text-description'>
<div className='p-4 text-center text-sm text-muted-foreground'>
نتیجه‌ای یافت نشد
</div>
)}
@@ -263,12 +265,14 @@ const Header: FC = () => {
{/* Mobile search icon */}
{!showMobileSearch && (
<div onClick={toggleMobileSearch} className='xl:hidden block'>
<SearchNormal size={20} color='black' />
<SearchNormal size={20} color={getIconColor('primary')} />
</div>
)}
<Notifications />
<ThemeToggle />
{
data && (
<Popover className="relative" key={popoverKey}>
@@ -281,16 +285,16 @@ const Header: FC = () => {
<div className='text-xs'>
{data?.data?.user?.emailAddress}
</div>
<ArrowDown2 size={14} color='#8C90A3' />
<ArrowDown2 size={14} color={getIconColor('muted')} />
</div>
</div>
</PopoverButton>
<PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
<PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-surface border border-surface boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
<div className='absolute xl:hidden top-6 left-6'>
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color={getIconColor('primary')} />
</div>
<Link to={Paths.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
<Link to={Paths.profile} className='flex flex-col gap-2 items-center justify-center border-b border-border pb-4'>
<div className='size-14 rounded-full overflow-hidden'>
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
</div>
@@ -299,15 +303,15 @@ const Header: FC = () => {
{data?.data?.user?.emailAddress}
</div>
<div className='text-description'>
<div className='text-muted-foreground'>
{data?.data?.user?.email}
</div>
</Link>
<div className='pb-6 px-6 border-b border-[#EAEDF5]'>
<div className='pb-6 px-6 border-b border-border'>
<SideBarItem
icon={<ProfileCircle color={'black'} size={20} />}
icon={<ProfileCircle color={getIconColor('primary')} size={20} />}
title={t('header.profile')}
isActive
link={Paths.profile}
@@ -315,7 +319,7 @@ const Header: FC = () => {
/>
<SideBarItem
icon={<Setting2 color={'black'} size={20} />}
icon={<Setting2 color={getIconColor('primary')} size={20} />}
title={t('header.setting')}
isActive
link={Paths.setting}
@@ -325,7 +329,7 @@ const Header: FC = () => {
<div className='px-6 -mt-[2px]'>
<SideBarItem
icon={<Logout color={'black'} size={20} />}
icon={<Logout color={getIconColor('primary')} size={20} />}
title={t('sidebar.logout')}
isActive={false}
link={'#'}