add tooltip + fix tablet

Telefonica · Nov 29, 2024 · e67bbac · e67bbac
1 parent 0243af9
commit e67bbac
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 20 deletions.
diff --git a/src/pages/advent-calendar-2024/components/navbar.jsx b/src/pages/advent-calendar-2024/components/navbar.jsx
@@ -17,6 +17,7 @@ import {
   Text3,
   Text5,
   TextLink,
+  Tooltip,
   skinVars,
   useScreenSize,
 } from "@telefonica/mistica";
@@ -206,26 +207,47 @@ const NavBar = () => {
           <div></div>
 
           <Inline space={isTabletOrSmaller ? 24 : 64} alignItems="center">
-            <Text3
-              medium
-              decoration={
-                isCurrentPage("/advent-calendar-2024/claim-your-gift")
-                  ? "underline"
-                  : "none"
-              }
-            >
-              <TextLink
-                style={{ color: skinVars.colors.textPrimary }}
-                {...(isGiftEnabled
-                  ? {
-                      to: "/advent-calendar-2024/claim-your-gift",
+            {!isGiftEnabled ? (
+              <Tooltip
+                delay={false}
+                target={
+                  <Text3
+                    medium
+                    decoration={
+                      isCurrentPage("/advent-calendar-2024/claim-your-gift")
+                        ? "underline"
+                        : "none"
                     }
-                  : { onPress: () => {} })}
-                disabled={!isGiftEnabled}
+                  >
+                    <TextLink
+                      style={{ color: skinVars.colors.textPrimary }}
+                      onPress={() => {}}
+                      disabled
+                    >
+                      Claim your gift
+                    </TextLink>
+                  </Text3>
+                }
+                description="You will be able to claim the gift on December 25."
+              />
+            ) : (
+              <Text3
+                medium
+                decoration={
+                  isCurrentPage("/advent-calendar-2024/claim-your-gift")
+                    ? "underline"
+                    : "none"
+                }
               >
-                Claim your gift
-              </TextLink>
-            </Text3>
+                <TextLink
+                  style={{ color: skinVars.colors.textPrimary }}
+                  to={"/advent-calendar-2024/claim-your-gift"}
+                  disabled={!isGiftEnabled}
+                >
+                  Claim your gift
+                </TextLink>
+              </Text3>
+            )}
 
             <Text3
               medium

diff --git a/src/pages/advent-calendar-2024/pages/claim-your-gift.jsx b/src/pages/advent-calendar-2024/pages/claim-your-gift.jsx
@@ -673,7 +673,7 @@ const PosterSvg = ({
 };
 
 const ClaimYourGift = () => {
-  const { isMobile } = useScreenSize();
+  const { isMobile, isTabletOrSmaller } = useScreenSize();
   const [selectedIllustrationKey, setSelectedIllustrationKey] = useState(
     illustrationKeys[0]
   );
@@ -806,7 +806,7 @@ const ClaimYourGift = () => {
             width={isMobile ? `calc(min(341px, 100%))` : 371.84}
           />
         </>
-        <Box width={isMobile ? "100%" : 586}>
+        <Box width={isTabletOrSmaller ? "100%" : 586}>
           <Text3 regular>
             One last surprise from the Mística advent calendar! You can generate
             a poster with your favorite illustration and download it to print