Merge pull request #10044 from DestinyItemManager/subclass-tweaks

LO: Subclass/mod tweaks
DestinyItemManager · Nov 6, 2023 · 8fb6c0e · 8fb6c0e
2 parents 8ec6b42 + 3d78e1e
commit 8fb6c0e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 10 deletions.
diff --git a/src/app/loadout-builder/LoadoutBuilder.m.scss b/src/app/loadout-builder/LoadoutBuilder.m.scss
@@ -79,7 +79,13 @@
   background-color: rgba(0, 0, 0, 0.4);
   padding: 8px;
   gap: 0;
-  // Fit 5 mods across, regardless of what the user's item size is
-  --item-size: 47px;
-  --loadout-edit-subclass-columns: 4;
+  // Fit 7 mods across, regardless of what the user's item size is
+  --item-size: 50px;
+  --loadout-edit-subclass-columns: 7;
+}
+
+.subclassSection {
+  composes: loadoutEditSection;
+  // Adjust these down a bit
+  --item-size: 48px;
 }
diff --git a/src/app/loadout-builder/LoadoutBuilder.m.scss.d.ts b/src/app/loadout-builder/LoadoutBuilder.m.scss.d.ts
diff --git a/src/app/loadout-builder/LoadoutBuilder.tsx b/src/app/loadout-builder/LoadoutBuilder.tsx
@@ -375,7 +375,7 @@ export default memo(function LoadoutBuilder({
         store={selectedStore}
         subclass={subclass}
         setLoadout={setLoadout}
-        className={styles.loadoutEditSection}
+        className={styles.subclassSection}
       />
       <LoadoutOptimizerPinnedItems
         chooseItem={chooseItem}

diff --git a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss
@@ -52,6 +52,22 @@
   composes: resetButton from '../../dim-ui/common.m.scss';
   height: 100%;
   width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > * {
+    position: absolute;
+  }
+
+  color: #999;
+  &:hover,
+  &:focus-visible {
+    color: white;
+    rect {
+      stroke: var(--theme-accent-primary);
+    }
+  }
 }
 
 .missingItem {

diff --git a/src/app/loadout/loadout-edit/LoadoutEditSubclass.tsx b/src/app/loadout/loadout-edit/LoadoutEditSubclass.tsx
@@ -5,7 +5,7 @@ import ItemPopupTrigger from 'app/inventory/ItemPopupTrigger';
 import { storesSelector } from 'app/inventory/selectors';
 import { ResolvedLoadoutItem } from 'app/loadout-drawer/loadout-types';
 import { useD2Definitions } from 'app/manifest/selectors';
-import { AppIcon, powerActionIcon } from 'app/shell/icons';
+import { AppIcon, addIcon, powerActionIcon } from 'app/shell/icons';
 import { DestinyClass } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
 import { BucketHashes, SocketCategoryHashes } from 'data/d2/generated-enums';
@@ -80,8 +80,14 @@ export default function LoadoutEditSubclass({
             </ItemPopupTrigger>
           </ClosableContainer>
         ) : (
-          <button className={styles.classButton} type="button" onClick={onPick}>
+          <button
+            className={styles.classButton}
+            type="button"
+            onClick={onPick}
+            title={t('Loadouts.ChooseItem', { name: t('Bucket.Class') })}
+          >
             <EmptySubclass border />
+            <AppIcon icon={addIcon} />
           </button>
         )}
         {power !== 0 && (

diff --git a/src/app/loadout/loadout-ui/LoadoutMods.m.scss b/src/app/loadout/loadout-ui/LoadoutMods.m.scss
@@ -36,11 +36,9 @@
   height: var(--item-icon-size);
   width: var(--item-icon-size);
 
-  &:focus {
+  &:hover,
+  &:focus-visible {
     border-color: var(--theme-accent-primary);
-  }
-
-  &:hover {
     color: white;
   }
 }