Color equip potential div by tier

hyoretsu · Jan 19, 2024 · b54a3e0 · b54a3e0
1 parent 95bfbdf
commit b54a3e0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/src/app/characters/equips/components/Potential/index.tsx b/src/app/characters/equips/components/Potential/index.tsx
@@ -62,7 +62,8 @@ const extraLinesMap = new Map<string, Record<string, Map<number, any[]>>>([
 	["Weapon", weaponSecondaryLines],
 ]);
 
-const tiers = ["", "Rare", "Epic", "Unique", "Legendary"];
+// const tiers = ["Common", "Rare", "Epic", "Unique", "Legendary"];
+const tierColors = ["#777777", "#55aaff", "#cc66ff", "#ffcc00", "#00ff00"];
 
 export default function Potential({ equipLevel = 0, index, type }: PotentialProps) {
 	const { currentCharacter, updateCharacter } = useCharacters();
@@ -208,7 +209,12 @@ export default function Potential({ equipLevel = 0, index, type }: PotentialProp
 	};
 
 	return (
-		<section className={styles.equipSection}>
+		<section
+			className={styles.equipSection}
+			style={{
+				"--color": tierColors[tier],
+			}}
+		>
 			<button type="button" onClick={() => showPotential(old => !old)}>
 				Potential
 			</button>

diff --git a/src/app/characters/equips/components/Potential/styles.module.scss b/src/app/characters/equips/components/Potential/styles.module.scss
diff --git a/src/app/characters/equips/components/styles.module.scss b/src/app/characters/equips/components/styles.module.scss
@@ -40,7 +40,7 @@
 
     width: 12.25rem;
 
-    border: 2px solid #ffffff;
+    border: 2px solid var(--color, #ffffff);
     border-radius: 1rem;
     margin-top: 0.5rem;