Fix home title responsive

Telefonica · Nov 23, 2024 · 85a9178 · 85a9178
1 parent 66a16a2
commit 85a9178
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
@@ -9,6 +9,7 @@ import {
   GridLayout,
   TextLink,
   skinVars,
+  useScreenSize,
 } from "@telefonica/mistica";
 import CalendarCard from "../components/calendar-card";
 import NavBar from "../components/navbar";
@@ -32,6 +33,8 @@ const CalendarView = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
+  const { isMobile } = useScreenSize();
+
   // Load completed days from local storage on initial mount
   const [completedDays, setCompletedDays] = useState(() => {
     const savedDays = localStorage.getItem("completedDays");
@@ -171,17 +174,17 @@ const CalendarView = () => {
                     style={{ display: "flex", alignItems: "center", gap: 16 }}
                   >
                     <Text
-                      size={96}
-                      lineHeight={96}
+                      size={isMobile ? 56 : 96}
+                      lineHeight={isMobile ? 64 : 96}
                       weight="medium"
-                      letterSpacing={-3.5}
+                      letterSpacing={isMobile ? -1.5 : -3.5}
                     >
                       Calendar
                     </Text>
                     <DecorationPatty
                       text="24"
-                      size={128}
-                      stroke="0.75"
+                      size={isMobile ? 64 : 128}
+                      stroke={isMobile ? 1.5 : 0.75}
                       color={skinVars.colors.error}
                       textColor={skinVars.colors.textPrimary}
                       textSize={16}