standardize partner avatars

steven-tey · steven-tey · commit c65b01869810 · 2025-12-05T19:49:32.000-08:00
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/fraud/resolve-fraud-group-modal.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/fraud/resolve-fraud-group-modal.tsx
@@ -93,8 +93,8 @@ function ResolveFraudGroupModal({
             <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
               <div className="flex items-center gap-4">
                 <img
-                  src={`${OG_AVATAR_URL}${partner.name || "Unknown"}`}
-                  alt={partner.name || "Unknown"}
+                  src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                  alt={partner.id}
                   className="size-10 rounded-full bg-white"
                 />
                 <div className="flex min-w-0 flex-col">
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx
@@ -441,8 +441,8 @@ function PartnerCard({
           <div className="relative w-fit">
             {partner ? (
               <img
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className="size-16 rounded-full border border-neutral-100"
               />
             ) : (
diff --git a/apps/web/ui/analytics/use-analytics-filters.tsx b/apps/web/ui/analytics/use-analytics-filters.tsx
@@ -457,10 +457,8 @@ export function useAnalyticsFilters({
                       label: partner.name,
                       icon: (
                         <img
-                          src={
-                            partner.image || `${OG_AVATAR_URL}${partner.name}`
-                          }
-                          alt={`${partner.name} image`}
+                          src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                          alt={partner.id}
                           className="size-4 rounded-full"
                         />
                       ),
diff --git a/apps/web/ui/links/link-builder/link-partner-details.tsx b/apps/web/ui/links/link-builder/link-partner-details.tsx
@@ -24,8 +24,8 @@ export function LinkPartnerDetails({
         <div className="flex min-w-0 items-center gap-3">
           {partner ? (
             <img
-              src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-              alt={partner.name}
+              src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+              alt={partner.id}
               className="size-8 rounded-full"
             />
           ) : (
@@ -60,15 +60,11 @@ export function LinkPartnerDetails({
         {[
           [
             "Revenue",
-            partner
-              ? currencyFormatter(partner.totalSaleAmount)
-              : undefined,
+            partner ? currencyFormatter(partner.totalSaleAmount) : undefined,
           ],
           [
             "Commissions",
-            partner
-              ? currencyFormatter(partner.totalCommissions)
-              : undefined,
+            partner ? currencyFormatter(partner.totalCommissions) : undefined,
           ],
           [
             "Net revenue",
diff --git a/apps/web/ui/modals/archive-partner-modal.tsx b/apps/web/ui/modals/archive-partner-modal.tsx
@@ -68,8 +68,8 @@ function ArchivePartnerModal({
         <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
           <div className="flex items-center gap-4">
             <img
-              src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-              alt={partner.name}
+              src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+              alt={partner.id}
               className="size-10 rounded-full bg-white"
             />
             <div className="flex min-w-0 flex-col">
diff --git a/apps/web/ui/modals/ban-partner-modal.tsx b/apps/web/ui/modals/ban-partner-modal.tsx
@@ -94,8 +94,8 @@ function BanPartnerModal({
           <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
             <div className="flex items-center gap-4">
               <img
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className="size-10 rounded-full bg-white"
               />
               <div className="flex min-w-0 flex-col">
diff --git a/apps/web/ui/modals/bulk-approve-partners-modal.tsx b/apps/web/ui/modals/bulk-approve-partners-modal.tsx
@@ -82,8 +82,8 @@ function BulkApprovePartnersModal({
             {partners.slice(0, 3).map((partner, index) => (
               <img
                 key={partner.id}
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className={cn(
                   "inline-block size-7 rounded-full border-2 border-neutral-100",
                   index > 0 && "-ml-2.5",
diff --git a/apps/web/ui/modals/bulk-ban-partners-modal.tsx b/apps/web/ui/modals/bulk-ban-partners-modal.tsx
@@ -186,8 +186,8 @@ function BulkBanPartnersModal({
                   {partners.slice(0, 3).map((partner, index) => (
                     <img
                       key={partner.id}
-                      src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                      alt={partner.name}
+                      src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                      alt={partner.id}
                       className={cn(
                         "inline-block size-7 rounded-full border-2 border-neutral-100 bg-white",
                         index > 0 && "-ml-2.5",
diff --git a/apps/web/ui/modals/bulk-reject-partners-modal.tsx b/apps/web/ui/modals/bulk-reject-partners-modal.tsx
@@ -86,8 +86,8 @@ function BulkRejectPartnersModal({
             {partners.slice(0, 3).map((partner, index) => (
               <img
                 key={partner.id}
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className={cn(
                   "inline-block size-7 rounded-full border-2 border-neutral-100",
                   index > 0 && "-ml-2.5",
diff --git a/apps/web/ui/modals/change-group-modal.tsx b/apps/web/ui/modals/change-group-modal.tsx
@@ -93,8 +93,8 @@ function ChangeGroupModal({
                 {partners.slice(0, 3).map((partner, index) => (
                   <img
                     key={partner.id}
-                    src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                    alt={partner.name}
+                    src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                    alt={partner.id}
                     className={cn(
                       "inline-block size-7 rounded-full border-2 border-neutral-100 bg-white",
                       index > 0 && "-ml-2.5",
diff --git a/apps/web/ui/modals/deactivate-partner-modal.tsx b/apps/web/ui/modals/deactivate-partner-modal.tsx
@@ -85,8 +85,8 @@ function DeactivatePartnerModal({
           <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
             <div className="flex items-center gap-4">
               <img
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className="size-10 rounded-full bg-white"
               />
               <div className="flex min-w-0 flex-col">
diff --git a/apps/web/ui/modals/reactivate-partner-modal.tsx b/apps/web/ui/modals/reactivate-partner-modal.tsx
@@ -60,8 +60,8 @@ function ReactivatePartnerModal({
         <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
           <div className="flex items-center gap-4">
             <img
-              src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-              alt={partner.name}
+              src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+              alt={partner.id}
               className="size-10 rounded-full bg-white"
             />
             <div className="flex min-w-0 flex-col">
diff --git a/apps/web/ui/modals/reject-partner-application-modal.tsx b/apps/web/ui/modals/reject-partner-application-modal.tsx
@@ -86,8 +86,8 @@ export function RejectPartnerApplicationModal({
           <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
             <div className="flex items-center gap-4">
               <img
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name || "Partner avatar"}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className="size-10 rounded-full bg-white"
               />
               <div className="flex min-w-0 flex-col">
@@ -183,6 +183,9 @@ export function useRejectPartnerApplicationModal({
       setShowRejectPartnerApplicationModal,
       RejectPartnerApplicationModal: RejectPartnerApplicationModalCallback,
     }),
-    [setShowRejectPartnerApplicationModal, RejectPartnerApplicationModalCallback],
+    [
+      setShowRejectPartnerApplicationModal,
+      RejectPartnerApplicationModalCallback,
+    ],
   );
 }
diff --git a/apps/web/ui/modals/unban-partner-modal.tsx b/apps/web/ui/modals/unban-partner-modal.tsx
@@ -85,8 +85,8 @@ function UnbanPartnerModal({
           <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
             <div className="flex items-center gap-4">
               <img
-                src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                alt={partner.name}
+                src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                alt={partner.id}
                 className="size-10 rounded-full bg-white"
               />
               <div className="flex min-w-0 flex-col">
diff --git a/apps/web/ui/partners/fraud-risks/fraud-review-sheet.tsx b/apps/web/ui/partners/fraud-risks/fraud-review-sheet.tsx
@@ -143,8 +143,8 @@ function FraudReviewSheetContent({
             <div className="bg-bg-muted border-border-subtle flex items-center justify-between gap-3 rounded-xl border px-4 py-3">
               <div className="flex min-w-0 items-center gap-3">
                 <img
-                  src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                  alt={partner.name}
+                  src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                  alt={partner.id}
                   className="size-10 rounded-full"
                 />
                 <div className="flex min-w-0 flex-col">
diff --git a/apps/web/ui/partners/overview/blocks/commissions-block.tsx b/apps/web/ui/partners/overview/blocks/commissions-block.tsx
@@ -50,8 +50,8 @@ export function CommissionsBlock() {
               >
                 <div className="flex min-w-0 items-center gap-2">
                   <img
-                    src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                    alt={`${partner.name} avatar`}
+                    src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                    alt={partner.id}
                     className="size-4 rounded-full"
                   />
                   <span className="min-w-0 truncate">{partner.name}</span>
diff --git a/apps/web/ui/partners/partner-info-cards.tsx b/apps/web/ui/partners/partner-info-cards.tsx
@@ -201,8 +201,8 @@ export function PartnerInfoCards({
               <div className="relative w-fit">
                 {partner ? (
                   <img
-                    src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-                    alt={partner.name}
+                    src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+                    alt={partner.id}
                     className="size-20 rounded-full border border-neutral-100"
                   />
                 ) : (
diff --git a/apps/web/ui/partners/partner-info-section.tsx b/apps/web/ui/partners/partner-info-section.tsx
@@ -26,8 +26,8 @@ export function PartnerInfoSection({
       <div>
         <div className="relative w-fit">
           <img
-            src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-            alt={partner.name}
+            src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+            alt={partner.id}
             className="size-12 rounded-full"
           />
           {partner.country && (
diff --git a/apps/web/ui/partners/partner-row-item.tsx b/apps/web/ui/partners/partner-row-item.tsx
@@ -145,8 +145,8 @@ export function PartnerRowItem({
       >
         <div className="relative shrink-0">
           <img
-            src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
-            alt={partner.name}
+            src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
+            alt={partner.id}
             className="size-5 shrink-0 rounded-full"
           />
           {showPayoutsEnabled && statusKey && (
diff --git a/apps/web/ui/partners/partner-selector.tsx b/apps/web/ui/partners/partner-selector.tsx
@@ -50,7 +50,7 @@ export function PartnerSelector({
       label: partner.name,
       icon: (
         <img
-          src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
+          src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
           className="size-4 rounded-full"
         />
       ),
@@ -71,7 +71,7 @@ export function PartnerSelector({
       label: partner.name,
       icon: (
         <img
-          src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
+          src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
           className="size-4 rounded-full"
         />
       ),
diff --git a/packages/email/src/templates/bounty-new-submission.tsx b/packages/email/src/templates/bounty-new-submission.tsx
@@ -74,10 +74,10 @@ export default function NewBountySubmission({
               <div className="flex h-10 items-center">
                 <div className="relative w-fit">
                   <Img
-                    src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
+                    src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
                     width="32"
                     height="32"
-                    alt={partner.name}
+                    alt={partner.id}
                     className="rounded-full border border-solid border-neutral-100"
                   />
                 </div>
diff --git a/packages/email/src/templates/new-message-from-partner.tsx b/packages/email/src/templates/new-message-from-partner.tsx
@@ -77,10 +77,10 @@ export default function NewMessageFromPartner({
                 <Row className={idx > 0 ? "pt-3" : ""}>
                   <Column className="align-bottom">
                     <Img
-                      src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
+                      src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
                       width="32"
                       height="32"
-                      alt={partner.name}
+                      alt={partner.id}
                       className="rounded-full"
                     />
                   </Column>
diff --git a/packages/email/src/templates/partner-application-received.tsx b/packages/email/src/templates/partner-application-received.tsx
@@ -108,10 +108,10 @@ export default function PartnerApplicationReceived({
                   <div>
                     <div className="relative w-fit">
                       <Img
-                        src={partner.image || `${OG_AVATAR_URL}${partner.name}`}
+                        src={partner.image || `${OG_AVATAR_URL}${partner.id}`}
                         width="48"
                         height="48"
-                        alt={partner.name}
+                        alt={partner.id}
                         className="rounded-full"
                       />
 
