From e2670408fc0ea6902f38c240a31dd42ea1053208 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Fri, 10 Jan 2025 11:07:17 +0330
Subject: [PATCH] modal add new accesbility

---
 src/components/DefaulModal.tsx                |  7 +++---
 .../home/components/BoxNewAccessbility.tsx    | 22 ++++++++++++++-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/DefaulModal.tsx b/src/components/DefaulModal.tsx
index c4bf07d..0344049 100644
--- a/src/components/DefaulModal.tsx
+++ b/src/components/DefaulModal.tsx
@@ -26,14 +26,15 @@ const DefaulModal: FC<Props> = (props: Props) => {
             {
                 props.open && (
                     <Fragment>
-                        <div style={{ maxWidth: props.width }} className='justify-center items-center flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none max-w-xl mx-auto'>
-                            <div className='relative h-full  flex items-center sm:h-auto w-full my-6 p-2'>
-                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
+                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                            <div className='relative xl:h-full h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
+                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
 
 
                                     {
                                         props.isHeader && props.title_header &&
                                         <div className='pb-6 border-b border-white border-opacity-20'>
+                                            <div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
                                             <HeaderModal close={props.close} label={props.title_header} />
                                         </div>
                                     }
diff --git a/src/pages/home/components/BoxNewAccessbility.tsx b/src/pages/home/components/BoxNewAccessbility.tsx
index 45e23a6..d98efeb 100644
--- a/src/pages/home/components/BoxNewAccessbility.tsx
+++ b/src/pages/home/components/BoxNewAccessbility.tsx
@@ -4,6 +4,7 @@ import DefaulModal from '../../../components/DefaulModal'
 import { useTranslation } from 'react-i18next'
 import Input from '../../../components/Input'
 import Select from '../../../components/Select'
+import SwitchComponent from '../../../components/Switch'
 
 const BoxNewAccessbility: FC = () => {
 
@@ -77,7 +78,7 @@ const BoxNewAccessbility: FC = () => {
                     </div>
 
                     <div className='mt-6 flex flex-wrap gap-6'>
-                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
+                        <div className='flex-1 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                             <div className='flex gap-4'>
                                 <div className='size-10 rounded-xl bg-red-300'></div>
                                 <div>
@@ -90,10 +91,13 @@ const BoxNewAccessbility: FC = () => {
                                 </div>
                             </div>
                             <div>
-                                {/* <input type='checkbox' /> */}
+                                <SwitchComponent
+                                    active
+                                    onChange={() => { }}
+                                />
                             </div>
                         </div>
-                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
+                        <div className='flex-1 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                             <div className='flex gap-4'>
                                 <div className='size-10 rounded-xl bg-blue-300'></div>
                                 <div>
@@ -106,10 +110,13 @@ const BoxNewAccessbility: FC = () => {
                                 </div>
                             </div>
                             <div>
-                                {/* <input type='checkbox' /> */}
+                                <SwitchComponent
+                                    active
+                                    onChange={() => { }}
+                                />
                             </div>
                         </div>
-                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
+                        <div className='flex-1 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                             <div className='flex gap-4'>
                                 <div className='size-10 rounded-xl bg-green-300'></div>
                                 <div>
@@ -122,7 +129,10 @@ const BoxNewAccessbility: FC = () => {
                                 </div>
                             </div>
                             <div>
-                                {/* <input type='checkbox' /> */}
+                                <SwitchComponent
+                                    active
+                                    onChange={() => { }}
+                                />
                             </div>
                         </div>
                         <div className='flex-1 min-w-[40%]'></div>