fix responsive all page & add modal doctor id & page dashboard aside

components/home/FrequentSearches.js

@@ -12,7 +12,8 @@ function FrequentSearches() {
                             <Button
                                 variant="contained"
                                 color="secondary"
-                                className="!py-2 !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7]"
+                                className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] 
+                                !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7]"
                             >{item}</Button>
                         </li>
                     ))}

components/home/index.js

@@ -7,7 +7,7 @@ import FrequentSearches from "./FrequentSearches";
 
 function HomePage() {
     return (
-        <div className="bg-banner-home !bg-bottom !bg-no-repeat !bg-cover">
+        <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover">
             <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
                 <div>
                     <p

components/home/search/index.js

@@ -43,10 +43,16 @@ function SearchBar() {
                 <p>جستجو</p>
             </Button>
             <Button
-                className="!flex lg:!hidden !rounded-[4px] !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
-                !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !p-2.5"
+                className="!flex lg:!hidden !rounded-[4px] 
+                !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
+                !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] 
+                !min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px]
+                !min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px] 
+                !gap-2.5 !p-2.5"
             >
-                <SearchD />
+                <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
+                    <SearchD />
+                </div>
             </Button>
         </ButtonGroup>
     )

components/home/search/modal/index.js

@@ -49,7 +49,11 @@ function ModalSearchCity() {
                 <div className="min-w-[20px] min-h-[20px] hidden md:flex">
                     <Location />
                 </div>
-                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">
+                <p
+                    className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
+                    ${selected.first && selected.second ? '' : ''}`}
+                >
                     {selected.first && selected.second ?
                         `${selected.first} | ${selected.second}` : 'انتخاب شهر'}
                 </p>