Clearer vendor item icon

[bhollis]

Fixes #10108? This adds the vendor's icon next to the shopping card and makes the cart itself a little easier to see (and theme-matched):

[lowPolySkeleton]

Hmm I dunno that this really helps with discovery or notability of the vendor items, I had no idea vendors even had identifiable icons...

Maybe we just make the cart icon tag lime green to draw attention to it? Or even overlay it onto the item image itself so it's like in your face.

[bhollis]

Yeah, I was thinking of putting it in the icon spot, though we'd have to move the tooltips around a lot, and the "cart" icon doesn't resolve well when small. Maybe just make it lime green in its current position.

[FlaminSarge]

How does this look? I have no idea what I'm doing so there's definitely a less janky way to handle this with CSS but

Patch:

diff --git a/src/app/loadout/loadout-ui/Sockets.m.scss b/src/app/loadout/loadout-ui/Sockets.m.scss
index a72b64ec5..8319aeb78 100644
--- a/src/app/loadout/loadout-ui/Sockets.m.scss
+++ b/src/app/loadout/loadout-ui/Sockets.m.scss
@@ -22,7 +22,6 @@
 .vendorItemContainer {
   composes: flexRow from '../../dim-ui/common.m.scss';
   gap: 2px;
-  grid-column: 1 / span 2;
 }
 
 .vendorItem {
@@ -38,3 +37,12 @@
     object-fit: contain;
   }
 }
+
+.subIcon {
+  position: absolute;
+  bottom: -16px;
+  right: -1px;
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+}
diff --git a/src/app/loadout/loadout-ui/Sockets.m.scss.d.ts b/src/app/loadout/loadout-ui/Sockets.m.scss.d.ts
index a1509bcbc..fda3db5d6 100644
--- a/src/app/loadout/loadout-ui/Sockets.m.scss.d.ts
+++ b/src/app/loadout/loadout-ui/Sockets.m.scss.d.ts
@@ -4,6 +4,7 @@ interface CssExports {
   'automaticallyPicked': string;
   'lockedItems': string;
   'small': string;
+  'subIcon': string;
   'vendorItem': string;
   'vendorItemContainer': string;
 }
diff --git a/src/app/loadout/loadout-ui/Sockets.tsx b/src/app/loadout/loadout-ui/Sockets.tsx
index 09a2e5690..b6b3c73cb 100644
--- a/src/app/loadout/loadout-ui/Sockets.tsx
+++ b/src/app/loadout/loadout-ui/Sockets.tsx
@@ -141,13 +141,13 @@ function VendorItemPlug({ item }: { item: DimItem }) {
         return <>{t('Compare.IsVendorItem', { vendorName })}</>;
       }}
     >
-      <div className={clsx('item', styles.vendorItem)}>
-        <AppIcon icon={shoppingCart} />
-      </div>
       <div className={clsx('item', styles.vendorItem)}>
         {vendorDef?.displayProperties.icon && (
           <BungieImage src={vendorDef.displayProperties.icon} />
         )}
+        <div className={clsx('item', styles.subIcon)}>
+          <AppIcon icon={shoppingCart} />
+        </div>
       </div>
     </PressTip>
   );

[bhollis]

I think the vendor icon is a dead end. I'll keep the translation updates, then try something else.