refactoring

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 />}