Merge pull request #10885 from DestinyItemManager/store-bucket

A variety of CSS modules cleanup + fix well-rested

src/app/destiny1/loadout-drawer/Buttons.m.scss

@@ -1,5 +1,5 @@
 .add {
-  composes: pull-item-button from global;
+  composes: pullItemButton from '../../inventory-page/StoreBucket.m.scss';
   align-items: center;
   box-sizing: border-box;
   display: flex;

src/app/destiny1/loadout-drawer/loadout-drawer.scss

@@ -98,26 +98,11 @@
       width: 100%;
     }
 
-    &.bucket-Class {
-      min-width: 0;
-    }
-
     .equipped {
       padding-bottom: 8px;
     }
   }
 
-  .pull-item-button {
-    box-sizing: border-box;
-    width: calc(var(--item-size) / 2);
-    height: calc((var(--item-size) + ((var(--item-size) / 5) + 4px) - 1px));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    text-decoration: none;
-  }
-
   .loadout-add {
     white-space: nowrap;
   }
@@ -126,11 +111,14 @@
     flex: 1;
     display: flex;
     flex-flow: row wrap;
-  }
-  .sub-bucket.equipped {
-    flex: 0;
-    .loadout-item {
-      margin: 0;
+
+    &.equipped {
+      margin-right: var(--item-margin);
+      flex: 0;
+
+      .loadout-item {
+        margin: 0;
+      }
     }
   }
 }

src/app/dim-ui/ElementIcon.m.scss

@@ -7,7 +7,9 @@
   display: inline-block;
   filter: saturate(2.5);
 
-  :global(.destiny1) & {
+  // The D1 icons are a bit too small in the item badge, so we'll make them a
+  // bit bigger
+  &.d1Badge {
     width: calc((10 / 50) * var(--item-size));
     height: calc((10 / 50) * var(--item-size));
   }

src/app/dim-ui/ElementIcon.tsx

@@ -7,9 +7,11 @@ import styles from './ElementIcon.m.scss';
 export default function ElementIcon({
   element,
   className,
+  d1Badge,
 }: {
   element: DestinyDamageTypeDefinition | null;
   className?: string;
+  d1Badge?: boolean;
 }) {
   if (!element) {
     return null;
@@ -23,7 +25,7 @@ export default function ElementIcon({
     <div
       style={bungieBackgroundStyle(icon)}
       title={element.displayProperties.name}
-      className={clsx(className, styles.element)}
+      className={clsx(className, styles.element, { [styles.d1Badge]: d1Badge })}
     />
   );
 }

src/app/dim-ui/WeaponGroupingIcon.m.scss

@@ -0,0 +1,17 @@
+.ammoIcon {
+  width: 28px;
+  height: 20px;
+}
+
+.elementIcon {
+  width: 50%;
+  height: 0;
+  padding-bottom: 50%;
+  margin: 0;
+}
+
+.weaponTypeIcon {
+  width: 100%;
+  height: auto;
+  filter: invert(1) !important;
+}

src/app/dim-ui/WeaponGroupingIcon.tsx

@@ -3,6 +3,7 @@ import { AmmoIcon } from 'app/item-popup/AmmoIcon';
 import { VaultGroupIcon } from 'app/shell/item-comparators';
 import ElementIcon from './ElementIcon';
 import { getWeaponTypeSvgIconFromCategoryHashes } from './svgs/itemCategory';
+import styles from './WeaponGroupingIcon.m.scss';
 
 export default function WeaponGroupingIcon({
   icon,
@@ -17,7 +18,7 @@ export default function WeaponGroupingIcon({
       return (
         typeIcon && (
           <div className={className}>
-            <img src={typeIcon.svg} className="weapon-type-icon" />
+            <img src={typeIcon.svg} className={styles.weaponTypeIcon} />
           </div>
         )
       );
@@ -26,7 +27,7 @@ export default function WeaponGroupingIcon({
     case 'ammoType': {
       return (
         <div className={className}>
-          <AmmoIcon type={icon.ammoType} className="ammo-icon" />
+          <AmmoIcon type={icon.ammoType} className={styles.ammoIcon} />
         </div>
       );
     }
@@ -44,7 +45,7 @@ export default function WeaponGroupingIcon({
     case 'elementWeapon': {
       return (
         <div className={className}>
-          <ElementIcon className="element-icon" element={icon.element} />
+          <ElementIcon className={styles.elementIcon} element={icon.element} />
         </div>
       );
     }

src/app/dim-ui/common.m.scss

@@ -1,51 +1,53 @@
-.flexWrap {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-.flexRow {
-  display: flex;
-  flex-direction: row;
-}
-
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-}
+@layer common {
+  .flexWrap {
+    display: flex;
+    flex-flow: row wrap;
+  }
 
-.resetButton {
-  text-align: center;
-  color: inherit;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font-size: inherit;
-  font-family: inherit;
-  user-select: none;
-  &:disabled {
-    cursor: default;
+  .flexRow {
+    display: flex;
+    flex-direction: row;
   }
-}
 
-// Show visible scrollbars when scrollable, even if the OS (e.g. macOS) prefers hidden scrollbars.
-.visibleScrollbars {
-  &::-webkit-scrollbar-track {
-    background: #555;
+  .flexColumn {
+    display: flex;
+    flex-direction: column;
   }
 
-  &::-webkit-scrollbar-thumb {
-    background: #e4e4e4;
-    border-radius: 3px;
+  .resetButton {
+    text-align: center;
+    color: inherit;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font-size: inherit;
+    font-family: inherit;
+    user-select: none;
+    &:disabled {
+      cursor: default;
+    }
   }
 
-  &::-webkit-scrollbar {
-    width: 10px;
+  // Show visible scrollbars when scrollable, even if the OS (e.g. macOS) prefers hidden scrollbars.
+  .visibleScrollbars {
+    &::-webkit-scrollbar-track {
+      background: #555;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #e4e4e4;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
 
-    &:horizontal {
-      height: 10px;
+      &:horizontal {
+        height: 10px;
+      }
     }
   }
 }