Back merge staging into `dev

app/[locale]/roadmap/_components/roadmap.tsx

@@ -134,11 +134,11 @@ const RoadmapPage = () => {
             from its current form into a fully scaled, maximally resilient
             platform.
           </p>
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+          <div className="grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-4">
             {changesComingItems.map((item) => (
               <div
                 key={item.title}
-                className="bg-roadmap-card-gradient flex h-full flex-col gap-4 rounded-3xl border p-6"
+                className="bg-roadmap-card-gradient flex flex-col gap-4 rounded-3xl border p-6"
               >
                 <div className="flex flex-row items-center justify-between gap-4">
                   <h3 className="m-0">{item.title}</h3>

src/components/ListenToPlayer/PlayerWidget/index.tsx

@@ -160,7 +160,7 @@ const PlayerWidget = ({
                 })
               }}
             >
-              <Minimize2 className="stroke-1" />
+              <Minimize2 className="-m-1 stroke-1" />
             </button>
           </Tooltip>
         </div>

src/components/Morpher/index.tsx

@@ -19,7 +19,7 @@ const Morpher = ({
 
   const morphTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const morphIntervalRef = useRef<NodeJS.Timeout | null>(null)
-  const counterRef = useRef(0)
+  const counterRef = useRef(1)
   const wordsRef = useRef(words)
   const currentTextRef = useRef(currentText)
   const isAnimatingRef = useRef(false)
@@ -117,10 +117,10 @@ const Morpher = ({
     // If reduced motion is preferred, show static text cycling
     if (prefersReducedMotion) {
       morphIntervalRef.current = setInterval(() => {
-        counterRef.current = (counterRef.current + 1) % wordsRef.current.length
         const nextWord = wordsRef.current[counterRef.current]
         setCurrentText(nextWord)
         currentTextRef.current = nextWord
+        counterRef.current = (counterRef.current + 1) % wordsRef.current.length
       }, 3000)
     } else {
       // Defer animation start by 2 seconds to improve initial page load

src/components/Quiz/QuizWidget/QuizConfetti.tsx

@@ -1,16 +1,11 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils/cn"
-
 import { StarConfettiIcon } from "../../icons/quiz"
 
-export const QuizConfetti = () => {
-  const commonClasses = "absolute"
-  return (
-    <div className="relative">
-      <StarConfettiIcon className={cn(commonClasses, "start-0")} />
-
-      <StarConfettiIcon className={cn(commonClasses, "end-0 -scale-x-100")} />
-    </div>
-  )
-}
+export const QuizConfetti = () => (
+  <div className="relative h-full w-full">
+    {/* Use left/right (not start/end) to keep SVG orientation correct for placement */}
+    <StarConfettiIcon className="absolute left-0 max-w-44" />
+    <StarConfettiIcon className="absolute right-0 max-w-44 -scale-x-100" />
+  </div>
+)

src/components/Simulator/screens/ConnectWeb3/Slider.tsx

@@ -39,7 +39,7 @@ export const Slider = ({ isConnected, displayUrl, children }: SliderProps) => {
                 animate={{ scale: 1 }}
                 transition={{ type: "spring", delay: 0.25 }}
               >
-                <Check className="size-[1em] -rotate-[10deg] text-[4.5rem]" />
+                <Check className="size-[4.5rem] -rotate-[10deg] stroke-1" />
               </motion.div>
               <motion.div
                 key="text"

src/components/Simulator/screens/CreateAccount/GeneratingKeys.tsx

@@ -55,7 +55,7 @@ export const GeneratingKeys = ({
     <div className="grid h-full place-items-center bg-background-highlight">
       <Flex className="flex-col items-center gap-4">
         {/* eslint-disable-next-line no-constant-condition */}
-        {false && loading ? (
+        {loading ? (
           <motion.div
             key="spinner"
             initial={{ opacity: 0 }}
@@ -72,7 +72,12 @@ export const GeneratingKeys = ({
             animate={{ scale: 1 }}
             transition={{ type: "spring", delay: 0.25 }}
           >
-            <Check className={cn(SPINNER_SIZE, "size-[1em] -rotate-[10deg]")} />
+            <Check
+              className={cn(
+                SPINNER_SIZE,
+                "size-[1em] -rotate-[10deg] stroke-1"
+              )}
+            />
           </motion.div>
         )}
         <p className="px-4 text-center md:px-8">

src/components/Simulator/screens/SendReceive/Success.tsx

@@ -103,7 +103,10 @@ export const Success = ({
                   data-testid="success-icon"
                 >
                   <Check
-                    className={cn(ICON_SIZE, "size-[1em] -rotate-[10deg]")}
+                    className={cn(
+                      ICON_SIZE,
+                      "size-[1em] -rotate-[10deg] stroke-1"
+                    )}
                   />
                 </motion.div>
               )}

src/components/Tooltip/Tooltip.stories.tsx

@@ -22,7 +22,7 @@ const meta = {
     content: <TooltipContent />,
     children: (
       <span data-testid="tooltip-icon">
-        <Info />
+        <Info className="size-4" />
       </span>
     ),
   },

src/components/ui/buttons/Button.tsx

@@ -41,9 +41,9 @@ const buttonVariants = cva(
         link: "border-transparent hover:shadow-none underline !min-h-0 !py-0 !px-1 active:text-primary",
       },
       size: {
-        lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg focus-visible:rounded-lg",
-        md: "min-h-10.5 px-4 py-2 [&>svg]:text-2xl",
-        sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:text-md",
+        lg: "text-lg py-3 px-8 [&>svg]:size-6 rounded-lg focus-visible:rounded-lg",
+        md: "min-h-10.5 px-4 py-2 [&>svg]:size-6",
+        sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:size-4",
       },
     },
     defaultVariants: {

src/components/ui/carousel.tsx

@@ -217,7 +217,7 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ChevronLeft className="h-8 w-8" />
+      <ChevronLeft className="size-6" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -246,7 +246,7 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ChevronRight className="h-8 w-8" />
+      <ChevronRight className="size-6" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

src/components/ui/radio-group.tsx

@@ -35,7 +35,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="size-2 text-[0.5rem]" />
+        <Circle className="size-2 fill-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )