From b54a3e0c54decd66d9682f198c5705824213e956 Mon Sep 17 00:00:00 2001
From: Aran Leite <hyoretsu@gmail.com>
Date: Fri, 19 Jan 2024 12:57:48 -0300
Subject: [PATCH] Color equip potential div by tier

---
 .../characters/equips/components/Potential/index.tsx | 10 ++++++++--
 .../equips/components/Potential/styles.module.scss   | 12 ------------
 .../characters/equips/components/styles.module.scss  |  2 +-
 3 files changed, 9 insertions(+), 15 deletions(-)
 delete mode 100644 src/app/characters/equips/components/Potential/styles.module.scss

diff --git a/src/app/characters/equips/components/Potential/index.tsx b/src/app/characters/equips/components/Potential/index.tsx
index 7c33476..7e56513 100644
--- 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
deleted file mode 100644
index c124d98..0000000
--- a/src/app/characters/equips/components/Potential/styles.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.stars {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-
-    max-width: 14.5rem;
-
-    svg {
-        cursor: pointer;
-    }
-}
diff --git a/src/app/characters/equips/components/styles.module.scss b/src/app/characters/equips/components/styles.module.scss
index 0932fb1..871e3c2 100644
--- 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;