completed search page, some chasnges buttons in sequence

src/components/Compass.tsx

@@ -6,7 +6,7 @@ interface CompassProps {
 
 function Compass({ imgStyle }: CompassProps) {
   return (
-    <div className="select-none">
+    <div>
       <img
         src="/images/map/compass.png"
         className={clsx(
@@ -16,7 +16,7 @@ function Compass({ imgStyle }: CompassProps) {
       />
       <img
         src="/images/map/compass-mobile.png"
-        className="min-w-10 w-[12.345vw] pointer-events-none absolute left-3 bottom-3 md:hidden"
+        className="min-w-10 w-10 pointer-events-none absolute left-4 bottom-4 md:hidden"
       />
     </div>
   );

src/components/DisclaimerButton.tsx

@@ -8,11 +8,11 @@ export default function BottomButton() {
 
   return (
     <Button
-      size="medium"
+      size="small"
       variant="secondary"
       onClick={() => setModal(<DisclaimerModal />)}
     >
-      <span className="w-5 h-5 2xl:w-[1.389vw] 2xl:h-[1.389vw]">
+      <span className="w-4 h-4 2xl:w-[1.111vw] 2xl:h-[1.111vw]">
         <DisclaimerIcon />
       </span>
       <span>Disclaimer</span>

src/components/FullScreenButton.tsx

@@ -30,14 +30,8 @@ function FullScreenButton({
   if (isMobileSafari) return null;
 
   return (
-    <Button
-      onlyIcon
-      size="small"
-      variant="secondary"
-      className="absolute 2xl:top-[2.222vw] 2xl:right-[2.222vw] top-4 right-4"
-      onClick={handleClick}
-    >
-      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
+    <Button onlyIcon size="small" variant="secondary" onClick={handleClick}>
+      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
         {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
       </span>
     </Button>

src/components/PrivacyPolicyButton.tsx

@@ -13,7 +13,7 @@ export default function PrivacyPolicyButton() {
       onlyIcon
       onClick={() => setModal(<PrivacyPolicyModal />)}
     >
-      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
         <QuestionIcon />
       </span>
     </Button>

src/components/SearchFilters.tsx

@@ -15,6 +15,7 @@ import Select from "./ui/Select";
 import { AnimatePresence, motion } from "motion/react";
 import CloseIcon from "./icons/CloseIcon";
 import Project from "../types/Project";
+import FiltersIcon from "./icons/FiltersIcon";
 
 export interface Filters {
   unitTypes: string[];
@@ -206,16 +207,16 @@ function SearchFilters({
     <>
       {inModal && (
         <div
-          className="fixed inset-0 2xl:top-[4.444vw] bg-[#0D1922]/40 cursor-pointer"
+          className="fixed inset-0 z-20 bg-[#0D1922]/40 cursor-pointer"
           onClick={handleClose}
         />
       )}
       <div
         ref={ref}
         className={clsx(
-          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4",
+          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] md:rounded-t-3xl 2xl:space-y-[2.222vw] space-y-8",
           inModal &&
-            "fixed 2xl:top-[calc(2.778vw+4.444vw)] 2xl:left-[2.778vw] 2xl:right-[2.778vw] 2xl:rounded-[1.667vw] rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24"
+            "fixed z-20 max-md:pb-0 max-md:pt-6 2xl:top-[calc(2.778vw+4.444vw)] max-md:w-full 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:rounded-[1.667vw] md:max-2xl:rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24 max-md:bottom-0 max-md:overflow-auto max-md:!rounded-t-3xl max-md:max-h-[calc(100dvh-40px)]"
         )}
       >
         {inModal && (
@@ -229,22 +230,38 @@ function SearchFilters({
             </div>
           </Button>
         )}
-        <div className="2xl:space-y-[1.111vw] space-y-4">
-          <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
-            Search
-          </p>
-          {project && (
-            <ProjectSelect
-              projects={projects}
-              onSelect={handleSelectProject}
-              defaultProject={projects.find(({ title }) => title === project)!}
-            />
-          )}
+        <div className="2xl:space-y-[2.222vw] space-y-8">
+          <div className="2xl:space-y-[1.111vw] space-y-4">
+            <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
+              {inModal ? "Filters" : "Search"}
+            </p>
+            <div className={clsx(!inModal && "max-md:hidden")}>
+              {project && (
+                <ProjectSelect
+                  projects={projects}
+                  onSelect={handleSelectProject}
+                  defaultProject={
+                    projects.find(({ title }) => title === project)!
+                  }
+                />
+              )}
+            </div>
+          </div>
+          <hr
+            className={clsx(
+              "2xl:h-[0.069vw] h-px border-[#E2E2DC]",
+              !inModal && "max-md:hidden"
+            )}
+          />
         </div>
-        <hr className="2xl:h-[0.069vw] h-px border-[#E2E2DC]" />
         {filters && (
           <>
-            <div className="2xl:space-y-[0.556vw] space-y-2">
+            <div
+              className={clsx(
+                "2xl:space-y-[0.556vw] space-y-2",
+                !inModal && "max-md:hidden"
+              )}
+            >
               <p className="text-s text-[#0D1922]/70">Apartment type</p>
               <UnitTypesSelect
                 unitTypes={filters.unitTypes}
@@ -252,7 +269,12 @@ function SearchFilters({
                 defaultSelected={unitTypes}
               />
             </div>
-            <div className="grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-4">
+            <div
+              className={clsx(
+                "grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-6",
+                !inModal && "max-md:hidden"
+              )}
+            >
               <MultiRangeSlider
                 min={filters?.cost[0]}
                 max={filters?.cost[1]}
@@ -287,9 +309,15 @@ function SearchFilters({
                 onSelect={handleSelectView}
               />
             </div>
-            <div className="flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4">
+            <div
+              className={clsx(
+                "flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4 gap-2",
+                inModal &&
+                  "max-md:flex-col max-md:sticky max-md:shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] max-md:rounded-t-2xl max-md:-m-4 max-md:p-4 bottom-0 bg-white"
+              )}
+            >
               {inModal ? (
-                <Button onClick={applyFilters}>
+                <Button onClick={applyFilters} className="max-md:w-full">
                   Show{" "}
                   <AnimatePresence mode="wait">
                     {count !== undefined && (
@@ -313,18 +341,49 @@ function SearchFilters({
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}
                       exit={{ opacity: 0 }}
-                      className="text-[#00BED7] text-s"
+                      className={clsx(
+                        "text-[#00BED7] text-s",
+                        !inModal && "max-md:hidden"
+                      )}
                     >
                       {count} Apartments found
                     </motion.p>
                   )}
                 </AnimatePresence>
               )}
-              <Button variant="secondary" onClick={resetFilters}>
+              <Button
+                variant="secondary"
+                className={clsx(
+                  "hidden",
+                  !inModal && "max-md:flex !justify-center flex-1 !bg-[#F3F3F2]"
+                )}
+                onClick={() => setInModal(true)}
+              >
+                <div className="w-5 h-5">
+                  <FiltersIcon />
+                </div>
+                <p className="text-sm leading-0">Filters</p>
+              </Button>
+              <Button
+                variant="secondary"
+                onlyIcon={!inModal && innerWidth < 768}
+                onClick={resetFilters}
+                className={clsx(
+                  !inModal && "max-md:bg-[#F3F3F2]",
+                  "max-md:!transition-none"
+                )}
+              >
                 <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
                   <RestartIcon />
                 </span>
-                <p className="text-s">Reset filters</p>
+                <p
+                  className={clsx(
+                    "text-s max-md:w-full",
+                    !inModal && "max-md:hidden"
+                  )}
+                >
+                  Reset filters
+                </p>
               </Button>
             </div>
           </>

src/components/SequenceSlider.tsx

@@ -10,7 +10,6 @@ import Compass from "./Compass";
 import { useNavigate } from "react-router";
 import InfoIcon from "./icons/InfoIcon";
 import FullScreenButton from "./FullScreenButton";
-import BottomButton from "./DisclaimerButton";
 import PrivacyPolicyButton from "./PrivacyPolicyButton";
 import DisclaimerButton from "./DisclaimerButton";
 
@@ -167,9 +166,8 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
       </AnimatePresence>
       {imageLoaded === FRAME_COUNT && (
         <>
-          <div className="absolute flex 2xl:gap-[0.556vw] gap-2 2xl:left-[1.667vw] 2xl:top-[1.667vw] left-4 top-4">
+          <div className="absolute flex 2xl:gap-[0.556vw] justify-between gap-2 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:top-[2.222vw] max-w-full md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-6 left-4 right-4 top-4">
             <Button
-              onlyIcon
               variant="secondary"
               className="!bg-white"
               onClick={() => navigate("/")}
@@ -177,54 +175,52 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
               <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <ArrowLeftIcon />
               </span>
+              <span className="max-md:hidden">Map</span>
             </Button>
             <Button variant="secondary" size="small" className="max-md:hidden">
               <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <InfoIcon />
               </span>
-              <span>About Complex</span>
+              <span>About</span>
             </Button>
           </div>
           <p className="absolute text-xl font-bold text-white -translate-x-1/2 select-none left-1/2 top-9 max-md:hidden">
             ROVE Home Marasi Drive
           </p>
 
-          <FullScreenButton
-            isFullScreen={isFullScreen}
-            onFullScreenChange={setIsFullScreen}
-            onClick={handleFullScreenClick}
-          />
-
           <Button
             onlyIcon
             variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:left-[1.111vw] left-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4 !bg-[#0D1922]/40 backdrop-blur-md"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("prev")}
           >
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
               <ArrowLeftIcon />
             </span>
           </Button>
           <Button
             onlyIcon
             variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:right-[1.111vw] right-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4 !bg-[#0D1922]/40 backdrop-blur-md"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("next")}
           >
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
               <ArrowRightIcon />
             </span>
           </Button>
-          <div className="max-md:hidden">
-            <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
-            <div className="absolute right-[28px] bottom-[32px] flex gap-2">
-              <DisclaimerButton />
-              <PrivacyPolicyButton />
-            </div>
+          <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
+          <div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] 2xl:left-[2.222vw] max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:bottom-6 md:max-2xl:left-6 md:max-2xl:right-6 bottom-4 left-4 right-4">
+            <DisclaimerButton />
+            <PrivacyPolicyButton />
+            <FullScreenButton
+              isFullScreen={isFullScreen}
+              onFullScreenChange={setIsFullScreen}
+              onClick={handleFullScreenClick}
+            />
           </div>
         </>
       )}

src/components/UnitTypesSelect.tsx

@@ -19,7 +19,7 @@ function UnitTypesSelect({
   useEffect(() => onSelect(selectedUnitTypes), [selectedUnitTypes]);
 
   return (
-    <div className="flex 2xl:gap-[0.556vw] gap-2">
+    <div className="flex flex-wrap 2xl:gap-[0.556vw] gap-2">
       {unitTypes.map((unitType) => (
         <p
           key={unitType}

src/components/icons/SortIcon.tsx

@@ -0,0 +1,14 @@
+function SortIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 7h6.533M5 12h10M5 17h14"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default SortIcon;

src/components/ui/Select.tsx

@@ -38,7 +38,7 @@ function Select({
       )}
       <button
         className={clsx(
-          "2xl:px-[1.111vw] px-4 2xl:py-[0.833vw] py-3 2xl:rounded-[0.833vw] rounded-xl 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] w-full text-left flex items-center justify-between group",
+          "2xl:px-[1.111vw] px-4 2xl:py-[0.833vw] py-3 2xl:rounded-[0.833vw] rounded-xl 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] w-full text-left flex items-center justify-between group bg-white",
           isShow ? " ring-[#00BED7]" : "ring-[#E2E2DC]"
         )}
         onClick={() => setIsShow(!isShow)}