Use longest-prefix match in getCardFeedColors

Sorts keys by length descending before prefix-matching so that more
specific keys (e.g. vcf.something) always win over shorter ones
(e.g. vcf), regardless of insertion order in CARD_FEED_COLORS.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: roryabraham

src/libs/CardArtworkColors.ts

@@ -18,8 +18,9 @@ import colors from '@styles/theme/colors';
  * <path>, and read its fill — either the inline fill="..." attribute or the CSS class.
  *
  * Keys are the runtime string values of CONST.COMPANY_CARD.FEED_BANK_NAME and
- * CONST.EXPENSIFY_CARD.BANK. Lookup uses prefix-matching (see getCardFeedColors),
- * so partial feed-name suffixes (e.g. "vcf123") still resolve correctly.
+ * CONST.EXPENSIFY_CARD.BANK. Lookup uses longest-prefix matching (see getCardFeedColors),
+ * so partial feed-name suffixes (e.g. "vcf123") resolve correctly, and more specific keys
+ * always take precedence over shorter ones.
  */
 
 type CardArtworkColors = {background: string; text: string};

src/libs/CardUtils.ts

@@ -60,7 +60,9 @@ function getCardFeedColors(cardFeed: string | undefined): {background: string; t
     if (!cardFeed) {
         return GENERIC_CARD_COLORS;
     }
-    const feedKey = Object.keys(CARD_FEED_COLORS).find((key) => cardFeed.startsWith(key));
+    const feedKey = Object.keys(CARD_FEED_COLORS)
+        .sort((a, b) => b.length - a.length)
+        .find((key) => cardFeed.startsWith(key));
     return feedKey !== undefined ? CARD_FEED_COLORS[feedKey] : GENERIC_CARD_COLORS;
 }