Layout fixes

Telefonica · Nov 27, 2024 · 6e72269 · 6e72269
1 parent 347cbe2
commit 6e72269
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 52 deletions.
diff --git a/src/pages/advent-calendar-2024/components/calendar-card.jsx b/src/pages/advent-calendar-2024/components/calendar-card.jsx
@@ -8,7 +8,7 @@ import {
   Text,
   Text5,
 } from "@telefonica/mistica";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { IconCompleted, IconLockOpen } from "../assets/icons/icons";
 import { CARD_STATES } from "../utils/constants";
 import styles from "./calendar-card.module.css";
@@ -26,36 +26,37 @@ const CalendarCard = ({
   repeatable,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const dialogRef = useRef(null);
   const day = new Date(DateString).getDate();
   const today = new Date().getDate();
-  const isRepeatable =
-    repeatable &&
-    DateString === today &&
-    (status === CARD_STATES.AVAILABLE || status === CARD_STATES.COMPLETED);
+  const isRepeatable = repeatable && DateString === today;
 
   const handleClick = () => {
     if (status === CARD_STATES.AVAILABLE || isRepeatable) {
-      dialogRef.current.showModal();
-      document.body.style.overflow = "hidden";
+      setIsModalOpen((prev) => !prev); // Toggle modal state
     }
   };
 
+  // Effect to show the modal when `isModalOpen` is true
+  useEffect(() => {
+    if (isModalOpen) {
+      dialogRef.current?.showModal();
+    }
+  }, [isModalOpen]);
+
   const handleEndDay = () => {
     dialogRef.current.close();
-    document.body.style.overflow = "auto";
     onEndDay(); // Notify the parent to update the state
   };
 
   const handleCloseModal = () => {
     dialogRef.current.close(); // Close the modal
-    document.body.style.overflow = "auto";
     onEndDay(); // Notify the parent to update the state
   };
 
   const handleDismiss = () => {
     dialogRef.current.close();
-    document.body.style.overflow = "auto";
   };
 
   let cardStatusStyles;
@@ -155,7 +156,7 @@ const CalendarCard = ({
         style={{
           cursor:
             status !== CARD_STATES.AVAILABLE && !isRepeatable
-              ? "not-allowed"
+              ? "inherit"
               : "pointer",
 
           padding: 24,
@@ -202,7 +203,6 @@ const CalendarCard = ({
               }
             >
               {DayOfWeek}
-              {isRepeatable && "isRepeatable"}
             </Text5>
 
             <StatusIndicator />
@@ -236,20 +236,22 @@ const CalendarCard = ({
           </Inline>
         </Stack>
       </button>
-      <ModalView
-        ref={dialogRef}
-        day={day}
-        dayOfWeek={DayOfWeek}
-        title={eventName}
-        description={eventDescription}
-        content={
-          typeof content === "function"
-            ? content({ closeModal: handleCloseModal })
-            : content
-        }
-        onClose={handleEndDay}
-        onCancel={repeatable ? handleEndDay : handleDismiss}
-      />
+      {isModalOpen && (
+        <ModalView
+          ref={dialogRef}
+          day={day}
+          dayOfWeek={DayOfWeek}
+          title={eventName}
+          description={eventDescription}
+          content={
+            typeof content === "function"
+              ? content({ closeModal: handleCloseModal })
+              : content
+          }
+          onClose={handleEndDay}
+          onCancel={repeatable ? handleEndDay : handleDismiss}
+        />
+      )}
     </>
   );
 };

diff --git a/src/pages/advent-calendar-2024/components/game-bar.jsx b/src/pages/advent-calendar-2024/components/game-bar.jsx
@@ -15,6 +15,7 @@ const GameBar = ({ score, time, timeRunning, movements }) => {
         left: isMobile ? 0 : 56,
         top: isMobile ? 0 : 56,
         marginBottom: isMobile ? 24 : 0,
+        zIndex: 2,
       }}
     >
       <Score

diff --git a/src/pages/advent-calendar-2024/components/modal-view.jsx b/src/pages/advent-calendar-2024/components/modal-view.jsx
@@ -11,8 +11,11 @@ import {
 import { DecorationSnake } from "../assets/decorations/decorations";
 
 const ModalView = forwardRef(
-  ({ title, day, dayOfWeek, description, content, onCancel, repeatable }, ref) => {
-    const { isMobile } = useScreenSize();
+  (
+    { title, day, dayOfWeek, description, content, onCancel, repeatable },
+    ref
+  ) => {
+    const { isMobile, isLargeDesktop } = useScreenSize();
 
     return (
       <dialog
@@ -55,35 +58,28 @@ const ModalView = forwardRef(
               position: "relative",
               display: "flex",
               flexDirection: "column",
-              justifyContent: "center",
+              justifyContent: "space-around",
+              gap: isMobile ? "16px" : "56px",
             }}
           >
-            <div
-              style={{
-                position: isMobile ? "inherit" : "absolute",
-                paddingBottom: "16px",
-                top: isMobile ? 0 : 64,
-                left: isMobile ? 0 : 64,
-              }}
-            >
-              <Stack space={0}>
-                <Text
-                  color={skinVars.colors.brand}
-                  size={isMobile ? 24 : 60}
-                  weight="bold"
-                >
-                  {day}
-                </Text>
-                <Text4 color={skinVars.colors.brand} weight="medium">
-                  {dayOfWeek}
-                </Text4>{" "}
-              </Stack>
-            </div>
+            <Stack space={0}>
+              <Text
+                color={skinVars.colors.brand}
+                size={isMobile ? 24 : 60}
+                weight="bold"
+              >
+                {day}
+              </Text>
+              <Text4 color={skinVars.colors.brand} weight="medium">
+                {dayOfWeek}
+              </Text4>{" "}
+            </Stack>
+
             <Stack space={24}>
               <Text
                 color={skinVars.colors.brand}
-                size={isMobile ? 32 : 80}
-                lineHeight={isMobile ? 34 : 80}
+                size={isMobile ? 32 : isLargeDesktop ? 80 : 64}
+                lineHeight={isMobile ? 34 : isLargeDesktop ? 80 : 64}
                 weight="bold"
               >
                 {title}