Mod Picker updates for stackable/unstackable and selection interactions

[bhollis]

I went a little crazy with some updates to the mod picker. Please check out the preview and LMK what you think. fyi @grSalonga

1. Swapped out the requirements text and the "stackable" / "unstackable" labels for an icon+label under the mod name.
2. Replaced the requirements text with the stackable/unstackable label in the mod tooltips too.
3. Show clarity descriptions for mods - now that we've bought ourselves some space. Removing the "Community Insights" header helps - it was too much when shown on every mod.
4. Remove borders from the unselected tiles to make them less visually overwhelming.
5. Mods can now be selected and unselected by clicking anywhere on the tile. The X in the corner is no more. For stackable mods, there's a "2x" style label showing how many are stacked, and +/- buttons that should be clearer.

[guise]

Looks great - the descriptions are much needed since the recent nerfs.

Some suggestions

• "Not stackable" skims-reads a bit better than "Unstackable" IMO; it's 2 words so easier to visually distinguish and 'Not' is more explicit than 'Un' in this context
• Use a single icon for the label to reduce visual elements
  • Not stackable would need a custom icon; this one just has a reduced opacity layer stack with a 45º strikethrough (at full opacity) with a small mask around it
• The stackable label will always be widowed so it's more readable appended after the mod description rather than sandwiched between the title/description where it can sometimes get lost
  • Going a step further, nesting the stackable label in the insight block also helps call it out and moves it closer to the detailed stacking behaviour (although this may not work as well in the tooltip)

[nev-r]

at first glance, i found myself wondering what the 2x meant, like maybe it was an effectiveness multiplier or something. it feels a little orphaned there, compared to being next to the + and - buttons, which would provide additional context

[nev-r]

alternately, left side being

2x
+
-

like a remote control volume rocker could work

[bhollis]

Yeah I started off with the buttons on the left but they felt quite strange being there vs aligned to an edge of the box.

[grySal]

I agree that when you first look at it the 2x looks confusing but I feel like that when someone starts adding stackable mods and they see the number change, they will instantly know what it means.

Overall these changes look great.

[ryan-rushton]

Love the changes in this PR, although I haven't been playing for a bit so its a little overwhelming seeing all the new info (maybe a good perspective 🤔).

Random thought, because there are so many mods, I think some form of navigation header would reduce the "holy shit, many mods" feeling that you get when scrolling.

Excuse my terrible mac screenshot annotations but imagine if the red boxes were buttons (similar to organiser) where each of the mod types gets a button and icon (can probably do without text). Clicking of that just acts as a filter. I know you can do it with search, but research I see through work is that a lot of users use text filtering as a last resort in busy UI's

[bhollis]

Re: mod pills: #9304

[bhollis]

OK I think I've addressed all the great suggestions here! I also made the headers sticky so at least it's easier to keep track of where you are.

[bhollis]

OK a few last tweaks:

1. @nev-r I bumped the icon title font size down a notch. I agree that basically all the text across DIM is too small (see Scale font size #9862) and I want to set up a set of variables for our font sizes, but 18px was just too much of a difference next to the default 12px text.
2. I made item tiles not do their default scaling on mobile, which was making them too large.
3. The volume rocker now disables the up button when you can't add more, instead of removing it.
4. Maxed/selected items are no longer greyed out. The rocker / selection status does enough to indicate that it's maxed.

[bhollis]

I'm gonna merge but still open to feedback/suggestions for followups :-)