From dd73ca7746d064a6f02742db13d593e6d66139cd Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Fri, 10 Jan 2025 10:44:51 +0330
Subject: [PATCH] other services

---
 src/pages/service/MyServices.tsx    | 34 +++++++++++++++--------------
 src/pages/service/OtherServices.tsx | 33 +++++++++++++++-------------
 src/shared/Footer.tsx               | 12 +++++-----
 src/shared/Header.tsx               |  3 +--
 4 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/pages/service/MyServices.tsx b/src/pages/service/MyServices.tsx
index 99ea95e..e62a96e 100644
--- a/src/pages/service/MyServices.tsx
+++ b/src/pages/service/MyServices.tsx
@@ -18,8 +18,8 @@ const MyServices: FC = () => {
                     {t('service.my_service')}
                 </div>
 
-                <div className='mt-8 flex  gap-6 items-center'>
-                    <div className='w-[300px]'>
+                <div className='mt-8 flex  xl:gap-6 gap-4 items-center'>
+                    <div className='xl:w-[300px] w-full'>
                         <Input
                             variant='search'
                             placeholder={t('service.search')}
@@ -27,18 +27,20 @@ const MyServices: FC = () => {
                         />
                     </div>
 
-                    <Select
-                        items={[
-                            { label: t('all'), value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        className='max-w-[100px]'
-                    />
+                    <div>
+                        <Select
+                            items={[
+                                { label: t('all'), value: 'all' },
+                                { label: 'Active', value: 'active' },
+                                { label: 'Inactive', value: 'inactive' },
+                            ]}
+                            className='max-w-[100px]'
+                        />
+                    </div>
                 </div>
 
-                <div className='flex gap-6 items-center mt-8'>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
+                    <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'>
@@ -48,7 +50,7 @@ const MyServices: FC = () => {
                             <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                         </div>
                     </div>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                    <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'>
@@ -58,7 +60,7 @@ const MyServices: FC = () => {
                             <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                         </div>
                     </div>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                    <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'>
@@ -68,7 +70,7 @@ const MyServices: FC = () => {
                             <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                         </div>
                     </div>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                    <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'>
@@ -80,7 +82,7 @@ const MyServices: FC = () => {
                     </div>
                 </div>
             </div>
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white rounded-3xl overflow-hidden relative'>
+            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white hidden xl:block rounded-3xl overflow-hidden relative'>
                 <img
                     src={BannerImage}
                     className='w-full backdrop-blur-[100px] h-[550px] object-cover'
diff --git a/src/pages/service/OtherServices.tsx b/src/pages/service/OtherServices.tsx
index 3786524..e4b0f87 100644
--- a/src/pages/service/OtherServices.tsx
+++ b/src/pages/service/OtherServices.tsx
@@ -70,11 +70,11 @@ const OtherServices: FC = () => {
                     <TitleLine title={t('service.selected_danak')} />
                 </div>
 
-                <div className='flex flex-wrap gap-6 items-center mt-8'>
-                    <div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
+                <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
+                    <div className='flex-1 min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
                         <div className='flex gap-2 items-center'>
-                            <div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
-                            <div>
+                            <div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
+                            <div className='xl:text-base text-sm'>
                                 دی منو
                             </div>
                         </div>
@@ -96,10 +96,10 @@ const OtherServices: FC = () => {
                             </Button>
                         </div>
                     </div>
-                    <div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
+                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
                         <div className='flex gap-2 items-center'>
-                            <div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
-                            <div>
+                            <div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
+                            <div className='xl:text-base text-sm'>
                                 دی منو
                             </div>
                         </div>
@@ -121,10 +121,10 @@ const OtherServices: FC = () => {
                             </Button>
                         </div>
                     </div>
-                    <div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
+                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
                         <div className='flex gap-2 items-center'>
-                            <div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
-                            <div>
+                            <div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
+                            <div className='xl:text-base text-sm'>
                                 دی منو
                             </div>
                         </div>
@@ -146,15 +146,16 @@ const OtherServices: FC = () => {
                             </Button>
                         </div>
                     </div>
+                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
                 </div>
 
                 <div className='w-full mt-8'>
                     <TitleLine title={t('service.other_services')} />
                 </div>
 
-                <div className='flex w-full gap-6 items-center mt-8'>
-                    <div className='flex gap-6 items-center mt-8'>
-                        <div className='flex-1 bg-white rounded-3xl py-4 px-6'>
+                <div className='flex w-full gap-6 items-center'>
+                    <div className='flex w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
+                        <div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
                             <div className='flex justify-between items-center'>
                                 <ServiceSection
                                 />
@@ -169,7 +170,7 @@ const OtherServices: FC = () => {
                             </div>
 
                         </div>
-                        <div className='flex-1 bg-white rounded-3xl py-4 px-6'>
+                        <div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
                             <div className='flex justify-between items-center'>
                                 <ServiceSection
                                 />
@@ -188,9 +189,11 @@ const OtherServices: FC = () => {
 
                 </div>
 
+                <div className='h-16 xl:hidden'></div>
+
 
             </div>
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit rounded-3xl overflow-hidden relative'>
+            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
                 <img
                     src={RobotImage}
                     className='w-full backdrop-blur-[100px] h-[550px] object-cover'
diff --git a/src/shared/Footer.tsx b/src/shared/Footer.tsx
index ba6fa8b..25ced0b 100644
--- a/src/shared/Footer.tsx
+++ b/src/shared/Footer.tsx
@@ -9,8 +9,8 @@ const Footer: FC = () => {
     return (
         <div className='xl:hidden'>
             <div className='h-[60px] '></div>
-            <div className='fixed bottom-2 right-4 left-4 bg-white h-[60px] rounded-2xl flex justify-between items-center px-5'>
-                <div className='text-description flex flex-col items-center gap-1.5'>
+            <div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
+                <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                     <Home2
                         className='size-5'
                         color='#8C90A3'
@@ -19,7 +19,7 @@ const Footer: FC = () => {
                         {t('footer.home')}
                     </div>
                 </div>
-                <div className='text-description flex flex-col items-center gap-1.5'>
+                <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                     <Element4
                         className='size-5'
                         color='#8C90A3'
@@ -29,7 +29,7 @@ const Footer: FC = () => {
                     </div>
                 </div>
 
-                <div className='text-description flex flex-col items-center gap-1.5'>
+                <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                     <div className='bg-white p-1 rounded-full -mt-7'>
                         <div className='bg-black flex justify-center items-center size-10 rounded-full'>
                             <Element3
@@ -42,7 +42,7 @@ const Footer: FC = () => {
                         {t('footer.my_services')}
                     </div>
                 </div>
-                <div className='text-description flex flex-col items-center gap-1.5'>
+                <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                     <NotificationStatus
                         className='size-5'
                         color='#8C90A3'
@@ -51,7 +51,7 @@ const Footer: FC = () => {
                         {t('footer.announcements')}
                     </div>
                 </div>
-                <div className='text-description flex flex-col items-center gap-1.5'>
+                <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                     <Messages3
                         className='size-5'
                         color='#8C90A3'
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
index 5b9dc53..e7e73fe 100644
--- a/src/shared/Header.tsx
+++ b/src/shared/Header.tsx
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import Notifications from '../pages/notification/Notification'
-import LogoImage from '../assets/images/logo.svg'
 import { useSharedStore } from './store/sharedStore'
 
 const Header: FC = () => {
@@ -26,7 +25,7 @@ const Header: FC = () => {
             <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                 <HambergerMenu size={24} color='black' />
             </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'>
                 <Element3 color='black' className='xl:size-[18px] size-4' />
                 <Link to={Pages.wallet}>