Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-04-25 15:56:19 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix can't reset custom colors Closes #2349

Browse Source
This commit is contained in:
Kalle 2025-06-24 08:20:01 +03:00
parent 2926ac824a
commit 9077757954
2 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/CustomizedColorsInput.tsx
View File

@ -79,7 +79,7 @@ export function CustomizedColorsInput({
</summary>
<div>
<Label>{t("custom.colors.title")}</Label>
<input type="hidden" name="css" value={JSON.stringify(colors)} />
<input type="hidden" name="css" value={JSON.stringify(colorsWithDefaultsFilteredOut(colors, defaultColors))} />
<div className="colors__container colors__grid">
{CUSTOM_CSS_VAR_COLORS.filter(
(cssVar) => cssVar !== "bg-lightest",
@ -112,7 +112,9 @@ export function CustomizedColorsInput({
...colors,
};
if (cssVar === "bg-lighter") {
newColors["bg-lightest"] = undefined;
newColors["bg-lightest"] = defaultColors.find((color) => color["bg-lightest"])?.[
"bg-lightest"
];
}
setColors({
...newColors,
@ -187,6 +189,23 @@ export function CustomizedColorsInput({
);
}
function colorsWithDefaultsFilteredOut(
colors: CustomColorsRecord,
defaultColors: Record<string, string>[],
): CustomColorsRecord {
const colorsWithoutDefaults: CustomColorsRecord = {};
for (const color in colors) {
if (
colors[color as (typeof CUSTOM_CSS_VAR_COLORS)[number]] !==
defaultColors.find((c) => c[color])?.[color]
) {
colorsWithoutDefaults[color as keyof CustomColorsRecord] =
colors[color as (typeof CUSTOM_CSS_VAR_COLORS)[number]];
}
}
return colorsWithoutDefaults;
}
function handleContrast(
defaultColors: Record<string, string>[],
colors: CustomColorsRecord,

17
e2e/user-page.spec.ts
View File

@ -115,7 +115,7 @@ test.describe("User page", () => {
await page.getByText("Stick 0 / Motion -5").isVisible();
});
test("customizes user page colors", async ({ page }) => {
test("customizes user page colors and resets them", async ({ page }) => {
await seed(page);
await impersonate(page);
await navigate({
@ -146,6 +146,21 @@ test.describe("User page", () => {
await expect(page).not.toHaveURL(/edit/);
await page.reload();
await expect(bodyColor()).resolves.toMatch(/#4a412a/);
// then lets test resetting the colors is possible
await goToEditPage(page);
await page.locator("span").filter({ hasText: "Custom colors" }).click();
for (const button of await page.getByRole("button", { name: "Reset" }).all()) {
await button.click();
}
await submitEditForm(page);
// got redirected
await expect(page).not.toHaveURL(/edit/);
await page.reload();
await expect(bodyColor()).resolves.toMatch(/#ebebf0/);
});
test("edits weapon pool", async ({ page }) => {