finalize badge variants/sizes

Author: steven-tey

apps/web/ui/partners/partner-info-cards.tsx

@@ -46,8 +46,8 @@ import {
 } from "./fraud-risks/partner-fraud-banner";
 import { PartnerFraudIndicator } from "./fraud-risks/partner-fraud-indicator";
 import { PartnerAvatar } from "./partner-avatar";
-import { PartnerNetworkStatusBadge } from "./partner-network/partner-network-status-badge";
 import { PartnerInfoGroup } from "./partner-info-group";
+import { PartnerNetworkStatusBadge } from "./partner-network/partner-network-status-badge";
 import { PartnerStarButton } from "./partner-star-button";
 import { PartnerStatusBadgeWithTooltip } from "./partner-status-badge-with-tooltip";
 import { PartnerTagsList } from "./partner-tags-list";
@@ -56,7 +56,6 @@ import {
   getPayoutMethodLabel,
 } from "./payouts/payout-method-config";
 import { ProgramRewardList } from "./program-reward-list";
-import { TrustedPartnerBadge } from "./trusted-partner-badge";
 import {
   UpdatePartnerTagsModal,
   useUpdatePartnerTagsModal,
@@ -265,9 +264,6 @@ export function PartnerInfoCards({
                 ) : (
                   <div className="size-20 animate-pulse rounded-full bg-neutral-200" />
                 )}
-                {partner?.networkStatus === "trusted" && (
-                  <TrustedPartnerBadge />
-                )}
               </div>
 
               <div className="flex items-center gap-2">
@@ -295,6 +291,7 @@ export function PartnerInfoCards({
                   {"networkStatus" in partner && partner.networkStatus && (
                     <PartnerNetworkStatusBadge
                       networkStatus={partner.networkStatus}
+                      size="large"
                     />
                   )}
 

apps/web/ui/partners/partner-network/partner-network-status-badge.tsx

@@ -1,14 +1,17 @@
 import { PartnerNetworkStatus } from "@dub/prisma/client";
 import { BadgeCheck2Fill, Tooltip } from "@dub/ui";
+import { cn } from "@dub/utils";
 import { TrustedPartnerBadge } from "../trusted-partner-badge";
 
 export function PartnerNetworkStatusBadge({
   networkStatus,
+  size = "small",
 }: {
   networkStatus: PartnerNetworkStatus;
+  size?: "small" | "large";
 }) {
   if (networkStatus === "trusted") {
-    return <TrustedPartnerBadge variant="inline" />;
+    return <TrustedPartnerBadge variant="inline" size={size} />;
   }
 
   if (networkStatus === "approved") {
@@ -28,7 +31,12 @@ export function PartnerNetworkStatusBadge({
           </div>
         }
       >
-        <BadgeCheck2Fill className="size-3.5 shrink-0 text-blue-500" />
+        <BadgeCheck2Fill
+          className={cn(
+            "shrink-0 text-blue-500",
+            size === "small" ? "size-3.5" : "size-5",
+          )}
+        />
       </Tooltip>
     );
   }

apps/web/ui/partners/trusted-partner-badge.tsx

@@ -5,14 +5,16 @@ const TRUSTED_BADGE_SRC = "https://assets.dub.co/icons/trusted-badge.svg";
 
 export function TrustedPartnerBadge({
   variant = "overlay",
+  size = "small",
 }: {
   variant?: "overlay" | "inline";
+  size?: "small" | "large";
 }) {
   const badge = (
     <img
       alt="Trusted partner badge"
       src={TRUSTED_BADGE_SRC}
-      className={cn("shrink-0", variant === "inline" ? "size-3.5" : "size-6")}
+      className={cn("shrink-0", size === "small" ? "size-3.5" : "size-5")}
     />
   );