Merge pull request #170 from Weaverse/fix/ui

Fix/UI

Author: hta218

app/components/button.tsx

@@ -4,7 +4,7 @@ import { cn } from "~/utils/cn";
 import { Link } from "./link";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  "inline-flex items-center justify-center whitespace-nowrap font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

app/components/cart/cart-summary.tsx

@@ -422,10 +422,7 @@ function CartAsideSummary({ cart }: { cart: CartWithOptimistic }) {
           {enableCartNote && (
             <Dialog.Root>
               <Dialog.Trigger asChild>
-                <button
-                  type="button"
-                  className="cursor-pointer underline underline-offset-2"
-                >
+                <button type="button" className="underline underline-offset-2">
                   {cartNoteButtonText || t("cart.noteTitle")}
                 </button>
               </Dialog.Trigger>
@@ -438,10 +435,7 @@ function CartAsideSummary({ cart }: { cart: CartWithOptimistic }) {
           {enableDiscountCode && (
             <Dialog.Root>
               <Dialog.Trigger asChild>
-                <button
-                  type="button"
-                  className="cursor-pointer underline underline-offset-2"
-                >
+                <button type="button" className="underline underline-offset-2">
                   {discountCodeButtonText || t("cart.discountCode")}
                 </button>
               </Dialog.Trigger>
@@ -454,10 +448,7 @@ function CartAsideSummary({ cart }: { cart: CartWithOptimistic }) {
           {enableGiftCard && (
             <Dialog.Root>
               <Dialog.Trigger asChild>
-                <button
-                  type="button"
-                  className="cursor-pointer underline underline-offset-2"
-                >
+                <button type="button" className="underline underline-offset-2">
                   {giftCardButtonText || t("cart.giftCard")}
                 </button>
               </Dialog.Trigger>
@@ -648,12 +639,12 @@ function PageDiscountForm({
           value={code}
           onChange={(event) => onCodeChange(event.target.value)}
           placeholder={t("cart.enterCode")}
-          className="min-w-0 flex-1 rounded-xl border border-border bg-background px-3 font-body text-sm leading-none font-normal tracking-[-0.14px] text-text-subtle outline-none placeholder:text-text-subtle"
+          className="min-w-0 flex-1 rounded-xl border border-border bg-background px-3 py-2 font-body text-sm leading-none font-normal tracking-[-0.14px] text-text-subtle outline-none placeholder:text-text-subtle"
         />
         <button
           type="submit"
           disabled={!code.trim() || isSubmitting}
-          className="rounded-xl bg-text-primary px-6 font-body text-base leading-[160%] font-semibold tracking-[-0.16px] text-text-inverse disabled:opacity-50"
+          className="rounded-xl bg-text-primary px-6 py-3 font-body text-base leading-[160%] font-semibold tracking-[-0.16px] text-text-inverse disabled:cursor-not-allowed disabled:opacity-50"
         >
           {t("cart.apply")}
         </button>

app/components/icon.tsx

@@ -9,11 +9,7 @@ export function IconHighlightPaw(props: IconProps) {
   return (
     <Icon {...props} viewBox="0 0 48 48">
       <title>Paw</title>
-      <circle cx="12" cy="16" r="5.25" />
-      <circle cx="20" cy="7" r="5.25" />
-      <circle cx="32" cy="7" r="5.25" />
-      <circle cx="40" cy="16" r="5.25" />
-      <path d="M37.09 29.91a8.21 8.21 0 0 1-3.16-4.84 8.25 8.25 0 0 0-15.86 0 8.21 8.21 0 0 1-3.16 4.84A7.5 7.5 0 0 0 22.41 42a9.58 9.58 0 0 1 7.18 0 7.5 7.5 0 0 0 7.5-12.09Z" />
+      <path d="M39.75 15C38.7117 15 37.6966 15.3079 36.8333 15.8848C35.9699 16.4617 35.297 17.2816 34.8996 18.2409C34.5023 19.2002 34.3983 20.2558 34.6009 21.2742C34.8035 22.2926 35.3035 23.2281 36.0377 23.9623C36.7719 24.6965 37.7074 25.1966 38.7258 25.3991C39.7442 25.6017 40.7998 25.4977 41.7591 25.1004C42.7184 24.703 43.5383 24.0301 44.1152 23.1667C44.6921 22.3034 45 21.2884 45 20.25C45 18.8576 44.4469 17.5223 43.4623 16.5377C42.4777 15.5531 41.1424 15 39.75 15ZM39.75 22.5C39.305 22.5 38.87 22.368 38.5 22.1208C38.13 21.8736 37.8416 21.5222 37.6713 21.111C37.501 20.6999 37.4564 20.2475 37.5432 19.811C37.6301 19.3746 37.8443 18.9737 38.159 18.659C38.4737 18.3443 38.8746 18.1301 39.3111 18.0432C39.7475 17.9564 40.1999 18.001 40.611 18.1713C41.0222 18.3416 41.3736 18.63 41.6208 19C41.868 19.37 42 19.805 42 20.25C42 20.8467 41.7629 21.419 41.341 21.841C40.919 22.2629 40.3467 22.5 39.75 22.5ZM13.5 20.25C13.5 19.2116 13.1921 18.1966 12.6152 17.3333C12.0383 16.4699 11.2184 15.797 10.2591 15.3996C9.29978 15.0023 8.24418 14.8983 7.22578 15.1009C6.20738 15.3035 5.27192 15.8035 4.53769 16.5377C3.80347 17.2719 3.30345 18.2074 3.10088 19.2258C2.89831 20.2442 3.00227 21.2998 3.39963 22.2591C3.79699 23.2184 4.4699 24.0383 5.33326 24.6152C6.19662 25.1921 7.21165 25.5 8.25 25.5C9.64239 25.5 10.9777 24.9469 11.9623 23.9623C12.9469 22.9777 13.5 21.6424 13.5 20.25ZM8.25 22.5C7.80499 22.5 7.36998 22.368 6.99997 22.1208C6.62996 21.8736 6.34157 21.5222 6.17127 21.111C6.00098 20.6999 5.95642 20.2475 6.04324 19.811C6.13005 19.3746 6.34434 18.9737 6.65901 18.659C6.97368 18.3443 7.37459 18.1301 7.81105 18.0432C8.24751 17.9564 8.69991 18.001 9.11104 18.1713C9.52217 18.3416 9.87358 18.63 10.1208 19C10.368 19.37 10.5 19.805 10.5 20.25C10.5 20.8467 10.2629 21.419 9.84099 21.841C9.41904 22.2629 8.84674 22.5 8.25 22.5ZM17.25 16.5C18.2884 16.5 19.3034 16.1921 20.1667 15.6152C21.0301 15.0383 21.703 14.2184 22.1004 13.2591C22.4977 12.2998 22.6017 11.2442 22.3991 10.2258C22.1966 9.20738 21.6965 8.27192 20.9623 7.53769C20.2281 6.80347 19.2926 6.30345 18.2742 6.10088C17.2558 5.89831 16.2002 6.00227 15.2409 6.39963C14.2816 6.79699 13.4617 7.4699 12.8848 8.33326C12.3079 9.19662 12 10.2117 12 11.25C12 12.6424 12.5531 13.9777 13.5377 14.9623C14.5223 15.9469 15.8576 16.5 17.25 16.5ZM17.25 9C17.695 9 18.13 9.13196 18.5 9.3792C18.87 9.62643 19.1584 9.97783 19.3287 10.389C19.499 10.8001 19.5436 11.2525 19.4568 11.689C19.37 12.1254 19.1557 12.5263 18.841 12.841C18.5263 13.1557 18.1254 13.37 17.689 13.4568C17.2525 13.5436 16.8001 13.499 16.389 13.3287C15.9778 13.1584 15.6264 12.87 15.3792 12.5C15.132 12.13 15 11.695 15 11.25C15 10.6533 15.2371 10.081 15.659 9.65901C16.081 9.23705 16.6533 9 17.25 9ZM30.75 16.5C31.7884 16.5 32.8034 16.1921 33.6667 15.6152C34.5301 15.0383 35.203 14.2184 35.6004 13.2591C35.9977 12.2998 36.1017 11.2442 35.8991 10.2258C35.6966 9.20738 35.1965 8.27192 34.4623 7.53769C33.7281 6.80347 32.7926 6.30345 31.7742 6.10088C30.7558 5.89831 29.7002 6.00227 28.7409 6.39963C27.7816 6.79699 26.9617 7.4699 26.3848 8.33326C25.8079 9.19662 25.5 10.2117 25.5 11.25C25.5 12.6424 26.0531 13.9777 27.0377 14.9623C28.0223 15.9469 29.3576 16.5 30.75 16.5ZM30.75 9C31.195 9 31.63 9.13196 32 9.3792C32.37 9.62643 32.6584 9.97783 32.8287 10.389C32.999 10.8001 33.0436 11.2525 32.9568 11.689C32.87 12.1254 32.6557 12.5263 32.341 12.841C32.0263 13.1557 31.6254 13.37 31.189 13.4568C30.7525 13.5436 30.3001 13.499 29.889 13.3287C29.4778 13.1584 29.1264 12.87 28.8792 12.5C28.632 12.13 28.5 11.695 28.5 11.25C28.5 10.6533 28.7371 10.081 29.159 9.65901C29.581 9.23705 30.1533 9 30.75 9ZM35.085 27.9113C34.3231 27.4909 33.6515 26.9245 33.1088 26.2443C32.566 25.5642 32.1627 24.7837 31.9219 23.9475C31.4231 22.2323 30.3812 20.7254 28.9527 19.6531C27.5242 18.5808 25.7862 18.0011 24 18.0011C22.2138 18.0011 20.4758 18.5808 19.0473 19.6531C17.6188 20.7254 16.5769 22.2323 16.0781 23.9475C15.5964 25.6301 14.4669 27.0528 12.9375 27.9038C11.4704 28.6976 10.3097 29.958 9.63924 31.4855C8.96874 33.0129 8.82662 34.7204 9.23536 36.3377C9.6441 37.955 10.5804 39.3899 11.8961 40.4154C13.2118 41.4409 14.8318 41.9985 16.5 42C17.4997 42.0029 18.4896 41.8032 19.41 41.4131C22.3445 40.2029 25.6386 40.2029 28.5731 41.4131C30.3505 42.1862 32.3582 42.2411 34.1752 41.5663C35.9922 40.8916 37.4775 39.5396 38.3195 37.7939C39.1616 36.0481 39.2952 34.0442 38.6922 32.2021C38.0891 30.3601 36.7964 28.823 35.085 27.9131V27.9113ZM31.5 39C30.891 39.0005 30.2882 38.8774 29.7281 38.6381C26.0543 37.1206 21.9288 37.1206 18.255 38.6381C17.1874 39.0978 15.9833 39.1265 14.8949 38.7183C13.8066 38.3101 12.9185 37.4965 12.4165 36.4481C11.9146 35.3996 11.8379 34.1977 12.2024 33.0939C12.5668 31.9901 13.3443 31.0702 14.3719 30.5269C15.4767 29.9167 16.4504 29.0948 17.2374 28.108C18.0243 27.1213 18.609 25.9891 18.9581 24.7763C19.2751 23.6842 19.9381 22.7247 20.8473 22.0418C21.7566 21.359 22.8629 20.9898 24 20.9898C25.1371 20.9898 26.2435 21.359 27.1527 22.0418C28.0619 22.7247 28.7249 23.6842 29.0419 24.7763C29.3921 25.9914 29.9786 27.1255 30.7679 28.1136C31.5571 29.1016 32.5336 29.9243 33.6413 30.5344C34.5259 31.0089 35.2266 31.7656 35.6317 32.6841C36.0368 33.6026 36.1231 34.6302 35.877 35.6035C35.6308 36.5767 35.0663 37.4397 34.2732 38.0552C33.48 38.6706 32.5039 39.0032 31.5 39Z" />
     </Icon>
   );
 }
@@ -152,11 +148,18 @@ export function IconArrowRight(props: IconProps) {
   return (
     <Icon
       {...props}
-      fill="currentColor"
+      fill="none"
       stroke={props.stroke || "currentColor"}
-      viewBox="0 0 256 256"
+      strokeWidth={props.strokeWidth || 1.5}
+      viewBox="0 0 32 32"
     >
-      <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" />
+      <title>Arrow right</title>
+      <path d="M5 16H27" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M18 7L27 16L18 25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </Icon>
   );
 }
@@ -165,11 +168,14 @@ export function IconArrowLeft(props: IconProps) {
   return (
     <Icon
       {...props}
-      fill="currentColor"
+      fill="none"
       stroke={props.stroke || "currentColor"}
-      viewBox="0 0 256 256"
+      strokeWidth={props.strokeWidth || 1.5}
+      viewBox="0 0 32 32"
     >
-      <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
+      <title>Arrow left</title>
+      <path d="M27 16H5" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M14 7L5 16L14 25" strokeLinecap="round" strokeLinejoin="round" />
     </Icon>
   );
 }
@@ -731,7 +737,7 @@ export function IconFooterYouTube(props: IconProps) {
   return (
     <Icon {...props} viewBox="0 0 14 14" fill="none">
       <path
-        d="M1.458 4.0832C1.05 6.006 1.05 7.9929 1.458 9.9158C1.512 10.1111 1.615 10.289 1.758 10.4322C1.901 10.5754 2.079 10.6788 2.275 10.7324C5.403 11.2507 8.596 11.2507 11.724 10.7324C11.92 10.6788 12.098 10.5754 12.241 10.4322C12.384 10.289 12.487 10.1111 12.541 9.9158C12.948 7.9929 12.948 6.006 12.541 4.0832C12.487 3.8879 12.384 3.7099 12.241 3.5668C12.098 3.4236 11.92 3.3202 11.724 3.2666C8.596 2.7484 5.403 2.7484 2.275 3.2666C2.079 3.3202 1.901 3.4236 1.758 3.5668C1.615 3.7099 1.512 3.8879 1.458 4.0832Z"
+        d="M1.45782 4.08318C1.05033 6.00604 1.05033 7.99294 1.45782 9.9158C1.51137 10.1111 1.61482 10.289 1.758 10.4322C1.90119 10.5754 2.07918 10.6788 2.27446 10.7324C5.40303 11.2507 8.59558 11.2507 11.7241 10.7324C11.9194 10.6788 12.0974 10.5754 12.2406 10.4322C12.3838 10.289 12.4872 10.1111 12.5408 9.9158C12.9483 7.99294 12.9483 6.00604 12.5408 4.08318C12.4872 3.88791 12.3838 3.70994 12.2406 3.56677C12.0974 3.4236 11.9194 3.32015 11.7241 3.26662C8.59557 2.74837 5.40304 2.74837 2.27446 3.26662C2.07918 3.32015 1.90119 3.4236 1.758 3.56677C1.61482 3.70994 1.51137 3.88791 1.45782 4.08318Z"
         stroke="currentColor"
         strokeLinecap="round"
       />
@@ -783,9 +789,7 @@ export function IconArrowScrollRight(props: IconProps) {
     <Icon {...props} fill="none" stroke={props.stroke || "currentColor"}>
       <path
         d="M16.9863 11.5136L16.9864 11.5136C17.0503 11.5774 17.101 11.6533 17.1356 11.7367C17.1702 11.8202 17.188 11.9097 17.188 12C17.188 12.0904 17.1702 12.1798 17.1356 12.2633C17.101 12.3467 17.0503 12.4226 16.9864 12.4864L16.9863 12.4864L9.48633 19.9864C9.35732 20.1154 9.18235 20.1879 8.9999 20.1879C8.81745 20.1879 8.64248 20.1154 8.51347 19.9864C8.38446 19.8574 8.31198 19.6824 8.31198 19.5C8.31198 19.3176 8.38446 19.1426 8.51347 19.0136L15.4838 12.0442L15.528 12L15.4838 11.9558L8.51347 4.98643C8.44959 4.92255 8.39892 4.84672 8.36435 4.76326C8.32977 4.67979 8.31198 4.59034 8.31198 4.5C8.31198 4.40966 8.32977 4.32021 8.36435 4.23675C8.39892 4.15328 8.44959 4.07745 8.51347 4.01357C8.57735 3.94969 8.65318 3.89902 8.73664 3.86445C8.82011 3.82988 8.90956 3.81208 8.9999 3.81208C9.09024 3.81208 9.17969 3.82988 9.26315 3.86445C9.34661 3.89902 9.42245 3.94969 9.48633 4.01357L16.9863 11.5136Z"
-        fill="#1E1C1A"
-        stroke="#696662"
-        stroke-width="0.125"
+        fill="currentColor"
       />
     </Icon>
   );
@@ -796,25 +800,16 @@ export function IconArrowScrollLeft(props: IconProps) {
     <Icon {...props} fill="none" stroke={props.stroke || "currentColor"}>
       <path
         d="M7.01367 12.4864L7.01365 12.4864C6.94972 12.4226 6.89902 12.3467 6.86442 12.2633C6.82982 12.1798 6.81201 12.0903 6.81201 12C6.81201 11.9096 6.82982 11.8202 6.86442 11.7367C6.89902 11.6533 6.94972 11.5774 7.01365 11.5136L7.01367 11.5136L14.5137 4.01357C14.6427 3.88456 14.8177 3.81208 15.0001 3.81208C15.1825 3.81208 15.3575 3.88456 15.4865 4.01357C15.6155 4.14258 15.688 4.31755 15.688 4.5C15.688 4.68244 15.6155 4.85742 15.4865 4.98643L8.51622 11.9558L8.47202 12L8.51622 12.0442L15.4865 19.0136C15.5504 19.0774 15.6011 19.1533 15.6357 19.2367C15.6702 19.3202 15.688 19.4097 15.688 19.5C15.688 19.5903 15.6702 19.6798 15.6357 19.7633C15.6011 19.8467 15.5504 19.9226 15.4865 19.9864C15.4227 20.0503 15.3468 20.101 15.2634 20.1355C15.1799 20.1701 15.0904 20.1879 15.0001 20.1879C14.9098 20.1879 14.8203 20.1701 14.7368 20.1355C14.6534 20.101 14.5775 20.0503 14.5137 19.9864L7.01367 12.4864Z"
-        fill="#1E1C1A"
-        stroke="#696662"
-        stroke-width="0.125"
+        fill="currentColor"
       />
     </Icon>
   );
 }
 
 export function IconCircle(props: IconProps) {
   return (
-    <Icon
-      {...props}
-      fill="currentColor"
-      stroke={props.stroke || "currentColor"}
-      viewBox="0 0 256 256"
-      width="32"
-      height="32"
-    >
-      <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z"></path>
+    <Icon {...props} viewBox="0 0 6 6" fill="none">
+      <circle cx="3" cy="3" r="3" fill="currentColor" />
     </Icon>
   );
 }

app/components/layout/country-selector/locale-select.tsx

@@ -31,7 +31,7 @@ export function LocaleSelect({
         aria-label={ariaLabel}
         className={
           placement === "header"
-            ? "group flex cursor-pointer items-center gap-1.5 outline-none"
+            ? "group flex items-center gap-1.5 outline-none"
             : "group flex max-w-full min-w-0 items-center gap-2 rounded-xl border border-border-subtle bg-background-basic px-3.5 py-2 outline-none"
         }
       >
@@ -74,7 +74,7 @@ export function LocaleSelect({
               <button
                 type="submit"
                 aria-label={t("locale.selectOption", { option: optionLabel })}
-                className="block w-full cursor-pointer whitespace-normal px-3.5 py-2 text-left font-body leading-none font-normal tracking-[-0.12px] text-(--color-footer-text) hover:bg-black/5"
+                className="block w-full whitespace-normal px-3.5 py-2 text-left font-body leading-none font-normal tracking-[-0.12px] text-(--color-footer-text) hover:bg-black/5"
               >
                 <span
                   className={placement === "footer" ? "text-xs" : "text-[13px]"}

app/components/layout/menu/mega-menu.tsx

@@ -47,7 +47,7 @@ export function MegaMenu(props: { menu: EnhancedMenu | null | undefined }) {
                 <Menubar.Trigger
                   asChild={!hasSubmenu}
                   className={clsx([
-                    "flex h-full cursor-pointer items-center gap-1 px-0 py-2",
+                    "flex h-full items-center gap-1 px-0 py-2",
                     "text-base font-semibold leading-[1.6] tracking-[-0.16px] focus:outline-none",
                   ])}
                   onMouseEnter={() => {
@@ -154,7 +154,7 @@ function LayoutMenu({ items }: { items: SingleMenuItem[] }) {
                       prefetch="intent"
                       className="block w-full truncate text-sm transition-none"
                     >
-                      {product.title}
+                      <span className="text-animation">{product.title}</span>
                     </Link>
                   ))}
                 </div>
@@ -208,7 +208,7 @@ function LayoutMenu({ items }: { items: SingleMenuItem[] }) {
                   width={300}
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/45 via-transparent to-transparent" />
-                <p className="absolute line-clamp-1 right-3 bottom-3 left-3 font-heading text-base text-text-inverse">
+                <p className="absolute line-clamp-1 right-3 bottom-3 left-3 font-heading text-base text-text-inverse underline-offset-4 group-hover/item:underline">
                   {resource.title || title}
                 </p>
               </div>

app/components/layout/predictive-search/PredictiveSearch/SearchDrawer/search-type-drawer.tsx

@@ -41,7 +41,7 @@ export function SearchTypeDrawer(props: PredictiveSearchProps) {
               className="rounded-md border-2"
               type="search"
               prefixElement={
-                <button type="submit" className="cursor-pointer">
+                <button type="submit">
                   <IconSearch
                     className="h-6 w-6 opacity-55"
                     viewBox="0 0 24 24"

app/components/layout/predictive-search/PredictiveSearch/SearchHeader/search-type-header-results.tsx

@@ -67,11 +67,11 @@ export function SearchTypeHeaderResults({
       <div
         data-predictive-search-results
         className={cn(
-          "z-50 animate-fade-in bg-background-basic text-text shadow-header [--fade-in-duration:150ms]",
+          "z-50 bg-background-basic text-text shadow-header motion-reduce:animate-none",
           inline && panelTop === 0 && "invisible",
           inline
-            ? "fixed inset-x-0 w-screen border-y border-border-subtle"
-            : "absolute left-1/2 top-24 w-[min(900px,calc(100vw-48px))] -translate-x-1/2",
+            ? "fixed inset-x-0 w-screen animate-search-dropdown border-y border-border-subtle"
+            : "absolute left-1/2 top-24 w-[min(900px,calc(100vw-48px))] -translate-x-1/2 animate-fade-in [--fade-in-duration:150ms]",
         )}
         style={inline ? { top: panelTop } : undefined}
       >
@@ -192,7 +192,7 @@ function SearchProductCard({
       <ProductCard
         product={item.product}
         className="h-full"
-        enableQuickView
+        enableQuickView={false}
         showBadge
         showPrice
         showStar

app/components/layout/predictive-search/PredictiveSearch/SearchHeader/search-type-header.tsx

@@ -38,7 +38,8 @@ export function SearchTypeHeader(props: PredictiveSearchProps) {
       <PredictiveSearchForm
         className={cn(
           "predictive-search-form",
-          inline && "predictive-search-form--inline",
+          inline &&
+            "predictive-search-form--inline animate-search-reveal motion-reduce:animate-none",
         )}
       >
         {({ fetchResults, inputRef }) => (
@@ -81,7 +82,7 @@ export function SearchTypeHeader(props: PredictiveSearchProps) {
                 <button
                   type="submit"
                   aria-label={t("search.title")}
-                  className="flex size-6 shrink-0 cursor-pointer items-center justify-center text-text-primary"
+                  className="flex size-6 shrink-0 items-center justify-center text-text-primary"
                 >
                   <IconSearch
                     className={cn("size-6", !inline && "opacity-55")}