From f915c411ee142be31098228cf3ed8a1387cdbd3e Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Wed, 20 Nov 2024 23:16:37 +0100 Subject: [PATCH 1/4] add lottie animation --- .../assets/decorations/decoration-snake.jsx | 197 ++++++++++++++++-- 1 file changed, 183 insertions(+), 14 deletions(-) diff --git a/src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx b/src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx index c7ebb1701e..e692748e86 100644 --- a/src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx +++ b/src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx @@ -1,19 +1,188 @@ -import { skinVars } from "@telefonica/mistica"; +import Lottie from "lottie-react"; const DecorationSnake = () => ( - - - + ); export default DecorationSnake; From d0ac332f8516f1b887b7bc56d29ab963f4a6022a Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Wed, 20 Nov 2024 23:38:35 +0100 Subject: [PATCH 2/4] snake in home --- src/pages/advent-calendar-2024/pages/calendar-view.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx index 2573d3f86d..b26b15b834 100644 --- a/src/pages/advent-calendar-2024/pages/calendar-view.jsx +++ b/src/pages/advent-calendar-2024/pages/calendar-view.jsx @@ -21,6 +21,7 @@ import { import { CARD_STATES, TOTAL_CALENDAR_DAYS } from "../utils/constants"; import ToastWrapper from "../components/toast-wrapper"; import contentByDate from "../utils/content-config"; +import DecorationSnake from "../assets/decorations/decoration-snake.jsx"; const CalendarView = () => { const location = useLocation(); @@ -163,6 +164,8 @@ const CalendarView = () => { Calendar '24 + + Date: Wed, 20 Nov 2024 23:44:15 +0100 Subject: [PATCH 3/4] esthetic minor changes --- .../components/label-rotate.jsx | 68 ++++--------------- .../pages/calendar-view.jsx | 3 +- 2 files changed, 15 insertions(+), 56 deletions(-) diff --git a/src/pages/advent-calendar-2024/components/label-rotate.jsx b/src/pages/advent-calendar-2024/components/label-rotate.jsx index 5e22db193d..0cee6be20f 100644 --- a/src/pages/advent-calendar-2024/components/label-rotate.jsx +++ b/src/pages/advent-calendar-2024/components/label-rotate.jsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useScreenSize } from "@telefonica/mistica"; +import { skinVars, useScreenSize } from "@telefonica/mistica"; import styles from "./label-rotate.module.css"; const RotatingSVG = ({ fill }) => { @@ -17,100 +17,59 @@ const RotatingSVG = ({ fill }) => { width={isMobile ? 48 : 96} height={isMobile ? 48 : 96} viewBox="0 0 96 96" - fill={fill ?? "#000"} + fill={skinVars.colors.brand} > - + - - - - + + + + - + - - + + - - - + + + { d="M47.269 47.6913C47.269 47.6913 50.1504 47.0021 51.3186 49.8771L53.463 55.6388C53.9557 56.9627 54.9659 58.0409 56.2716 58.6363C57.5772 59.2316 59.0712 59.2954 60.4248 58.8135C63.2435 57.8099 64.6968 54.7619 63.6711 52.0051L59.7595 41.4969C58.7336 38.7401 55.6168 37.3185 52.7977 38.3216C51.2453 38.8739 50.0351 40.0884 49.5107 41.6203L47.269 47.6913Z M54.3136 58.327L54.304 58.3331C54.2563 58.2984 53.9509 58.0641 53.3865 57.4014C53.1294 57.0353 52.9157 56.6469 52.7489 56.2422L50.5036 50.8058C50.1147 49.9539 49.4673 49.5121 48.5326 49.4573C48.0398 49.4393 47.5462 49.4462 47.0542 49.478L45.8522 52.3861C45.3343 53.6391 45.4028 55.022 46.0426 56.2305C46.6823 57.439 47.841 58.3742 49.2635 58.8302C50.9433 59.3697 52.8132 59.1834 54.3136 58.327Z M36.1637 41.8097L32.3231 52.2682C31.3156 55.0118 32.7429 58.0455 35.511 59.0441C38.2791 60.0427 41.3399 58.6281 42.3474 55.8844L46.1879 45.426C47.1954 42.6823 45.7682 39.6487 43.0001 38.65C40.2319 37.6514 37.1712 39.0661 36.1637 41.8097Z" - fill="black" /> diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx index b26b15b834..5afc2da22a 100644 --- a/src/pages/advent-calendar-2024/pages/calendar-view.jsx +++ b/src/pages/advent-calendar-2024/pages/calendar-view.jsx @@ -7,6 +7,7 @@ import { Stack, Carousel, Inline, + Text4, } from "@telefonica/mistica"; import CalendarCard from "../components/calendar-card"; import NavBar from "../components/navbar"; @@ -158,7 +159,7 @@ const CalendarView = () => { fill="black" /> - Mística Advent + Mística Advent From 19fa951e9241a65e41d3fa89626546e3873b4298 Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Thu, 21 Nov 2024 00:00:47 +0100 Subject: [PATCH 4/4] fix rotation in logo --- .../components/label-rotate.jsx | 78 +++++-------------- 1 file changed, 20 insertions(+), 58 deletions(-) diff --git a/src/pages/advent-calendar-2024/components/label-rotate.jsx b/src/pages/advent-calendar-2024/components/label-rotate.jsx index 0cee6be20f..c87b09de10 100644 --- a/src/pages/advent-calendar-2024/components/label-rotate.jsx +++ b/src/pages/advent-calendar-2024/components/label-rotate.jsx @@ -14,63 +14,29 @@ const RotatingSVG = ({ fill }) => { > - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + { width={36} height={36} > - +