fix: align item icons

Paroxity · Nov 19, 2024 · 742b763 · 742b763
1 parent 4be151e
commit 742b763
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/src/components/checklist/ItemComponent.jsx b/src/components/checklist/ItemComponent.jsx
@@ -10,15 +10,22 @@ export default function ItemComponent({
 }) {
 	return (
 		<div className={classNames({ "item-subcomponent": isSubcomponent })}>
-			<img
-				className="component-image"
-				src={getComponentImageUrl(itemName, componentName, component.generic, component.hash)}
-				alt=""
-				width="24px"
-			/>
-			<span className="component-name">
-				{component.count.toLocaleString()}x {componentName}
-			</span>
+			<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+				<img
+					className="component-image"
+					src={getComponentImageUrl(
+						itemName,
+						componentName,
+						component.generic,
+						component.hash
+					)}
+					alt=""
+					width="24px"
+				/>
+				<span className="component-name">
+					{component.count.toLocaleString()}x {componentName}
+				</span>
+			</div>
 			{component?.components &&
 				Object.entries(component.components).map(
 					([subcomponentName, subcomponent]) => {
@@ -49,4 +56,3 @@ ItemComponent.propTypes = {
 	component: PropTypes.shape(componentShape).isRequired,
 	isSubcomponent: PropTypes.bool
 };
-
diff --git a/src/components/checklist/ItemRelicTooltip.jsx b/src/components/checklist/ItemRelicTooltip.jsx
@@ -25,7 +25,13 @@ function ItemRelicTooltip({ item, name }) {
 											const rarity =
 												relicRarity[relicData.rarity];
 											return (
-												<span key={relicName}>
+												<span
+													key={relicName}
+													style={{
+														display: "flex",
+														alignItems: "center",
+														gap: "4px"
+													}}>
 													<img
 														src={`https://cdn.warframestat.us/img/${relicTiers
 															.find(tier =>
@@ -39,8 +45,7 @@ function ItemRelicTooltip({ item, name }) {
 													/>
 													{relicName} (
 													<span
-														className={`relic relic-rarity-${rarity.toLowerCase()}`}
-													>
+														className={`relic relic-rarity-${rarity.toLowerCase()}`}>
 														{rarity}
 													</span>
 													)

diff --git a/src/components/foundry/MissingIngredients.jsx b/src/components/foundry/MissingIngredients.jsx
@@ -36,15 +36,26 @@ function MissingIngredients() {
 								countA > countB
 									? -1
 									: countA < countB
-									? 1
-									: nameA.localeCompare(nameB)
+										? 1
+										: nameA.localeCompare(nameB)
 						)
 						.map(([name, { count, hash }]) => {
 							return (
-								<div key={name}>
+								<div
+									key={name}
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: "4px"
+									}}>
 									<img
 										className="component-image"
-										src={getComponentImageUrl("", name, false, hash)}
+										src={getComponentImageUrl(
+											"",
+											name,
+											false,
+											hash
+										)}
 										alt=""
 										width="24px"
 										onDragStart={e => e.preventDefault()}
@@ -63,4 +74,3 @@ function MissingIngredients() {
 }
 
 export default MissingIngredients;
-