Replace tier pips

src/app/inventory/ItemIcon.tsx

@@ -17,6 +17,10 @@ import {
 } from 'data/d2/generated-enums';
 import holofoilAnim from 'images/holofoil-anim.apng';
 import pursuitComplete from 'images/pursuitComplete.svg';
+import tier2 from 'images/tier-2.svg';
+import tier3 from 'images/tier-3.svg';
+import tier4 from 'images/tier-4.svg';
+import tier5 from 'images/tier-5.svg';
 import { DimItem } from './item-types';
 import * as styles from './ItemIcon.m.scss';
 import { isPluggableItem } from './store/sockets';
@@ -40,6 +44,8 @@ const strandWrongColorPlugCategoryHashes = [
   PlugCategoryHashes.WarlockStrandMovement,
 ];
 
+const pips = [undefined, `~${tier2}`, `~${tier3}`, `~${tier4}`, `~${tier5}`];
+
 export function getItemImageStyles(item: DimItem, className?: string) {
   const isCapped = item.maxStackSize > 1 && item.amount === item.maxStackSize && item.uniqueStack;
   const borderless =
@@ -146,10 +152,7 @@ export default function ItemIcon({ item, className }: { item: DimItem; className
   ]);
   // These are aligned with the border, not the image
   const seasonAndPips = compact([
-    // Tier pips
-    item.tier > 0 &&
-      !item.isEngram &&
-      itemConstants?.gearTierOverlayImagePaths[Math.min(item.tier - 1, 4)],
+    item.tier > 0 && !item.isEngram && pips[Math.min(item.tier - 1, 4)],
   ]);
 
   if (craftedOverlays.length === 0 && seasonBanner) {

src/app/item-popup/ItemPopupHeader.m.scss

@@ -140,8 +140,8 @@ $iconOverlayScale: math.div(65, 96);
   position: absolute;
   box-sizing: border-box;
   align-items: center;
-  top: 0;
-  left: 0;
+  top: -1.5px;
+  left: -1.5px;
   width: math.round(28px * $iconOverlayScale);
   height: math.round(96px * $iconOverlayScale);
   background-size: cover;

src/app/item-popup/ItemPopupHeader.tsx

@@ -11,6 +11,10 @@ import { itemTypeName } from 'app/utils/item-utils';
 import { LookupTable } from 'app/utils/util-types';
 import clsx from 'clsx';
 import { ItemCategoryHashes } from 'data/d2/generated-enums';
+import tier2 from 'images/tier-2.svg';
+import tier3 from 'images/tier-3.svg';
+import tier4 from 'images/tier-4.svg';
+import tier5 from 'images/tier-5.svg';
 import { useState } from 'react';
 import { DimItem } from '../inventory/item-types';
 import { AmmoIcon } from './AmmoIcon';
@@ -23,6 +27,7 @@ const rarityClassName: LookupTable<ItemRarityName, string> = {
   Legendary: styles.legendary,
   Exotic: styles.exotic,
 };
+const pips = [undefined, `~${tier2}`, `~${tier3}`, `~${tier4}`, `~${tier5}`];
 
 export default function ItemPopupHeader({
   item,
@@ -99,7 +104,7 @@ function SeasonTierBanner({ item }: { item: DimItem }) {
   const seasonIcon = item.iconDef.secondaryBackground;
   const backgrounds = compact([
     // Tier pips
-    item.tier > 0 && itemConstants.gearTierOverlayImagePaths[Math.min(item.tier - 1, 4)],
+    item.tier > 0 && pips[Math.min(item.tier - 1, 4)],
     // Black stripe
     item.iconDef.secondaryBackground && itemConstants.watermarkDropShadowPath,
   ]);