feat(FN-296): replace text-based payment trust badges with card brand SVG icons

Commits merged:
- feat(FN-296): replace text-based payment trust badges with card brand SVG icons

Files changed:
.../src/routes/dashboard/subscription/index.tsx    | 33 ++------
 packages/ui/src/index.ts                           |  1 +
 packages/ui/src/payment-cards.tsx                  | 91 ++++++++++++++++++++++
 3 files changed, 97 insertions(+), 28 deletions(-)

Fusion-Task-Id: FN-296

apps/web/src/routes/dashboard/subscription/index.tsx

@@ -12,6 +12,7 @@ import { Badge } from "@sase/ui";
 import { Button } from "@sase/ui";
 import { Skeleton } from "@sase/ui";
 import { Separator } from "@sase/ui";
+import { AmexIcon, MastercardIcon, TroyIcon, VisaIcon } from "@sase/ui";
 import {
   Dialog,
   DialogContent,
@@ -1280,34 +1281,10 @@ export function SubscriptionPage() {
                   aria-label={t("subscription.paymentTrustAcceptedCards")}
                   className="ml-1 flex items-center gap-1"
                 >
-                  <Badge
-                    variant="outline"
-                    className="px-1.5 py-0 text-xs font-normal"
-                    aria-hidden="true"
-                  >
-                    Visa
-                  </Badge>
-                  <Badge
-                    variant="outline"
-                    className="px-1.5 py-0 text-xs font-normal"
-                    aria-hidden="true"
-                  >
-                    Mastercard
-                  </Badge>
-                  <Badge
-                    variant="outline"
-                    className="px-1.5 py-0 text-xs font-normal"
-                    aria-hidden="true"
-                  >
-                    Troy
-                  </Badge>
-                  <Badge
-                    variant="outline"
-                    className="px-1.5 py-0 text-xs font-normal"
-                    aria-hidden="true"
-                  >
-                    AmEx
-                  </Badge>
+                  <VisaIcon aria-hidden="true" className="h-5 w-auto" />
+                  <MastercardIcon aria-hidden="true" className="h-5 w-auto" />
+                  <TroyIcon aria-hidden="true" className="h-5 w-auto" />
+                  <AmexIcon aria-hidden="true" className="h-5 w-auto" />
                 </span>
               </div>
             </div>

packages/ui/src/index.ts

@@ -1,4 +1,5 @@
 export { cn } from "./utils";
+export { VisaIcon, MastercardIcon, TroyIcon, AmexIcon } from "./payment-cards";
 export { Button, buttonVariants, type ButtonProps } from "./button";
 export { Input } from "./input";
 export {

packages/ui/src/payment-cards.tsx

@@ -0,0 +1,91 @@
+import type { SVGProps } from "react";
+
+/**
+ * Card brand SVG icons for payment trust badges.
+ * Each accepts standard SVG props (className for Tailwind sizing, etc.)
+ * and should be rendered with aria-hidden="true" when the parent has a descriptive aria-label.
+ */
+
+export function VisaIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 38 24"
+      className={className}
+      {...props}
+    >
+      <rect width="38" height="24" rx="3" fill="#1434CB" />
+      <path
+        d="M16.15 7.91l-2.1 7.81h-2.51l2.1-7.81h2.51zm3.02 5.06l1.11-2.94.62 2.94h-1.73zm2.27 2.75h2.32l-1.49-7.81h-2.07c-.47 0-.87.27-1.04.68l-3.22 7.13h2.34l.46-1.27h2.86l.27 1.27h.06zm-8.78-6.08c.05-.33.16-.46.16-.46l1.94-3.53-.17-.01H11.4l-.02.08c.54.13 1.15.35 1.52.82.22.27.29.5.32.73l-3.94 6.37H7.8l1.36-6.4c.07-.33.11-.39.33-.41L6.98 7.5l-.01.08c.4.1 1.05.28 1.42.56.22.16.28.37.31.65l-1.32 7.09h2.51l3.79-6.24z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function MastercardIcon({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 38 24"
+      className={className}
+      {...props}
+    >
+      <rect width="38" height="24" rx="3" fill="#1A1F36" />
+      <circle cx="16" cy="12" r="6" fill="#EB001B" opacity="0.9" />
+      <circle cx="23" cy="12" r="6" fill="#F79E1B" opacity="0.9" />
+      <circle cx="19.5" cy="12" r="3" fill="#FF5F00" opacity="0.85" />
+    </svg>
+  );
+}
+
+export function TroyIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 38 24"
+      className={className}
+      {...props}
+    >
+      <rect width="38" height="24" rx="3" fill="#0B2050" />
+      <text
+        x="19"
+        y="13"
+        dominantBaseline="central"
+        textAnchor="middle"
+        fill="#00D4B4"
+        fontSize="12"
+        fontWeight="700"
+        fontFamily="Arial, Helvetica, sans-serif"
+        letterSpacing="1"
+      >
+        TROY
+      </text>
+    </svg>
+  );
+}
+
+export function AmexIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 38 24"
+      className={className}
+      {...props}
+    >
+      <rect width="38" height="24" rx="3" fill="#006FCF" />
+      <text
+        x="19"
+        y="13"
+        dominantBaseline="central"
+        textAnchor="middle"
+        fill="white"
+        fontSize="10"
+        fontWeight="700"
+        fontFamily="Arial, Helvetica, sans-serif"
+        letterSpacing="0.5"
+      >
+        AMEX
+      </text>
+    </svg>
+  );
+}