From 347cbe2e9ee91b1cd1abb76eddcd97e1c5bc47db Mon Sep 17 00:00:00 2001
From: Marcos Kolodny <marcoskolodny@gmail.com>
Date: Tue, 26 Nov 2024 19:14:10 +0100
Subject: [PATCH] Refactor disabled illustrations logic and fix JS errors
 (#1982)

* JS fixes and small refactor

* unused type

* remove warnings

* render snow behind content
---
 .../components/calendar-card.jsx              | 19 ++----
 .../components/corner-layout.jsx              |  4 --
 .../components/navbar.jsx                     |  4 +-
 .../components/progress-grid.jsx              | 13 ++---
 .../advent-calendar-2024/components/score.jsx |  8 ++-
 .../advent-calendar-2024/components/snow.tsx  | 36 ++++--------
 .../static-content/christmas-greetings.jsx    |  3 +-
 .../components/toast-wrapper.jsx              |  3 -
 .../advent-calendar-2024/components/toast.jsx | 18 +++---
 src/pages/advent-calendar-2024/index.jsx      |  6 +-
 .../pages/calendar-view.jsx                   | 58 ++++++++-----------
 .../pages/coming-soon.jsx                     | 19 +-----
 .../advent-calendar-2024/pages/games-view.jsx |  2 +-
 .../pages/progress-view.jsx                   |  1 -
 .../utils/achievement-config.jsx              |  4 +-
 .../utils/content-config.jsx                  | 56 ++++++------------
 .../components/golden-graph.module.css        |  2 +-
 17 files changed, 90 insertions(+), 166 deletions(-)

diff --git a/src/pages/advent-calendar-2024/components/calendar-card.jsx b/src/pages/advent-calendar-2024/components/calendar-card.jsx
index 992e883127..83366fd72e 100644
--- a/src/pages/advent-calendar-2024/components/calendar-card.jsx
+++ b/src/pages/advent-calendar-2024/components/calendar-card.jsx
@@ -22,8 +22,7 @@ const CalendarCard = ({
   content,
   status,
   onEndDay,
-  illustration,
-  illustrationDimmed,
+  Illustration,
   repeatable,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -84,11 +83,7 @@ const CalendarCard = ({
     }
   }
 
-  const IllustrationWrapper = ({
-    illustration,
-    illustrationDimmed,
-    status,
-  }) => {
+  const IllustrationWrapper = ({ Illustration, status }) => {
     return (
       <div
         style={{
@@ -97,7 +92,7 @@ const CalendarCard = ({
           justifyContent: "center",
         }}
       >
-        {status === CARD_STATES.BLOCKED ? illustrationDimmed : illustration}
+        <Illustration disabled={status === CARD_STATES.BLOCKED} />
       </div>
     );
   };
@@ -213,12 +208,8 @@ const CalendarCard = ({
             <StatusIndicator />
           </Stack>
 
-          {(illustration || illustrationDimmed) && (
-            <IllustrationWrapper
-              illustration={illustration}
-              illustrationDimmed={illustrationDimmed}
-              status={status}
-            />
+          {Illustration && (
+            <IllustrationWrapper Illustration={Illustration} status={status} />
           )}
 
           <Inline space="between" alignItems="center">
diff --git a/src/pages/advent-calendar-2024/components/corner-layout.jsx b/src/pages/advent-calendar-2024/components/corner-layout.jsx
index 182e9f96ca..3cd1b641b1 100644
--- a/src/pages/advent-calendar-2024/components/corner-layout.jsx
+++ b/src/pages/advent-calendar-2024/components/corner-layout.jsx
@@ -11,13 +11,9 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { base64Encode } from "../utils/url-encoder";
 import RotatingSVG from "./label-rotate";
 
 const CornerLayout = () => {
-  const navigate = useNavigate();
-  const location = useLocation(); // Get the current location
   const { isLargeDesktop, isTabletOrBigger } = useScreenSize();
   const [isSnackbarOpen, setSnackbarOpen] = useState(false);
   const [showLogo, setShowLogo] = useState(false);
diff --git a/src/pages/advent-calendar-2024/components/navbar.jsx b/src/pages/advent-calendar-2024/components/navbar.jsx
index 43448dad1b..6d85611f0b 100644
--- a/src/pages/advent-calendar-2024/components/navbar.jsx
+++ b/src/pages/advent-calendar-2024/components/navbar.jsx
@@ -17,8 +17,7 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { base64Encode } from "../utils/url-encoder";
+import { useLocation } from "react-router-dom";
 import RotatingSVG from "./label-rotate";
 
 const SheetView = ({ isOpen, onClose }) => {
@@ -100,7 +99,6 @@ const SheetView = ({ isOpen, onClose }) => {
 };
 
 const NavBar = () => {
-  const navigate = useNavigate();
   const location = useLocation(); // Get the current location
   const { isMobile, isTabletOrSmaller } = useScreenSize();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
diff --git a/src/pages/advent-calendar-2024/components/progress-grid.jsx b/src/pages/advent-calendar-2024/components/progress-grid.jsx
index 83eb9c7db7..6fefb7e338 100644
--- a/src/pages/advent-calendar-2024/components/progress-grid.jsx
+++ b/src/pages/advent-calendar-2024/components/progress-grid.jsx
@@ -16,7 +16,7 @@ import { CARD_STATES } from "../utils/constants"; // Importa CARD_STATES si no l
 import contentByDate from "../utils/content-config"; // Asegúrate de importar tu configuración de contenido
 
 // IllustrationWrapper Component
-const IllustrationWrapper = ({ illustration, illustrationDimmed, status }) => {
+const IllustrationWrapper = ({ Illustration, status }) => {
   return (
     <Align x="center">
       <div
@@ -28,7 +28,7 @@ const IllustrationWrapper = ({ illustration, illustrationDimmed, status }) => {
           height: "100px",
         }}
       >
-        {status === CARD_STATES.BLOCKED ? illustrationDimmed : illustration}
+        <Illustration disabled={status === CARD_STATES.BLOCKED} />
       </div>
     </Align>
   );
@@ -62,7 +62,7 @@ const ProgressGrid = ({ completedDays }) => {
     <Grid columns={isMobile ? 2 : 4} gap={isMobile ? 8 : 24}>
       {calendarDays.map((day) => {
         // Accede a la ilustración para cada día
-        const illustration = contentByDate[day.date]?.illustration;
+        const Illustration = contentByDate[day.date]?.Illustration;
 
         // Determina el estado del día
         const status = isDayCompleted(day.dayNumber)
@@ -88,12 +88,9 @@ const ProgressGrid = ({ completedDays }) => {
                 </div>
 
                 {/* Renderiza la ilustración usando IllustrationWrapper */}
-                {illustration ? (
+                {Illustration ? (
                   <IllustrationWrapper
-                    illustration={illustration}
-                    illustrationDimmed={
-                      contentByDate[day.date]?.illustrationDimmed
-                    }
+                    Illustration={Illustration}
                     status={status}
                   />
                 ) : (
diff --git a/src/pages/advent-calendar-2024/components/score.jsx b/src/pages/advent-calendar-2024/components/score.jsx
index 19ec188b02..c921414a3c 100644
--- a/src/pages/advent-calendar-2024/components/score.jsx
+++ b/src/pages/advent-calendar-2024/components/score.jsx
@@ -1,6 +1,5 @@
 import {
   IconAlarmClockFilled,
-  Inline,
   skinVars,
   Tag,
   Text4,
@@ -16,7 +15,12 @@ const Score = ({ score, time, timeRunning, movements, isFinal }) => {
           style={{ display: "inline-flex", flexDirection: "column", gap: 8 }}
         >
           <Text5>Your final score is</Text5>
-          <DecorationPatty size={128} text={score} stroke="0.75" color={skinVars.colors.brand} />
+          <DecorationPatty
+            size={128}
+            text={score}
+            stroke="0.75"
+            color={skinVars.colors.brand}
+          />
         </div>
       ) : (
         <div style={{ display: "flex", gap: 24 }}>
diff --git a/src/pages/advent-calendar-2024/components/snow.tsx b/src/pages/advent-calendar-2024/components/snow.tsx
index c5c0d134e8..ddbf11d834 100644
--- a/src/pages/advent-calendar-2024/components/snow.tsx
+++ b/src/pages/advent-calendar-2024/components/snow.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Snowfall from "react-snowfall";
 import { useEffect, useState } from "react";
 import snowflakeSrc1 from "../assets/decorations/snowflake-1.svg";
@@ -49,31 +48,16 @@ const Snow = () => {
     };
   }, []);
 
-  return isTabletOrSmaller ? (
-    <Snowfall
-      style={{
-        position: "fixed",
-        zIndex: "9999999",
-      }}
-      color="#EEF0FB"
-      radius={[30, 30]}
-      speed={[1.0, 2.0]} // Velocidad de los copos
-      snowflakeCount={8}
-      images={images} // Pasamos las imágenes cargadas al componente
-    />
-  ) : (
-    <Snowfall
-      style={{
-        position: "fixed",
-        zIndex: "9999999",
-      }}
-      color="#EEF0FB"
-      radius={[50, 50]}
-      speed={[1.0, 2.0]} // Velocidad de los copos
-      snowflakeCount={20}
-      images={images} // Pasamos las imágenes cargadas al componente
-    />
-  );
+  return Snowfall({
+    style: {
+      position: "fixed",
+    },
+    color: "#EEF0FB",
+    radius: isTabletOrSmaller ? [30, 30] : [50, 50],
+    speed: [1, 2], // Velocidad de los copos
+    snowflakeCount: isTabletOrSmaller ? 8 : 20,
+    images, // Pasamos las imágenes cargadas al componente
+  });
 };
 
 export default Snow;
diff --git a/src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx b/src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx
index 11fb3d0779..6f55fca1ea 100644
--- a/src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx
+++ b/src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx
@@ -3,10 +3,11 @@ import ContentWrapper from "../content-wrapper";
 import contentByDate from "../../utils/content-config";
 
 const ChristmasGreetings = () => {
+  const FinalIllustration = contentByDate["2024-12-25"].Illustration;
   return (
     <ContentWrapper textAlign={"center"}>
       <Stack space={52}>
-        <div>{contentByDate["2024-12-25"].illustration}</div>
+        <FinalIllustration />
         <Text5>
           Thanks for joining us these past days.
           <br></br>
diff --git a/src/pages/advent-calendar-2024/components/toast-wrapper.jsx b/src/pages/advent-calendar-2024/components/toast-wrapper.jsx
index 0bc6e4bb44..0f6386a807 100644
--- a/src/pages/advent-calendar-2024/components/toast-wrapper.jsx
+++ b/src/pages/advent-calendar-2024/components/toast-wrapper.jsx
@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import Toast from "./toast"; // Assuming your Toast component is already implemented
 import { Stack, useScreenSize } from "@telefonica/mistica";
 
@@ -17,8 +16,6 @@ const ToastWrapper = ({ toasts, removeToast }) => {
     >
       <Stack space={8}>
         {toasts.map((toast, index) => {
-          const scaleValue = 1 - index * 0.2;
-
           return (
             <Toast
               id={toast.id}
diff --git a/src/pages/advent-calendar-2024/components/toast.jsx b/src/pages/advent-calendar-2024/components/toast.jsx
index ba0c9d8967..a3d8a44e47 100644
--- a/src/pages/advent-calendar-2024/components/toast.jsx
+++ b/src/pages/advent-calendar-2024/components/toast.jsx
@@ -36,16 +36,16 @@ const Toast = ({
     }
   };
 
-  const startHideTimeout = () => {
-    clearHideTimeout();
-    timeoutRef.current = setTimeout(() => {
-      setFadeOut(true); // Trigger fade-out before setting visible to false
-      onClose?.(); // Trigger onClose callback to remove toast
-    }, duration);
-  };
-
   // Handle visibility change when hovered or not
   useEffect(() => {
+    const startHideTimeout = () => {
+      clearHideTimeout();
+      timeoutRef.current = setTimeout(() => {
+        setFadeOut(true); // Trigger fade-out before setting visible to false
+        onClose?.(); // Trigger onClose callback to remove toast
+      }, duration);
+    };
+
     const handleTimeout = () => {
       if (!isHovered) {
         setTimeout(startHideTimeout, delay); // Delay before auto-dismissing
@@ -57,7 +57,7 @@ const Toast = ({
     handleTimeout();
 
     return () => clearHideTimeout(); // Cleanup timeout on unmount
-  }, [isHovered, delay, duration]);
+  }, [isHovered, delay, duration, onClose]);
 
   useEffect(() => {
     if (fadeOut) {
diff --git a/src/pages/advent-calendar-2024/index.jsx b/src/pages/advent-calendar-2024/index.jsx
index e1ecd191e4..fa8b05ae00 100644
--- a/src/pages/advent-calendar-2024/index.jsx
+++ b/src/pages/advent-calendar-2024/index.jsx
@@ -4,9 +4,9 @@ import CalendarView from "./pages/calendar-view";
 
 import { RELEASE_DATE } from "./utils/constants";
 
-const AdventCalendar2024 = () => {
-  const targetDate = new Date(RELEASE_DATE);
+const targetDate = new Date(RELEASE_DATE);
 
+const AdventCalendar2024 = () => {
   const [isReleased, setIsReleased] = useState(false);
 
   useLayoutEffect(() => {
@@ -23,7 +23,7 @@ const AdventCalendar2024 = () => {
     }, timeToRelease);
 
     return () => clearTimeout(timeout);
-  }, [targetDate]);
+  }, []);
 
   if (!isReleased) {
     return <ComingSoonPage targetDate={targetDate.toLocaleString()} />;
diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
index 4bb4f55600..feb5a25e4e 100644
--- a/src/pages/advent-calendar-2024/pages/calendar-view.jsx
+++ b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
@@ -18,8 +18,7 @@ import {
   skinVars,
   useScreenSize,
 } from "@telefonica/mistica";
-import { useMemo, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import DecorationPatty from "../assets/decorations/decoration-patty.jsx";
 import DecorationSnake from "../assets/decorations/decoration-snake.jsx";
 import CalendarCard from "../components/calendar-card";
@@ -36,7 +35,6 @@ import { calendarDays } from "../utils/calendar-config.jsx";
 import { CARD_STATES } from "../utils/constants";
 import contentByDate from "../utils/content-config";
 import { updateCompletedDays } from "../utils/state-manager";
-import { base64Encode } from "../utils/url-encoder.jsx";
 
 const CalendarView = () => {
   const { isMobile } = useScreenSize();
@@ -123,26 +121,20 @@ const CalendarView = () => {
     }
   };
 
-  const calendarItems = useMemo(() => {
-    return calendarDays.map(({ date, dayOfWeek }) => (
-      <CalendarCard
-        key={date}
-        DateString={date}
-        DayOfWeek={dayOfWeek}
-        eventName={contentByDate[date]?.title}
-        eventDescription={contentByDate[date]?.description}
-        content={contentByDate[date]?.content}
-        status={getDayStatus(date)} // Ensure status is updated based on availability
-        onEndDay={() => markDayAsCompleted(date)}
-        illustration={contentByDate[date]?.illustration}
-        illustrationDimmed={
-          contentByDate[date]?.illustrationDimmed ||
-          contentByDate[date]?.illustration
-        }
-        repeatable={contentByDate[date]?.repeatable}
-      />
-    ));
-  }, [completedDays, availableDays, calendarDays]);
+  const calendarItems = calendarDays.map(({ date, dayOfWeek }) => (
+    <CalendarCard
+      key={date}
+      DateString={date}
+      DayOfWeek={dayOfWeek}
+      eventName={contentByDate[date]?.title}
+      eventDescription={contentByDate[date]?.description}
+      content={contentByDate[date]?.content}
+      status={getDayStatus(date)} // Ensure status is updated based on availability
+      onEndDay={() => markDayAsCompleted(date)}
+      Illustration={contentByDate[date]?.Illustration}
+      repeatable={contentByDate[date]?.repeatable}
+    />
+  ));
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
   const SheetView = ({ isOpen, onClose }) => {
@@ -228,11 +220,11 @@ const CalendarView = () => {
   };
 
   return (
-    <>
+    <ResponsiveLayout>
       <Snow />
-      <CornerLayout />
-      <NavBar />
-      <ResponsiveLayout>
+      <div style={{ position: "relative", zIndex: 1 }}>
+        <CornerLayout />
+        <NavBar />
         <Box paddingY={42}>
           <Stack space={48}>
             <GridLayout
@@ -277,7 +269,7 @@ const CalendarView = () => {
                       textColor={skinVars.colors.textPrimary}
                       textSize={16}
                       easterEgg={true}
-                    ></DecorationPatty>
+                    />
                   </Inline>
                   <DecorationSnake width={isMobile ? "100%" : 371.84} />
                 </Stack>
@@ -297,7 +289,7 @@ const CalendarView = () => {
                   </Text4>
                 </Stack>
               }
-            ></GridLayout>
+            />
 
             <Carousel
               initialActiveItem={initialActiveDay}
@@ -311,10 +303,10 @@ const CalendarView = () => {
             </ButtonPrimary>
           </Stack>
         </Box>
-      </ResponsiveLayout>
-      <SheetView isOpen={isSheetOpen} onClose={() => setIsSheetOpen(false)} />
-      <ToastWrapper toasts={toasts} removeToast={removeToast} />
-    </>
+        <SheetView isOpen={isSheetOpen} onClose={() => setIsSheetOpen(false)} />
+        <ToastWrapper toasts={toasts} removeToast={removeToast} />
+      </div>
+    </ResponsiveLayout>
   );
 };
 
diff --git a/src/pages/advent-calendar-2024/pages/coming-soon.jsx b/src/pages/advent-calendar-2024/pages/coming-soon.jsx
index e163bc9dbf..e79a7eae7a 100644
--- a/src/pages/advent-calendar-2024/pages/coming-soon.jsx
+++ b/src/pages/advent-calendar-2024/pages/coming-soon.jsx
@@ -6,7 +6,6 @@ import {
   Text5,
   Stack,
   Text,
-  Text2,
   Timer,
 } from "@telefonica/mistica";
 import { useState } from "react";
@@ -19,17 +18,6 @@ const ComingSoonPage = () => {
   const endTimestamp = new Date(defaultTargetDate).getTime();
   const [isSnackbarOpen, setSnackbarOpen] = useState(false);
 
-  const copyToClipboard = () => {
-    const url = window.location.href; // Get the current URL
-
-    navigator.clipboard
-      .writeText(url)
-      .then(() => {
-        setSnackbarOpen(true); // Show the snackbar on success
-      })
-      .catch((err) => console.error("Failed to copy: ", err));
-  };
-
   return (
     <>
       <ResponsiveLayout variant="inverse">
@@ -59,7 +47,7 @@ const ComingSoonPage = () => {
                 weight="bold"
               >
                 Something special is on its way...
-              </Text> 
+              </Text>
               <div
                 style={{
                   maxWidth: 600,
@@ -69,10 +57,7 @@ const ComingSoonPage = () => {
                   margin: "auto",
                 }}
               >
-                <Text5>
-                  Keep an eye out!
-                
-                </Text5>
+                <Text5>Keep an eye out!</Text5>
               </div>
               <div
                 style={{
diff --git a/src/pages/advent-calendar-2024/pages/games-view.jsx b/src/pages/advent-calendar-2024/pages/games-view.jsx
index cda02df063..977caa17fe 100644
--- a/src/pages/advent-calendar-2024/pages/games-view.jsx
+++ b/src/pages/advent-calendar-2024/pages/games-view.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import MemoryGame from "../components/games/memory";
 import WordleGame from "../components/games/wordle";
 import CandyCrush from "../components/games/candy";
-import { Box, ButtonPrimary } from "@telefonica/mistica";
+import { Box } from "@telefonica/mistica";
 import SimonSays from "../components/games/simon";
 
 const GamesView = ({ game }) => {
diff --git a/src/pages/advent-calendar-2024/pages/progress-view.jsx b/src/pages/advent-calendar-2024/pages/progress-view.jsx
index da45d9f825..8102c79df6 100644
--- a/src/pages/advent-calendar-2024/pages/progress-view.jsx
+++ b/src/pages/advent-calendar-2024/pages/progress-view.jsx
@@ -17,7 +17,6 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import { IconCard, IconInvader } from "../assets/icons/icons";
 import Achievement from "../components/achievement";
 import CornerLayout from "../components/corner-layout.jsx";
diff --git a/src/pages/advent-calendar-2024/utils/achievement-config.jsx b/src/pages/advent-calendar-2024/utils/achievement-config.jsx
index e35d625070..13ef34b880 100644
--- a/src/pages/advent-calendar-2024/utils/achievement-config.jsx
+++ b/src/pages/advent-calendar-2024/utils/achievement-config.jsx
@@ -1,6 +1,5 @@
 import {
   IconArrowUpDownFilled,
-  IconBeachUmbrellaFilled,
   IconBellFilled,
   IconCalendarFilled,
   IconEyeFilled,
@@ -9,7 +8,6 @@ import {
   IconVideoCameraFilled,
 } from "@telefonica/mistica";
 import { updateAchievements } from "./state-manager";
-import { TOTAL_CALENDAR_DAYS } from "./constants";
 
 const CHRISTMAS_DAY = "25";
 
@@ -114,7 +112,7 @@ const hasConsecutiveDays = (dates) => {
 };
 
 const isChristmasDay = (date) => {
-  const [_, month, day] = date.split("-");
+  const [, , day] = date.split("-");
   return day === CHRISTMAS_DAY;
 };
 
diff --git a/src/pages/advent-calendar-2024/utils/content-config.jsx b/src/pages/advent-calendar-2024/utils/content-config.jsx
index 7965ec31d0..99a3009846 100644
--- a/src/pages/advent-calendar-2024/utils/content-config.jsx
+++ b/src/pages/advent-calendar-2024/utils/content-config.jsx
@@ -1,4 +1,4 @@
-import { Placeholder, skinVars, Text1, Text3 } from "@telefonica/mistica";
+import { skinVars, Text1, Text3 } from "@telefonica/mistica";
 
 import {
   Illustration02,
@@ -53,8 +53,7 @@ import {
 const contentByDate = {
   "2024-12-02": {
     repeatable: false,
-    illustration: <Illustration02 />,
-    illustrationDimmed: <Illustration02 disabled />,
+    Illustration: Illustration02,
     content: ({ closeModal }) => <CandyCrush onFinish={closeModal} />,
     title: "“Brandy” crush",
     description:
@@ -62,8 +61,7 @@ const contentByDate = {
   },
   "2024-12-03": {
     repeatable: false,
-    illustration: <Illustration03 />,
-    illustrationDimmed: <Illustration03 disabled />,
+    Illustration: Illustration03,
     content: ({ closeModal }) => (
       <EmojiMovies movies={set1Movies} onFinish={closeModal} />
     ),
@@ -73,8 +71,7 @@ const contentByDate = {
   },
   "2024-12-04": {
     repeatable: true,
-    illustration: <Illustration04 />,
-    illustrationDimmed: <Illustration04 disabled />,
+    Illustration: Illustration04,
     content: (
       <GuessWhat questions={componentQuestions} quizType={"component"} />
     ),
@@ -85,8 +82,7 @@ const contentByDate = {
   "2024-12-05": {
     repeatable: false,
     content: ({ closeModal }) => <WordleGame onFinish={closeModal} />,
-    illustration: <Illustration05 />,
-    illustrationDimmed: <Illustration05 disabled />,
+    Illustration: Illustration05,
     title: "Wordle",
     description: (
       <>
@@ -158,16 +154,14 @@ const contentByDate = {
   },
   "2024-12-06": {
     repeatable: true,
-    illustration: <Illustration06 />,
-    illustrationDimmed: <Illustration06 disabled />,
+    Illustration: Illustration06,
     content: <AdventCalendarHistory />,
     title: "Did you know...",
     description: "Where the tradition Christmas calendar comes from?",
   },
   "2024-12-09": {
     repeatable: true,
-    illustration: <Illustration09 />,
-    illustrationDimmed: <Illustration09 disabled />,
+    Illustration: Illustration09,
     content: <Horoscope />,
     title: "Mística zodiac sign",
     description:
@@ -175,8 +169,7 @@ const contentByDate = {
   },
   "2024-12-10": {
     repeatable: false,
-    illustration: <Illustration10 />,
-    illustrationDimmed: <Illustration10 disabled />,
+    Illustration: Illustration10,
     content: ({ closeModal }) => (
       <GuessTheComponent questions={guessComponentSet1} onFinish={closeModal} />
     ),
@@ -186,8 +179,7 @@ const contentByDate = {
   },
   "2024-12-11": {
     repeatable: false,
-    illustration: <Illustration11 />,
-    illustrationDimmed: <Illustration11 disabled />,
+    Illustration: Illustration11,
     content: ({ closeModal }) => (
       <HigherOrLower set={1} data={HigherLowerdataSet1} onFinish={closeModal} />
     ),
@@ -197,8 +189,7 @@ const contentByDate = {
   },
   "2024-12-12": {
     repeatable: true,
-    illustration: <Illustration12 />,
-    illustrationDimmed: <Illustration12 disabled />,
+    Illustration: Illustration12,
     content: <GuessWhat questions={iconQuestions} quizType={"icon"} />,
     title: "Icon Match",
     description:
@@ -206,8 +197,7 @@ const contentByDate = {
   },
   "2024-12-13": {
     repeatable: false,
-    illustration: <Illustration13 />,
-    illustrationDimmed: <Illustration13 disabled />,
+    Illustration: Illustration13,
     content: ({ closeModal }) => <MemoryGame onFinish={closeModal} />,
     title: "Memory cards",
     description: (
@@ -224,8 +214,7 @@ const contentByDate = {
 
   "2024-12-16": {
     repeatable: false,
-    illustration: <Illustration16 />,
-    illustrationDimmed: <Illustration16 disabled />,
+    Illustration: Illustration16,
     content: ({ closeModal }) => (
       <EmojiMovies movies={set2Movies} onFinish={closeModal} />
     ),
@@ -235,8 +224,7 @@ const contentByDate = {
   },
   "2024-12-17": {
     repeatable: false,
-    illustration: <Illustration17 />,
-    illustrationDimmed: <Illustration17 disabled />,
+    Illustration: Illustration17,
     content: ({ closeModal }) => (
       <HigherOrLower set={2} data={HigherLowerdataSet2} onFinish={closeModal} />
     ),
@@ -246,8 +234,7 @@ const contentByDate = {
   },
   "2024-12-18": {
     repeatable: false,
-    illustration: <Illustration18 />,
-    illustrationDimmed: <Illustration18 disabled />,
+    Illustration: Illustration18,
     content: ({ closeModal }) => (
       <GuessTheComponent
         set={2}
@@ -261,16 +248,14 @@ const contentByDate = {
   },
   "2024-12-19": {
     repeatable: true,
-    illustration: <Illustration19 />,
-    illustrationDimmed: <Illustration19 disabled />,
+    Illustration: Illustration19,
     content: <TopContributors />,
     title: "Top contributors",
     description: "A big thank you to our contributors!",
   },
   "2024-12-20": {
     repeatable: false,
-    illustration: <Illustration20 />,
-    illustrationDimmed: <Illustration20 disabled />,
+    Illustration: Illustration20,
     content: ({ closeModal }) => <SimonSays onFinish={closeModal} />,
     title: "Simon says",
     description: (
@@ -291,8 +276,7 @@ const contentByDate = {
   },
   "2024-12-23": {
     repeatable: true,
-    illustration: <Illustration23 />,
-    illustrationDimmed: <Illustration23 disabled />,
+    Illustration: Illustration23,
     content: <ChristmasMovies />,
     title: "Popcorn Night",
     description:
@@ -300,8 +284,7 @@ const contentByDate = {
   },
   "2024-12-24": {
     repeatable: true,
-    illustration: <Illustration24 />,
-    illustrationDimmed: <Illustration24 disabled />,
+    Illustration: Illustration24,
     content: <MusicLists />,
     title: "Tired of carols?",
     description:
@@ -309,8 +292,7 @@ const contentByDate = {
   },
   "2024-12-25": {
     repeatable: true,
-    illustration: <Illustration25 />,
-    illustrationDimmed: <Illustration25 disabled />,
+    Illustration: Illustration25,
     content: <ChristmasGreetings />,
     title: "Happy Christmas!",
     description: "And a merry new year",
diff --git a/src/pages/wrapped2023/components/golden-graph.module.css b/src/pages/wrapped2023/components/golden-graph.module.css
index 18bd897eff..c6e7648fcc 100644
--- a/src/pages/wrapped2023/components/golden-graph.module.css
+++ b/src/pages/wrapped2023/components/golden-graph.module.css
@@ -14,7 +14,7 @@
 .bar {
   background-color: var(--yellow);
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   position: relative;
 }