From 4df614960580bf618cf75611b833463ef0dad7b2 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 29 Nov 2025 15:37:50 +0200
Subject: [PATCH] Tier list maker preset colors

---
 .../components/TierRow.module.css             | 40 +++++++++++++++++++
 .../tier-list-maker/components/TierRow.tsx    | 34 +++++++++++++---
 .../tier-list-maker-constants.ts              | 13 ++++++
 locales/da/tier-list-maker.json               |  3 +-
 locales/de/tier-list-maker.json               |  3 +-
 locales/en/tier-list-maker.json               |  3 +-
 locales/es-ES/tier-list-maker.json            |  3 +-
 locales/es-US/tier-list-maker.json            |  3 +-
 locales/fr-CA/tier-list-maker.json            |  3 +-
 locales/fr-EU/tier-list-maker.json            |  3 +-
 locales/he/tier-list-maker.json               |  3 +-
 locales/it/tier-list-maker.json               |  3 +-
 locales/ja/tier-list-maker.json               |  3 +-
 locales/ko/tier-list-maker.json               |  3 +-
 locales/nl/tier-list-maker.json               |  3 +-
 locales/pl/tier-list-maker.json               |  3 +-
 locales/pt-BR/tier-list-maker.json            |  3 +-
 locales/ru/tier-list-maker.json               |  3 +-
 locales/zh/tier-list-maker.json               |  3 +-
 19 files changed, 113 insertions(+), 22 deletions(-)

diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css
index c166d3907..3ad05ef20 100644
--- a/app/features/tier-list-maker/components/TierRow.module.css
+++ b/app/features/tier-list-maker/components/TierRow.module.css
@@ -120,3 +120,43 @@
 	stroke-width: 3;
 	color: var(--text);
 }
