refactoring

src/components/ButtomPanel.tsx

@@ -35,7 +35,7 @@ const ButtomPanel = () => {
       <div className="p-6">
         <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
           <img
-            src="./images/masterplan/compass.png"
+            src="../images/masterplan/compass.png"
             alt="compass"
             className=""
           />

src/components/complexPage/ComplexTopPanel.tsx

@@ -10,6 +10,7 @@ import HelpModal from "../modals/HelpModal";
 import MasterplanFilters from "../modals/MasterplanFilters";
 import InfoIcon from "../icons/InfoIcon";
 import useFullScreen from "../../store/useFullScreen";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 
 const ComplexTopPanel = () => {
   const [isFullMode, setIsFullMode] = useState(false);
@@ -41,7 +42,11 @@ const ComplexTopPanel = () => {
   };
 
   return (
-    <div className="absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12">
+    <div
+      className={`absolute ${
+        isFullMode ? "" : "top-[62px]"
+      } left-0 z-20 w-full p-4 grid grid-cols-12`}
+    >
       <div className="flex gap-2 col-span-3">
         <Button
           icon={<LeftArrowSliderIcon />}
@@ -56,12 +61,28 @@ const ComplexTopPanel = () => {
         />
         <Button icon={<InfoIcon />} buttonType="primary" text="About Complex" />
       </div>
+      <div className="flex flex-col col-start-6 col-span-2 text-white text-center">
+        <h2 className="font-bold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
+          ROVE Home Marasi Drive
+        </h2>
+        <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
+          Select a wing
+        </p>
+      </div>
       <div className="flex gap-2 col-span-2 col-start-11 justify-end">
-        <Button
-          buttonType="fab"
-          icon={<ResizeIcon />}
-          onClick={handleOnFullScreenClick}
-        />
+        {isFullMode ? (
+          <Button
+            buttonType="fab"
+            icon={<ActiveResizeIcon />}
+            onClick={handleOnFullScreenClick}
+          />
+        ) : (
+          <Button
+            buttonType="fab"
+            icon={<ResizeIcon />}
+            onClick={handleOnFullScreenClick}
+          />
+        )}
         <Button
           buttonType="fab"
           icon={<HintIcon />}

src/components/icons/ActiveResizeIcon.tsx

@@ -0,0 +1,21 @@
+function ActiveResizeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        stroke="#0D1922"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M2.875 12.625h4.5m0 0v4.5m0-4.5L2.5 17.5m15-15l-4.875 4.875m0 0v-4.5m0 4.5h4.5"
+      ></path>
+    </svg>
+  );
+}
+
+export default ActiveResizeIcon;

src/components/masterplanPage/TopPanel.tsx

@@ -5,6 +5,7 @@ import Button from "../Button";
 import HintIcon from "../icons/HintIcon";
 import ResizeIcon from "../icons/ResizeIcon";
 import HelpModal from "../modals/HelpModal";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 
 const TopPanel = () => {
   const [isFullMode, setIsFullMode] = useState(false);
@@ -27,12 +28,24 @@ const TopPanel = () => {
   };
 
   return (
-    <div className="absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2">
-      <Button
-        buttonType="fab"
-        icon={<ResizeIcon />}
-        onClick={handleOnFullScreenClick}
-      />
+    <div
+      className={`absolute ${
+        isFullMode ? "" : "top-[62px]"
+      }  left-0 z-20 w-full p-4 flex justify-end gap-2`}
+    >
+      {isFullMode ? (
+        <Button
+          buttonType="fab"
+          icon={<ActiveResizeIcon />}
+          onClick={handleOnFullScreenClick}
+        />
+      ) : (
+        <Button
+          buttonType="fab"
+          icon={<ResizeIcon />}
+          onClick={handleOnFullScreenClick}
+        />
+      )}
       <Button
         buttonType="fab"
         icon={<HintIcon />}

src/pages/Company.tsx

@@ -7,7 +7,7 @@ import Footer from "../components/Footer";
 const Company = () => {
   return (
     <section className={`xl:pt-16 pt-10 font-usual ${isMobile ? "pt-24" : ""}`}>
-      <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4">
+      <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4 pt-10 xl:pt-16">
         IRTH is a privately held real estate investment platform part of a large
         local family conglomerate from Dubai
       </h1>

src/pages/Complex.tsx

@@ -6,7 +6,7 @@ const Complex = () => {
   return (
     <div className="overflow-hidden h-screen w-screen">
       <ComplexTopPanel />
-      <div className="bg-black h-full w-full"></div>
+      <div className="bg-blue-500 h-full w-full"></div>
       {/* <SequenceSlider path={""} /> */}
       <ButtomPanel />
     </div>