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

responsive part 2

Browse Source
This commit is contained in:
hamid zarghami
2025-06-25 12:01:33 +03:30
parent 717746e13e
commit d0ddc1b87a
13 changed files with 110 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/received/Components/Header.tsx
+11 -11
View File
@@ -9,14 +9,14 @@ const Header: FC = () => {
return (
<div className='flex justify-between items-center border-b border-border pb-6'>
<div className='flex gap-6'>
<div className='flex xl:gap-6 gap-4'>
<ArrowRight size={24} color='#8C90A3' />
<SmsNotification size={24} color='black' />
<ArchiveTick size={24} color='black' />
<InfoCircle size={24} color='black' />
<Star size={24} color='black' />
<VolumeMute size={24} color='black' />
<Trash size={24} color='#CD0000' />
<SmsNotification size={24} color='black' className='xl:block hidden' />
<ArchiveTick size={24} color='black' className='xl:block hidden' />
<InfoCircle size={24} color='black' className='xl:block hidden' />
<Star size={24} color='black' className='xl:block hidden' />
<VolumeMute size={24} color='black' className='xl:block hidden' />
<Trash size={24} color='#CD0000' className='xl:block hidden' />
<More size={24} color='black' className='rotate-90' />
</div>
@@ -24,17 +24,17 @@ const Header: FC = () => {
<Button
variant='secondary'
>
<div className='flex gap-2 items-center px-5'>
<div className='flex gap-2 items-center xl:px-5'>
<DocumentDownload size={20} color='black' />
<span className='pt-0.5'>{t('mail.download')}</span>
<span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
</div>
</Button>
<Button
variant='secondary'
>
<div className='flex gap-2 items-center px-5'>
<div className='flex gap-2 items-center xl:px-5'>
<Printer size={20} color='black' />
<span className='pt-0.5'>{t('mail.print')}</span>
<span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
</div>
</Button>
</div>
src/pages/received/Detail.tsx
+16 -14
View File
@@ -19,23 +19,25 @@ const DetailEmail: FC = () => {
<div className='bg-white rounded-4xl p-8'>
<Header />
<div className='mt-6 flex justify-between items-center'>
<div className='flex gap-4 items-center'>
<div className='mt-6 flex xl:flex-row flex-col justify-between xl:items-center'>
<div className='flex xl:flex-row flex-col-reverse gap-4 xl:items-center'>
<div className='flex gap-1 items-center'>
<div className='font-extralight '>{t('mail.subject')}</div>
<div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</div>
<div className='font-extralight hidden xl:block'>{t('mail.subject')}</div>
<div className='leading-7'>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</div>
</div>
<div className='flex gap-2'>
<Button
label='دریافتی ها'
className='bg-[#ECEFF6] text-description w-fit px-6 rounded-full h-6 xl:h-10 text-[10px] xl:text-sm'
/>
<Button
label='الویت زیاد'
className='bg-[#FFE9E9] text-[#CD0000] w-fit px-6 rounded-full h-6 xl:h-10 text-[10px] xl:text-sm'
/>
</div>
<Button
label='دریافتی ها'
className='bg-[#ECEFF6] text-description w-fit px-6 rounded-full'
/>
<Button
label='الویت زیاد'
className='bg-[#FFE9E9] text-[#CD0000] w-fit px-6 rounded-full'
/>
</div>
<div className='flex text-description text-sm'>
<div className='flex justify-end text-description xl:text-sm text-[10px]'>
۵ اسفندماه ۱۴۰۳، ساعت ۱۲:۰۰
</div>
</div>
@@ -45,7 +47,7 @@ const DetailEmail: FC = () => {
<div>مهرداد مظفری</div>
</div>
<p className='mt-8 text-sm leading-7 font-light'>
<p className='xl:mt-8 mt-3 text-sm leading-7 font-light'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آیندهلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>