Tweak highlights

DestinyItemManager · Jun 28, 2024 · 2391f11 · 2391f11
1 parent 20aa024
commit 2391f11
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 22 deletions.
diff --git a/src/app/item-feed/Highlights.m.scss b/src/app/item-feed/Highlights.m.scss
@@ -8,31 +8,31 @@
 
 .perks {
   display: flex;
-  flex-flow: column;
+  flex-direction: column;
   margin: 4px 0;
-  gap: 3px;
+  gap: 4px;
 
   > div {
     margin-left: -3px;
     padding-left: 4px;
   }
+}
+.perk {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
 
-  .multiPerk {
-    border-left: 2px solid #888;
-    padding-left: 2px;
-  }
-
-  > div > div > div {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-  }
-
-  img {
+  > img {
     height: 24px;
     width: 24px;
+    margin-left: -1px;
   }
 }
+.multiPerk {
+  border-left: 2px solid #888;
+  padding-left: 2px;
+}
 
 .stats {
   margin: 4px 0 0 0;

diff --git a/src/app/item-feed/Highlights.m.scss.d.ts b/src/app/item-feed/Highlights.m.scss.d.ts
diff --git a/src/app/item-feed/Highlights.tsx b/src/app/item-feed/Highlights.tsx
@@ -43,12 +43,14 @@ export default function Highlights({ item }: { item: DimItem }) {
               })}
             >
               {s.plugOptions.map((p) => (
-                <div key={p.plugDef.hash}>
-                  <PressTip tooltip={() => <DimPlugTooltip item={item} plug={p} />}>
-                    <DefItemIcon itemDef={p.plugDef} borderless={true} />{' '}
-                    {p.plugDef.displayProperties.name}
-                  </PressTip>
-                </div>
+                <PressTip
+                  key={p.plugDef.hash}
+                  tooltip={() => <DimPlugTooltip item={item} plug={p} />}
+                  className={styles.perk}
+                >
+                  <DefItemIcon itemDef={p.plugDef} borderless={true} />
+                  {p.plugDef.displayProperties.name}
+                </PressTip>
               ))}
             </div>
           ))}

diff --git a/src/app/organizer/Columns.tsx b/src/app/organizer/Columns.tsx
@@ -737,7 +737,7 @@ function PerksCell({
               >
                 <div className={styles.miniPerkContainer}>
                   <DefItemIcon itemDef={p.plugDef} borderless={true} />
-                </div>{' '}
+                </div>
                 {p.plugDef.displayProperties.name}
               </div>
             </PressTip>

diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss
@@ -226,6 +226,7 @@ $content-cells: 5;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  gap: 3px;
 }
 .miniPerkContainer {
   position: relative;
@@ -234,7 +235,6 @@ $content-cells: 5;
   height: 18px;
   width: 18px;
   --item-size: 18px;
-  margin-right: 3px;
   margin-left: -1px;
   flex-shrink: 0;
   > img {