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

pixel perfect

Browse Source
This commit is contained in:
hamid zarghami
2025-01-20 16:20:15 +03:30
parent bc6a10d585
commit 99573f050a
7 changed files with 89 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.tsx
+4 -1
View File
@@ -1,5 +1,6 @@
import { FC, SelectHTMLAttributes } from 'react' import { FC, SelectHTMLAttributes } from 'react'
import { clx } from '../helpers/utils' import { clx } from '../helpers/utils'
import { ArrowDown2 } from 'iconsax-react'
export type ItemsSelectType = { export type ItemsSelectType = {
value: string, value: string,
@@ -23,7 +24,7 @@ const Select: FC<Props> = (props: Props) => {
</label> </label>
} }
<select {...props} className={clx( <select {...props} className={clx(
'w-full text-black block border border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray', 'w-full text-black relative block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
props.className, props.className,
props.label && 'mt-1' props.label && 'mt-1'
)}> )}>
@@ -40,7 +41,9 @@ const Select: FC<Props> = (props: Props) => {
) )
}) })
} }
</select> </select>
<ArrowDown2 size={16} color='black' className='absolute z-0 top-3 left-2' />
{ {
props.error_text && props.error_text !== '' ? props.error_text && props.error_text !== '' ?
<div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'> <div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>
src/pages/annoncement/Detail.tsx
+3 -1
View File
@@ -2,6 +2,7 @@ import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import StatusWithText from '../../components/StatusWithText' import StatusWithText from '../../components/StatusWithText'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { ArrowLeft2 } from 'iconsax-react'
const AnnouncementDetail: FC = () => { const AnnouncementDetail: FC = () => {
@@ -14,8 +15,9 @@ const AnnouncementDetail: FC = () => {
<div> <div>
{t('announcement.text_announcement')} {t('announcement.text_announcement')}
</div> </div>
<div onClick={() => navigate(-1)} className='text-xs font-extralight'> <div onClick={() => navigate(-1)} className='text-xs flex gap-0.5 items-center font-extralight'>
{t('back')} {t('back')}
<ArrowLeft2 size={12} color='black' />
</div> </div>
</div> </div>
src/pages/annoncement/List.tsx
+4 -4
View File
@@ -53,7 +53,7 @@ const AnnouncementtList: FC = () => {
'bg-[#F8F9FB]' 'bg-[#F8F9FB]'
)}> )}>
<div className='flex justify-between'> <div className='flex justify-between'>
<div className='leading-6 text-xs xl:text-sm max-w-[70%]'> <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
</div> </div>
@@ -70,7 +70,7 @@ const AnnouncementtList: FC = () => {
</div> </div>
<div className='m-2 flex justify-between items-center text-[11px]'> <div className='m-2 flex justify-between items-center text-[11px]'>
<div className='max-w-[70%] truncate '> <div className='max-w-[70%] truncate text-description'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
</div> </div>
<div className='text-description'> <div className='text-description'>
@@ -82,7 +82,7 @@ const AnnouncementtList: FC = () => {
'p-4 rounded-2xl', 'p-4 rounded-2xl',
)}> )}>
<div className='flex justify-between'> <div className='flex justify-between'>
<div className='leading-6 text-xs xl:text-sm max-w-[70%]'> <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
</div> </div>
@@ -99,7 +99,7 @@ const AnnouncementtList: FC = () => {
</div> </div>
<div className='m-2 flex justify-between items-center text-[11px]'> <div className='m-2 flex justify-between items-center text-[11px]'>
<div className='max-w-[70%] truncate '> <div className='max-w-[70%] truncate text-description'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
</div> </div>
<div className='text-description'> <div className='text-description'>
src/pages/home/components/DanakLearning.tsx
+3 -3
View File
@@ -26,14 +26,14 @@ const DanakLearning: FC = () => {
</div> </div>
<div className='text-xs'> <div className='text-xs'>
<div> <div className='leading-5'>
لورم ایپسوم متن ساختگی با تولید سادگی لورم ایپسوم متن ساختگی با تولید سادگی
</div> </div>
<div className='flex gap-1 mt-2'> <div className='flex gap-1 text-[11px] mt-3 text-description'>
<div>دیزاین ,</div> <div>دیزاین ,</div>
<div>۲۴ دقیقه</div> <div>۲۴ دقیقه</div>
</div> </div>
<div> <div className='text-description text-[11px] mt-2'>
آذر ماه 1403 آذر ماه 1403
</div> </div>
</div> </div>
src/pages/service/MyServices.tsx
+35 -39
View File
@@ -41,53 +41,49 @@ const MyServices: FC = () => {
</div> </div>
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'> <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
<Link to={Pages.services.detail + '1'}>
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'> <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
<ServiceSection <ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/> />
<div className='mt-6 flex gap-1 items-center'> <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
<StatusCircle </div>
color='#00BA4B'
/> </Link>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div> <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
</div> <ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div> </div>
</Link> </Link>
<Link to={Pages.services.detail + '1'}> <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'> <ServiceSection
<ServiceSection />
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/> />
<div className='mt-6 flex gap-1 items-center'> <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div> </div>
</Link> </Link>
<Link to={Pages.services.detail + '1'}>
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'> <Link to={Pages.services.detail + '1'} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
<ServiceSection <ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/> />
<div className='mt-6 flex gap-1 items-center'> <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div>
</Link>
<Link to={Pages.services.detail + '1'}>
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
<ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div> </div>
</Link> </Link>
</div> </div>
</div> </div>
src/pages/setting/Setting.tsx
+36 -36
View File
@@ -45,104 +45,104 @@ const Setting: FC = () => {
<div className='flex xl:flex-row flex-col gap-6 text-sm mt-8'> <div className='flex xl:flex-row flex-col gap-6 text-sm mt-8'>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'> <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-sm text-xs'> <div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')} {t('setting.notification_announcement')}
</div> </div>
<div className='flex xl:gap-4 gap-2'> <div className='flex xl:gap-4 gap-2'>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent <SwitchComponent
active={true} active={true}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.email')}
</div>
</div> </div>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent <SwitchComponent
active={false} active={false}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.sms')}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'> <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-sm text-xs'> <div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')} {t('setting.notification_announcement')}
</div> </div>
<div className='flex xl:gap-4 gap-2'> <div className='flex xl:gap-4 gap-2'>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent <SwitchComponent
active={true} active={true}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.email')}
</div>
</div> </div>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent <SwitchComponent
active={false} active={false}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.sms')}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className='flex xl:flex-row flex-col gap-6 text-sm mt-6'> <div className='flex xl:flex-row flex-col gap-6 text-sm mt-6'>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'> <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-sm text-xs'> <div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')} {t('setting.notification_announcement')}
</div> </div>
<div className='flex xl:gap-4 gap-2'> <div className='flex xl:gap-4 gap-2'>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent <SwitchComponent
active={true} active={true}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.email')}
</div>
</div> </div>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent <SwitchComponent
active={false} active={false}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.sms')}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'> <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-sm text-xs'> <div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')} {t('setting.notification_announcement')}
</div> </div>
<div className='flex xl:gap-4 gap-2'> <div className='flex xl:gap-4 gap-2'>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent <SwitchComponent
active={true} active={true}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.email')}
</div>
</div> </div>
<div className='flex gap-1 text-xs items-center text-description'> <div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent <SwitchComponent
active={false} active={false}
onChange={() => { }} onChange={() => { }}
/> />
<div>
{t('setting.sms')}
</div>
</div> </div>
</div> </div>
</div> </div>
src/shared/Header.tsx
+4 -4
View File
@@ -26,14 +26,14 @@ const Header: FC = () => {
<HambergerMenu size={24} color='black' /> <HambergerMenu size={24} color='black' />
</div> </div>
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */} {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
<div className='flex xl:gap-6 gap-3 items-center'> <div className='flex xl:gap-6 gap-4 items-center'>
<Element3 color='black' className='xl:size-[18px] size-4' /> <Element3 color='black' className='xl:size-[18px] size-[17px]' />
<Link to={Pages.wallet}> <Link to={Pages.wallet}>
<Wallet className='xl:size-[18px] size-4' color='black' /> <Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link> </Link>
<Notifications /> <Notifications />
<div className='flex gap-2 items-center'> <div className='flex gap-2 items-center'>
<div className='size-7 rounded-full bg-description overflow-hidden'> <div className='size-6 rounded-full bg-description overflow-hidden'>
<Link to={Pages.profile}> <Link to={Pages.profile}>
<img src={AvatarImage} className='size-full object-cover' /> <img src={AvatarImage} className='size-full object-cover' />
</Link> </Link>