From 97689dcec2e6b3c77f7c4502d2b2a726118a94ec Mon Sep 17 00:00:00 2001
From: "Ignacio Ceballos (Yayo)" <yceballost@gmail.com>
Date: Thu, 21 Nov 2024 00:58:04 +0100
Subject: [PATCH] snowfall

---
 package.json                                    |   1 +
 .../assets/decorations/snowflake_02.svg         |   3 +++
 .../components/label-rotate.jsx                 |   6 ++----
 .../pages/calendar-view.jsx                     |  16 ++++++++++++++++
 .../advent-calendar-2024/pages/snowflake-2.png  | Bin 0 -> 583 bytes
 .../advent-calendar-2024/pages/snowflake_01.svg |   3 +++
 yarn.lock                                       |   9 ++++++++-
 7 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/advent-calendar-2024/assets/decorations/snowflake_02.svg
 create mode 100644 src/pages/advent-calendar-2024/pages/snowflake-2.png
 create mode 100644 src/pages/advent-calendar-2024/pages/snowflake_01.svg

diff --git a/package.json b/package.json
index 54ca73d721..7f3eed7825 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
+    "react-snowfall": "^2.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/pages/advent-calendar-2024/assets/decorations/snowflake_02.svg b/src/pages/advent-calendar-2024/assets/decorations/snowflake_02.svg
new file mode 100644
index 0000000000..2ed1780616
--- /dev/null
+++ b/src/pages/advent-calendar-2024/assets/decorations/snowflake_02.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6514 0H22.3486V18.5986L9.19727 5.44727L5.44727 9.19727L18.5986 22.3486H0V27.6514H18.5986L5.44727 40.8027L9.19727 44.5527L22.3486 31.4014V50H27.6514V31.4014L40.8027 44.5527L44.5527 40.8027L31.4014 27.6514H50V22.3486H31.4014L44.5527 9.19727L40.8027 5.44727L27.6514 18.5986V0Z" fill="#EEF0FB"/>
+</svg>
diff --git a/src/pages/advent-calendar-2024/components/label-rotate.jsx b/src/pages/advent-calendar-2024/components/label-rotate.jsx
index c87b09de10..a1481c0b11 100644
--- a/src/pages/advent-calendar-2024/components/label-rotate.jsx
+++ b/src/pages/advent-calendar-2024/components/label-rotate.jsx
@@ -14,8 +14,8 @@ const RotatingSVG = ({ fill }) => {
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={isMobile ? 48 : 84}
-        height={isMobile ? 48 : 84}
+        width={isMobile ? 48 : 96}
+        height={isMobile ? 48 : 96}
         viewBox="0 0 96 96"
         fill={skinVars.colors.brand}
       >
@@ -42,8 +42,6 @@ const RotatingSVG = ({ fill }) => {
           className={`${styles.rotationInverse} ${
             isHovered ? styles.slowMo : ""
           }`}
-          width={36}
-          height={36}
         >
           <path d="M59.7639 40.5002L63.6739 51.0102C64.6939 53.7702 63.2439 56.8202 60.4239 57.8202C59.0739 58.3002 57.5839 58.2402 56.2739 57.6402C54.9639 57.0402 53.9539 55.9602 53.4639 54.6402L51.3239 48.8802C50.1539 46.0002 47.2739 46.6902 47.2739 46.6902L49.5139 40.6202C50.0439 39.0902 51.2539 37.8702 52.8039 37.3202C55.6239 36.3202 58.7339 37.7402 59.7639 40.5002ZM52.7543 55.2501C52.9243 55.6601 53.1343 56.0401 53.3943 56.4101L53.3842 56.4001C53.9327 57.0352 54.2312 57.2721 54.2975 57.3248L54.2975 57.3248L54.2975 57.3248L54.3042 57.3301C52.8042 58.1801 50.9443 58.3701 49.2642 57.8301C47.8442 57.3701 46.6842 56.4401 46.0442 55.2301C45.4042 54.0301 45.3342 52.6401 45.8542 51.3901L47.0543 48.4801C47.5443 48.4501 48.0443 48.4401 48.5343 48.4601C49.4643 48.5201 50.1143 48.9601 50.5043 49.8101L52.7543 55.2501ZM36.1641 40.8202C37.1741 38.0802 40.2341 36.6602 43.0041 37.6602C45.7741 38.6602 47.2041 41.7002 46.1941 44.4402L42.3541 54.9002C41.3441 57.6402 38.2841 59.0602 35.5141 58.0602C32.7441 57.0602 31.3141 54.0202 32.3241 51.2802L36.1641 40.8202Z" />
         </g>
diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
index 5afc2da22a..82388bb5e1 100644
--- a/src/pages/advent-calendar-2024/pages/calendar-view.jsx
+++ b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
@@ -23,6 +23,7 @@ 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";
+import Snowfall from "react-snowfall";
 
 const CalendarView = () => {
   const location = useLocation();
@@ -139,8 +140,23 @@ const CalendarView = () => {
     ));
   }, [completedDays, calendarDays]);
 
