From cf56bbfc5583773def318151bc2b1dd3aace491b Mon Sep 17 00:00:00 2001
From: "Ignacio Ceballos (Yayo)" <yceballost@gmail.com>
Date: Sun, 24 Nov 2024 14:26:59 +0100
Subject: [PATCH] (Bad practice) fix icons aligments in progress view

---
 .../assets/icons/icon-card.jsx                | 34 ++++++++++---------
 .../assets/icons/icon-invader.jsx             | 26 +++++++-------
 .../pages/progress-view.jsx                   |  5 ++-
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/pages/advent-calendar-2024/assets/icons/icon-card.jsx b/src/pages/advent-calendar-2024/assets/icons/icon-card.jsx
index 2754f13abd..a7ae857c98 100644
--- a/src/pages/advent-calendar-2024/assets/icons/icon-card.jsx
+++ b/src/pages/advent-calendar-2024/assets/icons/icon-card.jsx
@@ -1,21 +1,23 @@
 import { skinVars } from "@telefonica/mistica";
 
 const IconCard = ({ size = 24, color = skinVars.colors.neutralHigh }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-  >
-    <path
-      d="M3.7858 5.71672C2.0781 6.70266 1.493 8.88629 2.47894 10.594L7.03999 18.494C8.02594 20.2017 10.2096 20.7868 11.9173 19.8008L13.1048 19.1152C12.935 18.9287 12.7826 18.7213 12.6513 18.494L8.09026 10.594C7.10432 8.88629 7.68942 6.70266 9.39712 5.71672L12.0856 4.16455C10.9801 2.95016 9.14212 2.62425 7.66175 3.47894L3.7858 5.71672Z"
-      fill={color}
-    />
-    <path
-      d="M9.99219 6.74741L13.8681 4.50963C15.0066 3.85234 16.4624 4.2424 17.1197 5.38087L21.6807 13.2808C22.338 14.4193 21.9479 15.8751 20.8095 16.5324L16.9335 18.7701C15.7951 19.4274 14.3393 19.0374 13.682 17.8989L9.12095 9.99893C8.46365 8.86046 8.85372 7.4047 9.99219 6.74741Z"
-      fill={color}
-    />
-  </svg>
+  <div style={{ height: size }}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M3.7858 5.71672C2.0781 6.70266 1.493 8.88629 2.47894 10.594L7.03999 18.494C8.02594 20.2017 10.2096 20.7868 11.9173 19.8008L13.1048 19.1152C12.935 18.9287 12.7826 18.7213 12.6513 18.494L8.09026 10.594C7.10432 8.88629 7.68942 6.70266 9.39712 5.71672L12.0856 4.16455C10.9801 2.95016 9.14212 2.62425 7.66175 3.47894L3.7858 5.71672Z"
+        fill={color}
+      />
+      <path
+        d="M9.99219 6.74741L13.8681 4.50963C15.0066 3.85234 16.4624 4.2424 17.1197 5.38087L21.6807 13.2808C22.338 14.4193 21.9479 15.8751 20.8095 16.5324L16.9335 18.7701C15.7951 19.4274 14.3393 19.0374 13.682 17.8989L9.12095 9.99893C8.46365 8.86046 8.85372 7.4047 9.99219 6.74741Z"
+        fill={color}
+      />
+    </svg>
+  </div>
 );
 export default IconCard;
diff --git a/src/pages/advent-calendar-2024/assets/icons/icon-invader.jsx b/src/pages/advent-calendar-2024/assets/icons/icon-invader.jsx
index 1a1167acb2..72c716577a 100644
--- a/src/pages/advent-calendar-2024/assets/icons/icon-invader.jsx
+++ b/src/pages/advent-calendar-2024/assets/icons/icon-invader.jsx
@@ -1,17 +1,19 @@
 import { skinVars } from "@telefonica/mistica";
 
 const IconInvader = ({ size = 24, color = skinVars.colors.neutralHigh }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-  >
-    <path
-      d="M14.8125 10.125V12H16.6875V10.125H14.8125ZM7.3125 10.125V12H9.1875V10.125H7.3125ZM7.3125 17.625H11.0625V19.5H7.3125V17.625ZM16.6875 17.625V19.5H12.9375V17.625H16.6875ZM16.6875 6.375V4.5H18.5625V6.375H16.6875ZM7.3125 6.375H9.1875V8.25H14.8125V6.375H16.6875V8.25H18.5625V10.125H20.4375V12H22.3125V17.625H20.4375V13.875H18.5625V17.625H16.6875V15.75H7.3125V17.625H5.4375V13.875H3.5625V17.625H1.6875V12H3.5625V10.125H5.4375V8.25H7.3125V6.375ZM5.4375 4.5H7.3125V6.375H5.4375V4.5Z"
-      fill={color}
-    />
-  </svg>
+  <div style={{ height: size }}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M14.8125 10.125V12H16.6875V10.125H14.8125ZM7.3125 10.125V12H9.1875V10.125H7.3125ZM7.3125 17.625H11.0625V19.5H7.3125V17.625ZM16.6875 17.625V19.5H12.9375V17.625H16.6875ZM16.6875 6.375V4.5H18.5625V6.375H16.6875ZM7.3125 6.375H9.1875V8.25H14.8125V6.375H16.6875V8.25H18.5625V10.125H20.4375V12H22.3125V17.625H20.4375V13.875H18.5625V17.625H16.6875V15.75H7.3125V17.625H5.4375V13.875H3.5625V17.625H1.6875V12H3.5625V10.125H5.4375V8.25H7.3125V6.375ZM5.4375 4.5H7.3125V6.375H5.4375V4.5Z"
+        fill={color}
+      />
+    </svg>
+  </div>
 );
 export default IconInvader;
diff --git a/src/pages/advent-calendar-2024/pages/progress-view.jsx b/src/pages/advent-calendar-2024/pages/progress-view.jsx
index 92c1b77031..3f983f45f6 100644
--- a/src/pages/advent-calendar-2024/pages/progress-view.jsx
+++ b/src/pages/advent-calendar-2024/pages/progress-view.jsx
@@ -177,7 +177,9 @@ const ProgressView = () => {
       <Stack space={isTabletOrSmaller ? 32 : 64}>
         <Stack space={16}>
           <Inline space={8} alignItems="center">
-            <IconTrophyFilled size={20} />
+            <div style={{ height: 20 }}>
+              <IconTrophyFilled size={20} />
+            </div>
             <Text4>Achievements</Text4>
           </Inline>
           <Text
@@ -356,6 +358,7 @@ const ProgressView = () => {
                       <Stack space={isTabletOrSmaller ? 24 : 16}>
                         <Inline space={8} alignItems="center">
                           <IconCard size={20} />
+
                           <Text4 medium>Completed Days</Text4>
                         </Inline>
                         <Stack space={isTabletOrSmaller ? 16 : 32}>