diff --git a/src/app/inventory/ItemIcon.tsx b/src/app/inventory/ItemIcon.tsx index 2298d98f4e..b62183e606 100644 --- a/src/app/inventory/ItemIcon.tsx +++ b/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) { diff --git a/src/app/item-popup/ItemPopupHeader.m.scss b/src/app/item-popup/ItemPopupHeader.m.scss index 915c8c3369..abc12ad581 100644 --- a/src/app/item-popup/ItemPopupHeader.m.scss +++ b/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; diff --git a/src/app/item-popup/ItemPopupHeader.tsx b/src/app/item-popup/ItemPopupHeader.tsx index b52ac26174..93ba418222 100644 --- a/src/app/item-popup/ItemPopupHeader.tsx +++ b/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 = { 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, ]); diff --git a/src/images/tier-2.svg b/src/images/tier-2.svg new file mode 100644 index 0000000000..77b0371e14 --- /dev/null +++ b/src/images/tier-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/tier-3.svg b/src/images/tier-3.svg new file mode 100644 index 0000000000..617a2ca6f8 --- /dev/null +++ b/src/images/tier-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/tier-4.svg b/src/images/tier-4.svg new file mode 100644 index 0000000000..c4fa8822c8 --- /dev/null +++ b/src/images/tier-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/tier-5.svg b/src/images/tier-5.svg new file mode 100644 index 0000000000..cda347680b --- /dev/null +++ b/src/images/tier-5.svg @@ -0,0 +1 @@ + \ No newline at end of file