New design for Staking cards #13115

src/components/SocialListItem.tsx

@@ -7,14 +7,14 @@ import {
   FaYoutube,
 } from "react-icons/fa6"
 
-import { Flex } from "./ui/flex"
+import { cn } from "@/lib/utils/cn"
 
-const socialColors = {
-  reddit: "#ff4301",
-  twitter: "#1da1f2",
-  youtube: "#ff0000",
-  discord: "#7289da",
-  stackExchange: "#48a2da",
+const socialColorClasses = {
+  reddit: "text-[#ff4301]",
+  twitter: "text-[#1da1f2]",
+  youtube: "text-[#ff0000]",
+  discord: "text-[#7289da]",
+  stackExchange: "text-[#48a2da]",
 }
 
 const icons = {
@@ -26,22 +26,23 @@ const icons = {
   webpage: FaGlobe,
 }
 
-type SocialListItemProps = {
-  children?: React.ReactNode
+type SocialListItemProps = React.HTMLAttributes<HTMLDivElement> & {
   socialIcon: keyof typeof icons
 }
 
-const SocialListItem = ({ children, socialIcon }: SocialListItemProps) => {
-  const SocialIcon = icons[socialIcon]
-
+const SocialListItem = ({
+  children,
+  socialIcon,
+  className,
+}: SocialListItemProps) => {
+  const Icon = icons[socialIcon]
   return (
-    <Flex className="w-full items-center px-0 py-2">
-      <SocialIcon
-        className="size-10 shrink-0 pe-3"
-        style={{ color: socialColors[socialIcon] }}
+    <div className={cn("flex w-full items-center px-0 py-2", className)}>
+      <Icon
+        className={cn("size-8 shrink-0 pe-3", socialColorClasses[socialIcon])}
       />
-      <div className="italic [&>a]:not-italic">{children}</div>
-    </Flex>
+      <div className="font-normal italic">{children}</div>
+    </div>
   )
 }
 

src/components/Staking/StakingProductsCardGrid/StakingProductCard.tsx

@@ -1,26 +1,17 @@
 import { useTranslation } from "next-i18next"
 import type { ComponentType, ReactNode, SVGProps } from "react"
-import {
-  Badge,
-  Box,
-  BoxProps,
-  Center,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-} from "@chakra-ui/react"
 
-import { ButtonLink } from "@/components/Buttons"
 import {
   CautionProductGlyphIcon,
   GreenCheckProductGlyphIcon,
   UnknownProductGlyphIcon,
   WarningProductGlyphIcon,
 } from "@/components/icons/staking"
+import SocialListItem from "@/components/SocialListItem"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import Link from "@/components/ui/Link"
+
+import { cn } from "@/lib/utils/cn"
 
 import { FlagType, Product } from "./types"
 
@@ -37,17 +28,17 @@ const getIconFromName = (
 const Status = ({ status }: { status: FlagType | undefined }) => {
   if (!status) return null
 
-  const styles = { fontSize: "2xl", m: 0 }
+  const styles = "me-2 size-5"
   switch (status) {
     case "green-check":
-      return <ListIcon as={GreenCheckProductGlyphIcon} {...styles} />
+      return <GreenCheckProductGlyphIcon className={styles} />
     case "caution":
-      return <ListIcon as={CautionProductGlyphIcon} {...styles} />
+      return <CautionProductGlyphIcon className={styles} />
     case "warning":
     case "false":
-      return <ListIcon as={WarningProductGlyphIcon} {...styles} />
+      return <WarningProductGlyphIcon className={styles} />
     default:
-      return <ListIcon as={UnknownProductGlyphIcon} {...styles} />
+      return <UnknownProductGlyphIcon className={styles} />
   }
 }
 
@@ -58,17 +49,18 @@ const StakingBadge = ({
   type: "ui" | "platform"
   children: ReactNode
 }) => {
-  const uiTypeColor = type === "ui" && "stakingPillUI"
-  const platformTypeColor = type === "platform" && "stakingPillPlatform"
-
+  const uiTypeColor = type === "ui"
   return (
-    <Badge
-      size="lg"
-      background={uiTypeColor || platformTypeColor || undefined}
-      textTransform="initial"
+    <span
+      className={cn(
+        "rounded-full px-2 py-1 text-xs normal-case",
+        uiTypeColor
+          ? "bg-success-light text-success dark:bg-success-dark dark:text-success-light"
+          : "bg-primary-low-contrast text-primary-high-contrast"
+      )}
     >
       {children}
-    </Badge>
+    </span>
   )
 }
 
@@ -80,7 +72,6 @@ export const StakingProductCard = ({
   product: {
     name,
     imageName,
-    color,
     url,
     platforms,
     ui,
@@ -98,13 +89,24 @@ export const StakingProductCard = ({
     consensusDiversity,
     executionDiversity,
     economical,
+    socials,
     matomo,
   },
 }: StakingProductCardProps) => {
-  const PADDED_DIV_STYLE: BoxProps = {
-    px: 8,
-    py: 6,
-  }
+  const validSocials = socials
+    ? Object.entries(socials).filter(
+        ([platform, url]) =>
+          url &&
+          [
+            "twitter",
+            "reddit",
+            "youtube",
+            "discord",
+            "stackExchange",
+            "webpage",
+          ].includes(platform)
+      )
+    : []
 
   const { t } = useTranslation("page-staking")
   const Svg = getIconFromName(imageName)
@@ -165,48 +167,21 @@ export const StakingProductCard = ({
   ].filter(({ status }) => !!status)
 
   return (
-    <Flex
-      direction="column"
-      background="offBackground"
-      borderRadius="base"
-      _hover={{
-        transition: "0.1s",
-        transform: "scale(1.01)",
-      }}
-    >
-      <HStack
-        {...PADDED_DIV_STYLE}
-        spacing={6}
-        background={color}
-        bgGradient="linear(0deg, rgba(0, 0, 0, 30%), rgba(0, 0, 0, 0))"
-        borderRadius="base"
-        maxH={24}
-      >
-        {!!Svg && <Icon as={Svg} fontSize="2rem" color="white" />}
-        <Heading as="h4" fontSize="2xl" color="white">
-          {name}
-        </Heading>
-      </HStack>
-      {typeof minEth !== "undefined" && (
-        <Center
-          fontWeight={700}
-          fontSize="base"
-          color="textTableOfContents"
-          textTransform="uppercase"
-          pt={6}
-        >
-          {minEth > 0
-            ? `${t("common:from")} ${minEth} ETH`
-            : t("page-staking-any-amount")}
-        </Center>
-      )}
-      <Flex
-        {...PADDED_DIV_STYLE}
-        flexWrap="wrap"
-        gap={1}
-        flex={1}
-        alignItems="flex-start"
-      >
+    <div className="rounded-base hover:scale-101 flex flex-col bg-background-highlight transition-transform">
+      <div className="flex max-h-24 space-x-3 p-6">
+        {!!Svg && <Svg className="size-12" />}
+        <div className="flex flex-col justify-center">
+          <h4 className="text-xl">{name}</h4>
+          {typeof minEth !== "undefined" && (
+            <p className="text-sm font-normal text-body-medium">
+              {minEth > 0
+                ? `${t("common:from")} ${minEth} ETH`
+                : t("page-staking-any-amount")}
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="min-h-75 flex flex-wrap items-start gap-1 p-6 pt-0">
         {platforms.map((platform, idx) => (
           <StakingBadge type="platform" key={idx}>
             {platform}
@@ -217,34 +192,55 @@ export const StakingProductCard = ({
             {_ui}
           </StakingBadge>
         ))}
-      </Flex>
-      <Box {...PADDED_DIV_STYLE} py={0}>
-        <List m={0} gap={3}>
+      </div>
+      <div className="p-6 py-0">
+        <ul className="m-0 gap-3">
           {data.map(({ label, status }, idx) => (
-            <ListItem
-              as={Flex}
+            <li
               key={idx}
-              textTransform="uppercase"
-              fontSize="xs"
-              lineHeight="0.875rem"
-              letterSpacing="wider"
-              my="4"
-              ms="auto"
-              me={0}
-              gap="1em"
-              alignItems="center"
+              className={`my-4 me-0 ms-auto flex items-center gap-1 text-md leading-3 ${status === "false" && "text-body-medium"}`}
             >
               <Status status={status} />
               {label}
-            </ListItem>
+            </li>
           ))}
-        </List>
-      </Box>
-      <Box {...PADDED_DIV_STYLE}>
-        <ButtonLink href={url} customEventOptions={matomo} width="100%">
+        </ul>
+      </div>
+      <div className="mt-auto flex flex-col gap-3 p-6">
+        <ButtonLink
+          href={url}
+          customEventOptions={matomo}
+          className="w-full"
+          variant="outline"
+          isSecondary
+        >
           {t("page-staking-products-get-started")}
         </ButtonLink>
-      </Box>
-    </Flex>
+        <div className="flex h-7.5 items-center justify-center">
+          {validSocials.length > 0 && (
+            <p className="me-2 text-body-medium">
+              {t("page-staking-products-follow")}
+            </p>
+          )}
+
+          {validSocials.map(([platform, url], idx) => (
+            <Link key={idx} href={url} hideArrow>
+              <SocialListItem
+                className="size-8 text-body [&>svg]:text-body"
+                socialIcon={
+                  platform as
+                    | "twitter"
+                    | "reddit"
+                    | "youtube"
+                    | "discord"
+                    | "stackExchange"
+                    | "webpage"
+                }
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
   )
 }

src/components/Staking/StakingProductsCardGrid/index.tsx

@@ -14,7 +14,7 @@ const StakingProductsCardGrid = ({
   return (
     <div
       className={
-        "mx-0 my-12 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-8"
+        "mx-0 my-12 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6"
       }
     >
       {rankedProducts.map((product) => (

src/components/Staking/StakingProductsCardGrid/types.ts

@@ -24,6 +24,7 @@ export type Product = {
   battleTested: FlagType
   trustless?: FlagType
   selfCustody?: FlagType
+  socials?: Array<string>
   liquidityToken?: FlagType
   permissionless?: FlagType
   permissionlessNodes?: FlagType

src/components/icons/staking/AbyssGlyphIcon.tsx

@@ -3,7 +3,7 @@ import { createIconBase } from "../icon-base"
 export const AbyssGlyphIcon = createIconBase({
   displayName: "AbyssGlyphIcon",
   viewBox: "0 0 32 39",
-  className: "h-auto w-[32px]",
+  className: "size-[1em]",
   children: (
     <path d="M16.4743 0C17.0709 0.00343608 17.64 0.0171804 18.1829 0.0870472C23.6503 0.302375 26.744 1.42712 29.2869 2.50948H29.3303C29.7966 2.72595 30.2617 2.8989 30.6857 3.11538C31.2366 3.37537 31.6606 3.59184 32 3.80717V27.3031L29.2869 29.2937L29.2446 29.3361L21.2343 35.135L18.1406 37.3845L15.9771 38.9422L10.7646 35.1774L2.71086 29.3361L0 27.3466V3.8507C0.381714 3.67889 0.848 3.41775 1.39886 3.1589C1.82171 2.98595 2.24686 2.76948 2.75543 2.55186C5.29829 1.42941 8.43429 0.261142 13.9863 0.044669C14.6229 0 15.3006 0 16.0206 0H16.4743ZM15.9783 7.96139C15.3006 7.96139 14.6229 8.00491 13.944 8.04843C12.9691 8.13434 11.952 8.26491 10.9771 8.43786L7.03543 9.2167V24.7501L11.1897 27.736V21.3747H20.8526V27.736L25.0914 24.7501H25.0069V9.2167L21.1074 8.43786C20.1326 8.26491 19.1577 8.13434 18.1406 8.04843C17.4206 8.00491 16.6994 7.96139 15.9783 7.96139ZM16.0206 12.1156C16.7406 12.1156 17.4617 12.1156 18.1817 12.2015C19.0731 12.2886 19.9623 12.3745 20.8526 12.5474V16.9616H11.1886V12.5474H11.3166C12.2057 12.3756 13.096 12.2886 13.9863 12.2015C14.664 12.158 15.3429 12.1156 16.0206 12.1156Z" />
   ),

src/components/icons/staking/AllnodesGlyphIcon.tsx

@@ -3,7 +3,7 @@ import { createIconBase } from "../icon-base"
 export const AllnodesGlyphIcon = createIconBase({
   displayName: "AllnodesGlyphIcon",
   viewBox: "0 0 32 32",
-  className: "h-auto w-[32px]",
+  className: "size-[1em]",
   children: (
     <path d="M16 0C24.8366 0 32 7.16344 32 16C32 19.8328 30.6523 23.3508 28.405 26.106L22.2067 14.2118L22.1734 14.1504L22.1389 14.0902L19.5622 9.14944C19.0835 8.22784 18.1325 7.65184 17.0944 7.65184H13.321C13.2083 7.65184 13.0982 7.67872 12.9997 7.7312C12.6592 7.90784 12.5261 8.32896 12.704 8.66944L23.8047 29.9706C21.496 31.2632 18.834 32 16 32C13.1431 32 10.4611 31.2512 8.13954 29.9393L14.8736 17.0176L14.9222 16.9011C15.0195 16.5862 14.8813 16.2355 14.5792 16.0794C14.4794 16.0282 14.3693 16 14.2566 16H10.4832L10.2618 16.009C9.312 16.0845 8.4608 16.6426 8.01536 17.4963L3.55496 26.0567C1.33167 23.3089 0 19.81 0 16C0 7.16344 7.16344 0 16 0Z" />
   ),

src/components/icons/staking/AnkrGlyphIcon.tsx

@@ -5,7 +5,7 @@ import { createIconBase } from "../icon-base"
 export const AnkrGlyphIcon = createIconBase({
   displayName: "AnkrGlyphIcon",
   viewBox: "0 0 30 32",
-  className: "h-auto w-[32px]",
+  className: "size-[1em]",
   ...commonIconDefaultAttrs,
   children: (
     <path d="M17.0737 0.500766L27.5308 5.87274C28.2752 6.25251 28.9001 6.83172 29.3359 7.54603C29.7718 8.26035 30.0017 9.08181 30 9.91919V12.3692H26.1426V9.91919C26.1428 9.79254 26.1079 9.66833 26.0419 9.56034C25.9759 9.45235 25.8814 9.3648 25.7688 9.30741L15.3127 3.93543C15.2155 3.88585 15.108 3.86009 14.9989 3.86025C14.8899 3.86042 14.7825 3.88651 14.6855 3.93638L4.22935 9.30835C4.11706 9.3658 4.02279 9.45326 3.95698 9.56106C3.89117 9.66886 3.85637 9.7928 3.85642 9.91919V12.3692H1.06866e-05V9.91919C-0.00178399 9.08191 0.227932 8.26052 0.663651 7.54621C1.09937 6.8319 1.72404 6.25264 2.4683 5.87274L12.9263 0.500766C13.5682 0.171629 14.279 0 15 0C15.721 0 16.4318 0.171629 17.0737 0.500766ZM18.2989 15.8369C18.2989 14.0147 16.8185 12.5325 14.9991 12.5325C14.1245 12.5327 13.2858 12.8808 12.667 13.5003C12.0482 14.1198 11.6998 14.9601 11.6983 15.8369C11.6983 17.659 13.1787 19.1412 14.9991 19.1412C15.8734 19.1405 16.7117 18.7922 17.3302 18.1728C17.9488 17.5534 18.2972 16.7134 18.2989 15.8369ZM25.7706 22.693C25.883 22.6356 25.9773 22.5482 26.0432 22.4404C26.109 22.3325 26.1437 22.2086 26.1436 22.0821V19.6322H30V22.0821C30.0017 22.9192 29.772 23.7403 29.3365 24.4544C28.901 25.1685 28.2766 25.7477 27.5326 26.1276L17.0737 31.4996C16.4315 31.828 15.7209 31.9995 15 32C14.2791 31.9994 13.5685 31.828 12.9263 31.4996L2.46736 26.1276C1.72335 25.7478 1.09891 25.1686 0.663357 24.4545C0.227808 23.7404 -0.0018051 22.9192 1.06866e-05 22.0821V19.6322H3.85548V22.0821C3.85548 22.3408 3.99863 22.575 4.22841 22.6939L13.0713 27.2351V22.7355C10.0587 21.8905 7.84186 19.1195 7.84186 15.8369C7.84186 11.8867 11.0532 8.67203 14.9991 8.67203C18.9449 8.67203 22.1563 11.8867 22.1563 15.8378C22.1563 19.1186 19.9394 21.8905 16.9268 22.7355V27.236L25.7697 22.6939L25.7706 22.693Z" />

src/components/icons/staking/AuditedIcon.tsx

@@ -5,7 +5,7 @@ import { createIconBase } from "../icon-base"
 export const AuditedIcon = createIconBase({
   displayName: "AuditedIcon",
   viewBox: "0 0 72 72",
-  className: "h-auto w-[72px]",
+  className: "size-[1em]",
   ...commonIconDefaultAttrs,
   children: (
     <>

src/components/icons/staking/AvadoGlyphIcon.tsx

@@ -3,7 +3,7 @@ import { createIconBase } from "../icon-base"
 export const AvadoGlyphIcon = createIconBase({
   displayName: "AvadoGlyphIcon",
   viewBox: "0 0 265.7 300",
-  className: "h-auto w-[265.7px]",
+  className: "size-[1em]",
   children: (
     <path d="m259.5 70.4.1-.2-118-67.8L139 .8l-.2.2c-3.8-1.4-8.1-1.4-12 0l-.1-.2L8.8 68.6C3.4 71.7 0 77.5 0 83.7v132.6c0 6.2 3.4 12 8.8 15.1l115.3 66.3c2.7 1.5 5.7 2.3 8.8 2.3 3.1 0 6.1-.8 8.8-2.3l113.5-65.2 4.5-2.6-.1-.2c3.9-3.3 6.2-8.2 6.2-13.3V83.7c-.1-5.1-2.4-10-6.3-13.3zM99.1 217.9l-8.6-.5 3.3-6.8 5.3 7.3zm-3.4-11.4 2.9-8.4 1.8 14.7-4.7-6.3zm-3.3-2.6-5.4-3.2 8.7-6.2-3.3 9.4zm-1.5 3.7-5 10.4-14.7 12.3 13-26.7 6.7 4zm-4.8 15.3 5.5 35-23.2-20.2 17.7-14.8zm3.7-1.6 11 .6-6.1 29.9-4.9-30.5zm14.6 2.6 36.1 31.7-43.6 5.1 7.5-36.8zm8.9-61.6 10.4 2.2-10.4 8.6-.3-10.5.6.5-.3-.8zm-.2 16.7 57.7-8.7-64.8 45.4 7.1-36.7zm-4.8 4.2-4.7 24.1-2-17.4 6.7-6.7zm-3.6-2 4.6-11.6.2 6.9-4.8 4.7zm36.4 78.2-8.4 12.7-28.5-8.4 36.9-4.3zm-34.8-39.1 68.4-47.9-30.4 81.2-38-33.3zm66.8-54.3-54.9 8.3 11.1-9.2 20.5-13.1 23.3 14zm-9.3-10.2 19.4 5.7-4.5 3.3-14.9-9zm-38.9-35.7 7.4-8.8 8.3 8.8h-15.7zm18.6 3.9 3.4 20.2-21.3-20.2h17.9zm.4 22.9-1.8-.5 3.5 2.1 1 1-17.1 10.9-5.8-32.6 20.2 19.1zm-18.3 14-12.2-2.6 6.9-27 5.3 29.6zm-6.4-41.8-.1-.1.1.4-23.2-7.5 25.9-9-2.7 16.2zm-.9 4.2-7.8 30.5-17.1-38.6 24.9 8.1zm-19.5 62.3L69.5 154l38.8 7.2-9.5 24.4zm-15.2 12.6c-2.9-3.1-9.5-10.2-15.4-16.4-1.5-1.6-2.8-3-4-4.3l31.3 12.3-11.9 8.4zm-18.3-13.7c6.3 6.6 12.9 13.7 15.7 16.7L66.4 231l-7.5-53.2c1.7 1.7 3.8 3.9 6.4 6.7zm20.9 73.9-18.4-5.6-9.7-3.2 7.5-9.1 20.6 17.9zm-24-3.3 4 1.3 5 3.9 10 5.7L61 254.4l1.2.7zm14.8 4.6 16.2 4.9.5.6 1.1 1.4 9.8 12.7 8.9 5.1-13.7-17.9 30.5 9-10.4 12.6-22.9-13-20-15.4zm58.1 16 10.2-15.5 11.9 13.1-10.1 5.6-22.6 9.7 10.6-12.9zm17.2-13.7c4.5 1.8 9.5 3.8 14.6 5.8l-6.1 3.5-8.5-9.3zm-3.7-5.8 66.3-68.9 16.1 42.9-59.7 35c-8.3-3.2-16.1-6.3-22.7-9zm1.7-7.5 29.6-78.9 32.4 14.6-62 64.3zm32.4-81.9 4.8-3.5 15.4 12.6-20.2-9.1zm-31.2-18.7-4-24 23 1.6 13.6 31.9-32.6-9.5zm-1.4-27.7 13.2-11.3 5.5 12.5-18.7-1.2zm-4.8-1.1-15.6-16.6 29.8 4.5-14.2 12.1zm-18.6-21 4.1-23.3 27.7 28.1-31.8-4.8zm2.9 10.1-5.8 6.9 1.8-11 4 4.1zm-6.1-14.8-3.3-6.8 5.8-7.9-2.5 14.7zm-3.1 2.6-17.9-7.1 14.2-.5 3.7 7.6zm-2.4-13L109.9 71l15.9 1.6-7.8 10.6zm-3.7 1.5-17.5.6 9.1-13.2 8.4 12.6zm4.4 15.1L92.2 109l2.5-18.7 24 9.5zm-12.6 53.8-35-26.8L89 114.9l17.1 38.7zm-2.8 2.8-37.1-6.9 2.9-19.2 34.2 26.1zm-11.2 27.9-33.5-13.2 6.1-16.4 27.4 29.6zM63 234.9 6.4 219c.1.4.3.9.4 1.3-.4-1-.6-2.1-.7-3.2 0 .3.1.5.1.8L54.7 176l8.3 58.9zM8.2 222.8c.3.4.5.7.8 1.1l52.9 14.8-8.2 9.9-2.3.2L11.7 226c-1.4-.7-2.6-1.9-3.5-3.2zm-2.1-6.5v.8-.8zm.8 4.1.6 1.2c-.3-.4-.5-.8-.6-1.2zm.6 1.2c.2.4.4.8.7 1.1-.3-.3-.5-.7-.7-1.1zm252.1-5.3c0 4-2.2 7.8-5.7 9.8l-115.3 66.3c-3.5 2-7.9 2-11.4 0l-5.4-3.1 4.7 2.7 22.3-9.6 12.6-7 11-6.4 62.1-36.3 25.2-23.7v7.3zm0-12.5-25.4 23.9L219 187l40.6 14.1v2.7zm0-6.9-43-14.9-27.5-22.5-15.5-36.4-6.8-15.7h.2l-.4-.4-.6-1.5.5-.4-.7-.1-.1-.3L131.4 70v-.1h-.1l-1.8-1.1-.8-.1-23.7-2.1-.6.8-.3.4-12.8 18.7-.3 1.4-3 22.3-.2-.1.2.4v.3l-21 14-.1-.1v.1l-1 .7-3.6 24.1-.1.9-7 18.9-.4 1-.7 1-48 41.5V83.7c0-4 2.2-7.8 5.7-9.8L125.2 8.7l1.9-1.1c3.5-2 7.9-2 11.4 0l115.4 66.3c3.5 2 5.7 5.8 5.7 9.8v113.2z" />
   ),

src/components/icons/staking/BattleTestedIcon.tsx

@@ -5,7 +5,7 @@ import { createIconBase } from "../icon-base"
 export const BattleTestedIcon = createIconBase({
   displayName: "BattleTestedIcon",
   viewBox: "0 0 72 72",
-  className: "h-auto w-[72px]",
+  className: "size-[1em]",
   ...commonIconDefaultAttrs,
   children: (
     <>

src/components/icons/staking/BedrockGlyphIcon.tsx

@@ -5,7 +5,7 @@ import { createIconBase } from "../icon-base"
 export const BedrockGlyphIcon = createIconBase({
   displayName: "BedrockGlyphIcon",
   viewBox: "0 0 33 32",
-  className: "h-auto w-[33px]",
+  className: "size-[1em]",
   ...commonIconDefaultAttrs,
   children: (
     <path