+  const snowflake1 = document.createElement("img");
+  snowflake1.src = "./snowflake_01.svg";
+  const snowflake2 = document.createElement("img");
+  snowflake2.src = "./snowflake_01.svg";
+
+  const customSnow = [snowflake1, snowflake2];
+
   return (
     <>
+      <Snowfall
+        color="#EEF0FB"
+        radius={[8, 8]}
+        speed={[1.0, 2.0]} // default [1.0, 3.0]
+        snowflakeCount={20}
+        // images={customSnow}
+        // snowflakeCount={Math.floor(Math.random() * (2000 - 200 + 1)) + 200}
+      />
       <NavBar />
       <ResponsiveLayout>
         <Box paddingY={42}>
diff --git a/src/pages/advent-calendar-2024/pages/snowflake-2.png b/src/pages/advent-calendar-2024/pages/snowflake-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdef14a6009eb87543cc7d5072cc2a418ccdb548
GIT binary patch
literal 583
zcmV-N0=WH&P)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0o+MMK~#7F?b?fR
z!Y~W~P=#ZFj=%^Vfn$P>Ks#9J2JHle37{L42}(Cmr6#@0rLiqp@uxJp)4_pJ@~{(}
z7=T2908f-S$VW&N3%HV)A+^Q-fzSbZLwO4Y0^7XfeF(K(1PXD1J!ftVwhvp%XUbOz
z##M-W;?z5JUNjiX>9^~N?clRVHD&~%#>7G#h#<x_wAL`b!{0+K)iCP~r=6q8s!LT-
z*S8|-8EubXc$**5U!Vn}fh0v(F;YktgaspkWJSbcLXaYe7>o~66rshqAXOkV7zbom
z4MKq#n;E=Ug%DyiSq?EFraa;&44BCf4Z0_2+E{~jLI?2Hr8STt2!B6tzWGpFTn%Ii
z(;Vy##2xGh$}`x*ew+*DPWAtW7!h?~CPI|O2oStud#riVC`9<C@%P0sQbgC*cVSfy
zqe1u}y;}J(T0{s^1QUahK(b<D5mHDNj0K^AKuU}ip@l#y47ST%rh*u;K4QVRrtt^L
z)5z-=%1txP<>{|z+J_zGgQLkAw6kSwSFMh*U5oamw_(rdm)=G&>hX!jzi<pNLB!Jc
zCUx~E71+?zRjT3S*)~IXnDKBv@V@xkdm&vxE|3+`+cw9Gr0sn3p|+SIg1}xTk1xRG
V=WoqHG-&_;002ovPDHLkV1hM2^kM)2

literal 0
HcmV?d00001

diff --git a/src/pages/advent-calendar-2024/pages/snowflake_01.svg b/src/pages/advent-calendar-2024/pages/snowflake_01.svg
new file mode 100644
index 0000000000..91a161e97b
--- /dev/null
+++ b/src/pages/advent-calendar-2024/pages/snowflake_01.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#EEF0FB"/>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index 515c0c8e60..4271c77b32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8105,7 +8105,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.1.1:
+react-fast-compare@^3.1.1, react-fast-compare@^3.2.2:
   version "3.2.2"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
@@ -8227,6 +8227,13 @@ react-side-effect@^2.1.0:
   resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz"
   integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
 
+react-snowfall@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-snowfall/-/react-snowfall-2.1.1.tgz#0ad21415b3256af4522b7264b3ad61be5ba22c7d"
+  integrity sha512-29F2U+skZc8uYYYzVP2Ub4mbc5nPH+0jYr1yXDysaPCnHdl9nVUN3h/ygg6PYw2LH53q6ZQCNfj30kVliaPvBg==
+  dependencies:
+    react-fast-compare "^3.2.2"
+
 react-themeable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz"