Updates to starting zoom screen and height of geo controles

JackCrawfordRobertson · Apr 17, 2024 · 42d39d7 · 42d39d7
1 parent f739b06
commit 42d39d7
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 40 deletions.
diff --git a/src/pages/GeoHeatmap/GeoControls.js b/src/pages/GeoHeatmap/GeoControls.js
@@ -107,7 +107,7 @@ const GeoControls = ({cycleSVG, disabled, isOpen, onOpacityChange}) => {
                                 elevation={4}
                                 sx={{
                                     padding: "10px",
-                                    height: isMobile ? "90vh" : "auto", // Dynamic width based on device
+                                    height: isMobile ? "auto" : "auto", // Dynamic width based on device
                                     display: "flex",
                                     flexDirection: "column",
                                     zIndex: 1,

diff --git a/src/pages/StartingZoom/ComponentSections/AboutSection.js b/src/pages/StartingZoom/ComponentSections/AboutSection.js
@@ -22,8 +22,8 @@ const AboutSection = ({ onNext, onButtonClick }) => {
                 <p>
                     By transforming dense water case studies from the Levant into accessible, design-driven narratives,
                     Maya sets a new standard for environmental communication. With its proven success and positive
-                    feedback from initial tests, Maya is poised for expansion. Our vision is to empower specialists and
-                    stakeholders across regions, turning critical data into meaningful action. Join us on this journey
+                    feedback from initial beta tests, Maya is ready for further expansion. Our vision is to empower specialists and
+                    stakeholders across regions, turning critical data into meaningful and accessible actions. Join us on this journey
                     to illuminate paths toward resilience and sustainability, one insight at a time.
                 </p>
                 <button

diff --git a/src/pages/StartingZoom/ComponentSections/ActionSection.js b/src/pages/StartingZoom/ComponentSections/ActionSection.js
@@ -1,18 +1,30 @@
-import React from "react";
+import React, {useEffect} from "react";
 import Button from "@mui/material/Button";
 
 const ActionSection = ({onZoom, onOtherAction}) => {
+    useEffect(() => {
+        const setCustomVH = () => {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty("--vh", `${vh}px`);
+        };
+
+        setCustomVH();
+        window.addEventListener("resize", setCustomVH);
+
+        return () => window.removeEventListener("resize", setCustomVH);
+    }, []);
+
     const handleLaunch = () => {
-        onZoom(); // Trigger the zoom functionality.
+        onZoom();
         if (typeof onOtherAction === "function") {
-            onOtherAction(); // Only call onOtherAction if it's a function
+            onOtherAction();
         }
     };
 
     return (
-        <div className="Main__container">
-            <div className="Main">
-                <div style={{marginBottom: "40px"}}>
+        <div className="Main__container" style={{height: "100vh", maxHeight: "calc(var(--vh, 1vh) * 100)"}}>
+            <div className="Main" style={{overflowY: "auto", padding: "1rem"}}>
+                <div style={{marginBottom: "20px"}}>
                     <h1>Launch Maya</h1>
                     <p>
                         Explore, compare and enhance your understanding of water scarcity and the impacts of climate
@@ -27,26 +39,24 @@ const ActionSection = ({onZoom, onOtherAction}) => {
                         specifically targeting water usage across localities most at risk throughout the region.
                     </p>
                     <Button
-    onClick={handleLaunch}
-    style={{
-        backgroundColor: "#ffffff",
-        color: "#ff0000 !important", // Change text color to red
-        padding: "15px",
-        marginBottom: "20px",
-        border: "none",
-        borderRadius: "5px",
-        cursor: "pointer",
-        fontSize: "16px",
-        fontWeight: "bold",
-        width: "100%",
-    }}
->
-    Launch Baalbek-Hermel
-</Button>
-
+                        onClick={handleLaunch}
+                        style={{
+                            backgroundColor: "#ffffff",
+                            color: "#3DA9DE",
+                            padding: "10px",
+                            marginBottom: "10px",
+                            border: "none",
+                            borderRadius: "5px",
+                            cursor: "pointer",
+                            fontSize: "14px",
+                            fontWeight: "bold",
+                            width: "100%",
+                        }}
+                    >
+                        Launch Baalbek-Hermel
+                    </Button>
                 </div>
 
-                {/* Explore More Section */}
                 <div className="widget">
                     <h2 style={{marginBottom: "0"}}>Al-Qādisiyyah Governorate, Iraq</h2>
                     <h5 style={{marginTop: "0", fontWeight: "500"}}>Last updated on - To Be confirmed</h5>
@@ -56,16 +66,16 @@ const ActionSection = ({onZoom, onOtherAction}) => {
                     </p>
                     <Button
                         onClick={onOtherAction}
-                        disabled={true} // Disable the button functionality
+                        disabled={true}
                         style={{
-                            backgroundColor: "#ededed", // Change background color to a light gray
-                            color: "#c0c0c0", // Change text color to a lighter shade of gray
-                            padding: "15px 30px",
-                            marginBottom: "20px",
+                            backgroundColor: "#ededed",
+                            color: "#c0c0c0",
+                            padding: "10px 20px",
+                            marginBottom: "10px",
                             border: "none",
                             borderRadius: "5px",
-                            cursor: "not-allowed", // Change cursor to indicate not clickable
-                            fontSize: "16px",
+                            cursor: "not-allowed",
+                            fontSize: "14px",
                             fontWeight: "bold",
                             width: "100%",
                         }}
@@ -78,9 +88,4 @@ const ActionSection = ({onZoom, onOtherAction}) => {
     );
 };
 
-// Providing a default prop for onOtherAction
-ActionSection.defaultProps = {
-    onOtherAction: () => {}, // Default does nothing
-};
-
 export default ActionSection;
diff --git a/src/pages/StartingZoom/ComponentSections/MayaIntro.js b/src/pages/StartingZoom/ComponentSections/MayaIntro.js
@@ -50,6 +50,8 @@ const MayaIntro = ({ onNext }) => {
                 color: "#ffffff",
                 alignItems: "center",
                 zIndex: 10000,
+                paddingLeft: "2%",
+                paddingRight: "2%",
             }}
         >
             <motion.h1 variants={childVariants} style={{ fontSize: "5em", marginBottom: "0" }}>Maya</motion.h1>

diff --git a/src/pages/StartingZoom/styles/animations.css b/src/pages/StartingZoom/styles/animations.css
@@ -24,7 +24,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
+    padding-left: 1em;
+    padding-right: 1em;
   }
 
   .heading{