fix: chromatic svg/icon regressions

Author: wackerow

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/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/icons/quiz/star-confetti.svg

@@ -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/buttons/Button.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/carousel.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>
   )