+
+.colorPickerContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-3);
+	align-items: center;
+}
+
+.presetColorsGrid {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: var(--s-2);
+}
+
+.colorButton {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	border: 2px solid transparent;
+	cursor: pointer;
+	transition: all 0.2s;
+	padding: 0;
+}
+
+.colorButton:hover {
+	transform: scale(1.1);
+	border-color: var(--text-lighter);
+}
+
+.colorButtonSelected {
+	border-color: var(--text);
+	box-shadow: 0 0 0 2px var(--bg);
+}
+
+.customColorLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	cursor: pointer;
+}
diff --git a/app/features/tier-list-maker/components/TierRow.tsx b/app/features/tier-list-maker/components/TierRow.tsx
index e58fb4b96..80fc3f811 100644
--- a/app/features/tier-list-maker/components/TierRow.tsx
+++ b/app/features/tier-list-maker/components/TierRow.tsx
@@ -14,6 +14,7 @@ import { ChevronUpIcon } from "~/components/icons/ChevronUp";
 import { TrashIcon } from "~/components/icons/Trash";
 import { useTierListState } from "../contexts/TierListContext";
 import {
+	PRESET_COLORS,
 	TIER_NAME_FONT_SIZE_BREAKPOINTS,
 	TIER_NAME_FONT_SIZE_MIN,
 	TIER_NAME_MAX_LENGTH,
@@ -107,12 +108,33 @@ export function TierRow({ tier }: TierRowProps) {
 								className={styles.nameInput}
 								maxLength={TIER_NAME_MAX_LENGTH}
 							/>
-							<input
-								type="color"
-								value={tier.color}
-								onChange={(e) => handleChangeTierColor(tier.id, e.target.value)}
-								className="plain"
-							/>
+							<div className={styles.colorPickerContainer}>
+								<div className={styles.presetColorsGrid}>
+									{PRESET_COLORS.map((color) => (
+										<button
+											key={color}
+											type="button"
+											className={clsx(styles.colorButton, {
+												[styles.colorButtonSelected]: tier.color === color,
+											})}
+											style={{ backgroundColor: color }}
+											onClick={() => handleChangeTierColor(tier.id, color)}
+											aria-label={`Select color ${color}`}
+										/>
+									))}
+								</div>
+								<label className={styles.customColorLabel}>
+									<span className="text-xs">{t("tier-list-maker:custom")}</span>
+									<input
+										type="color"
+										value={tier.color}
+										onChange={(e) =>
+											handleChangeTierColor(tier.id, e.target.value)
+										}
+										className="plain"
+									/>
+								</label>
+							</div>
 						</div>
 						<div className="stack horizontal justify-end">
 							<SendouButton
diff --git a/app/features/tier-list-maker/tier-list-maker-constants.ts b/app/features/tier-list-maker/tier-list-maker-constants.ts
index a9937e8dc..f198930ec 100644
--- a/app/features/tier-list-maker/tier-list-maker-constants.ts
+++ b/app/features/tier-list-maker/tier-list-maker-constants.ts
@@ -13,6 +13,19 @@ export const TIER_NAME_FONT_SIZE_BREAKPOINTS = [
 
 export const TIER_NAME_FONT_SIZE_MIN = "var(--fonts-xxs)";
 
+export const PRESET_COLORS = [
+	"#ff4655",
+	"#ff8c42",
+	"#ffd23f",
+	"#bfe84d",
+	"#5dbb63",
+	"#8b0000",
+	"#90ee90",
+	"#4169e1",
+	"#9b59b6",
+	"#20b2aa",
+];
+
 export const DEFAULT_TIERS: TierListMakerTier[] = [
 	{ id: "tier-x", name: "X", color: "#ff4655" },
 	{ id: "tier-s", name: "S", color: "#ff8c42" },
diff --git a/locales/da/tier-list-maker.json b/locales/da/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/da/tier-list-maker.json
+++ b/locales/da/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/de/tier-list-maker.json b/locales/de/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/de/tier-list-maker.json
+++ b/locales/de/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/en/tier-list-maker.json b/locales/en/tier-list-maker.json
index 275d77057..1def23ef3 100644
--- a/locales/en/tier-list-maker.json
+++ b/locales/en/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "Allow duplicates",
 	"showTierHeaders": "Show tier headers",
 	"titlePlaceholder": "Click to add title...",
-	"by": "Made by"
+	"by": "Made by",
+	"custom": "Custom"
 }
diff --git a/locales/es-ES/tier-list-maker.json b/locales/es-ES/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/es-ES/tier-list-maker.json
+++ b/locales/es-ES/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/es-US/tier-list-maker.json b/locales/es-US/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/es-US/tier-list-maker.json
+++ b/locales/es-US/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/fr-CA/tier-list-maker.json b/locales/fr-CA/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/fr-CA/tier-list-maker.json
+++ b/locales/fr-CA/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/fr-EU/tier-list-maker.json b/locales/fr-EU/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/fr-EU/tier-list-maker.json
+++ b/locales/fr-EU/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/he/tier-list-maker.json b/locales/he/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/he/tier-list-maker.json
+++ b/locales/he/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/it/tier-list-maker.json b/locales/it/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/it/tier-list-maker.json
+++ b/locales/it/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/ja/tier-list-maker.json b/locales/ja/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/ja/tier-list-maker.json
+++ b/locales/ja/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/ko/tier-list-maker.json b/locales/ko/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/ko/tier-list-maker.json
+++ b/locales/ko/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/nl/tier-list-maker.json b/locales/nl/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/nl/tier-list-maker.json
+++ b/locales/nl/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/pl/tier-list-maker.json b/locales/pl/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/pl/tier-list-maker.json
+++ b/locales/pl/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/pt-BR/tier-list-maker.json b/locales/pt-BR/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/pt-BR/tier-list-maker.json
+++ b/locales/pt-BR/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/ru/tier-list-maker.json b/locales/ru/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/ru/tier-list-maker.json
+++ b/locales/ru/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }
diff --git a/locales/zh/tier-list-maker.json b/locales/zh/tier-list-maker.json
index f14ed6ee0..e28b1766b 100644
--- a/locales/zh/tier-list-maker.json
+++ b/locales/zh/tier-list-maker.json
@@ -15,5 +15,6 @@
 	"allowDuplicates": "",
 	"showTierHeaders": "",
 	"titlePlaceholder": "",
-	"by": ""
+	"by": "",
+	"custom": ""
 }