(Bad practice) fix icons aligments in progress view

Telefonica · Nov 24, 2024 · cf56bbf · cf56bbf
1 parent fa8defc
commit cf56bbf
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 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
@@ -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
@@ -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
@@ -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}>