fix: staking Svg icon sizes; update to tailwind

Author: wackerow

src/components/Staking/StakingProductsCardGrid/StakingProductCard.tsx

@@ -162,7 +162,7 @@ export const StakingProductCard = ({
   return (
     <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="rounded-md" width={48} height={48} />}
+        {!!Svg && <Svg className="size-12" />}
         <div>
           <h4 className="text-xl">{name}</h4>
           {typeof minEth !== "undefined" && (

src/hooks/useStakingConsiderations.ts renamed to src/hooks/useStakingConsiderations.tsx

@@ -1,6 +1,5 @@
 import { ElementType, useState } from "react"
 import { useTranslation } from "next-i18next"
-import { chakra } from "@chakra-ui/react"
 
 import type { StakingPage } from "@/lib/types"
 
@@ -403,19 +402,8 @@ export const useStakingConsiderations = ({
   }
 
   const indicatorSvgStyle = { width: 20, height: "auto" }
-  const StyledSvg = Svg
-    ? chakra(Svg, {
-        baseStyle: {
-          path: {
-            fill: "text",
-          },
-        },
-      })
-    : chakra("div", {
-        baseStyle: {
-          display: "none",
-        },
-      })
+  const StyledSvg = () =>
+    Svg ? <Svg className="size-[4.5rem]" /> : <div className="hidden" />
 
   return {
     title,