From d883a0f3dd3a97d069ce65bfdf840103416be7dd Mon Sep 17 00:00:00 2001 From: dnlklmn Date: Tue, 13 Feb 2024 21:47:09 +0100 Subject: [PATCH] Switch Seed and Clone buttons --- public/colors.css | 2 ++ src/components/Button.svelte | 18 ++++++++---------- src/views/projects/Header/CloneButton.svelte | 2 +- src/views/projects/Header/SeedButton.svelte | 10 ++++++++-- src/views/projects/Patch.svelte | 1 - .../projects/Source/ProjectNameHeader.svelte | 2 +- tests/e2e/project/issue.spec.ts | 6 +++--- tests/e2e/project/patch.spec.ts | 4 ++-- 8 files changed, 25 insertions(+), 20 deletions(-) diff --git a/public/colors.css b/public/colors.css index f53482cb2..281332e2b 100644 --- a/public/colors.css +++ b/public/colors.css @@ -29,6 +29,7 @@ --color-border-success: #97ceb0; --color-fill-secondary: #7070ff; --color-fill-secondary-hover: #8585ff; + --color-fill-secondary-counter: #7a7aff; --color-fill-ghost: #ebebff; --color-fill-ghost-hover: #f5f5ff; --color-fill-separator: #dbdbff; @@ -85,6 +86,7 @@ --color-border-success: #2a5a40; --color-fill-secondary: #7070ff; --color-fill-secondary-hover: #8585ff; + --color-fill-secondary-counter: #7a7aff; --color-fill-ghost: #24252d; --color-fill-ghost-hover: #2e2f38; --color-fill-separator: #24252d; diff --git a/src/components/Button.svelte b/src/components/Button.svelte index 79e8e2a27..926277421 100644 --- a/src/components/Button.svelte +++ b/src/components/Button.svelte @@ -153,7 +153,7 @@ .outline { background-color: transparent; - color: var(--color-foreground-dim); + color: var(--color-foreground-contrast); border: 1px solid var(--color-border-hint); } .outline[disabled] { @@ -196,27 +196,25 @@ } .secondary-toggle-off { - background-color: transparent; - color: var(--color-foreground-contrast); - border: 1px solid var(--color-border-hint); + background-color: var(--color-fill-secondary); + color: var(--color-foreground-match-background); } .secondary-toggle-off[disabled] { - background-color: transparent; - color: var(--color-fill-gray); + background-color: var(--color-fill-ghost); + color: var(--color-foreground-disabled); } .secondary-toggle-off:not([disabled]):hover { - background-color: transparent; - border: 1px solid var(--color-fill-secondary); + background-color: var(--color-fill-secondary-hover); } - .secondary-toggle-on { background-color: var(--color-fill-selected); color: var(--color-foreground-emphasized); border: 1px solid var(--color-border-selected); } .secondary-toggle-on[disabled] { - background-color: var(--color-fill-selected); + background-color: var(--color-fill-ghost); color: var(--color-fill-gray); + border: none; } .secondary-toggle-on:not([disabled]):hover { background-color: var(--color-fill-selected); diff --git a/src/views/projects/Header/CloneButton.svelte b/src/views/projects/Header/CloneButton.svelte index c867e08b2..99d24f949 100644 --- a/src/views/projects/Header/CloneButton.svelte +++ b/src/views/projects/Header/CloneButton.svelte @@ -35,7 +35,7 @@ - diff --git a/src/views/projects/Header/SeedButton.svelte b/src/views/projects/Header/SeedButton.svelte index 6fdef54f0..bc3562c75 100644 --- a/src/views/projects/Header/SeedButton.svelte +++ b/src/views/projects/Header/SeedButton.svelte @@ -33,14 +33,19 @@ .counter { font-weight: var(--font-weight-regular); border-radius: var(--border-radius-tiny); - background-color: var(--color-fill-ghost); - color: var(--color-foreground-dim); + background-color: var(--color-fill-secondary-counter); + border: 1px solid var(--color-border-secondary-counter); + color: var(--color-foreground-match-background); padding: 0 0.25rem; } .seeding { background-color: var(--color-fill-counter-emphasized); color: var(--color-foreground-emphasized); } + .disabled { + background-color: var(--color-fill-ghost-hover); + color: var(--color-foreground-dim); + } @@ -62,6 +67,7 @@ {seedCount} diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte index 8e6c36e0b..3dda3063d 100644 --- a/src/views/projects/Patch.svelte +++ b/src/views/projects/Patch.svelte @@ -65,7 +65,6 @@ import Embeds from "@app/views/projects/Cob/Embeds.svelte"; import ErrorModal from "@app/modals/ErrorModal.svelte"; import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte"; - import IconButton from "@app/components/IconButton.svelte"; import IconSmall from "@app/components/IconSmall.svelte"; import InlineMarkdown from "@app/components/InlineMarkdown.svelte"; import LabelInput from "@app/views/projects/Cob/LabelInput.svelte"; diff --git a/src/views/projects/Source/ProjectNameHeader.svelte b/src/views/projects/Source/ProjectNameHeader.svelte index 9be5f11fd..c0617133d 100644 --- a/src/views/projects/Source/ProjectNameHeader.svelte +++ b/src/views/projects/Source/ProjectNameHeader.svelte @@ -128,13 +128,13 @@ class="global-hide-on-mobile" style="margin-left: auto; display: flex; gap: 0.5rem;"> + -
diff --git a/tests/e2e/project/issue.spec.ts b/tests/e2e/project/issue.spec.ts index b1410b4e5..ffd27d6c7 100644 --- a/tests/e2e/project/issue.spec.ts +++ b/tests/e2e/project/issue.spec.ts @@ -74,7 +74,7 @@ test("edit issue", async ({ page, authenticatedPeer }) => { ).toBeVisible(); await expect(page.getByPlaceholder("Leave a description")).toBeHidden(); - await page.getByRole("button", { name: "edit issue" }).click(); + await page.getByRole("button", { name: "Edit" }).click(); await page .getByPlaceholder("Title") .fill("This is a modified issue title to be dismissed"); @@ -89,7 +89,7 @@ test("edit issue", async ({ page, authenticatedPeer }) => { page.getByText("We'll give it a description and edit it."), ).toBeVisible(); - await page.getByRole("button", { name: "edit issue" }).click(); + await page.getByRole("button", { name: "Edit" }).click(); await page.getByPlaceholder("Title").fill("This is a modified issue title"); await page .getByPlaceholder("Leave a description") @@ -180,7 +180,7 @@ test("handling embeds", async ({ page, authenticatedPeer }) => { page.locator(".badge").filter({ hasText: "radicle-228x228.png" }), ).toBeVisible(); - await page.getByRole("button", { name: "edit issue" }).click(); + await page.getByRole("button", { name: "Edit" }).click(); await page .getByPlaceholder("Leave a description") .fill( diff --git a/tests/e2e/project/patch.spec.ts b/tests/e2e/project/patch.spec.ts index 8d321eeaf..1b9495206 100644 --- a/tests/e2e/project/patch.spec.ts +++ b/tests/e2e/project/patch.spec.ts @@ -198,7 +198,7 @@ test("edit patch", async ({ page, authenticatedPeer }) => { await expect(page.getByPlaceholder("Title")).toBeHidden(); await expect(page.getByPlaceholder("Leave a description")).toBeHidden(); - await page.getByRole("button", { name: "edit patch" }).click(); + await page.getByRole("button", { name: "Edit", exact: true }).click(); await page .getByPlaceholder("Title") .fill("This is a modified patch title to be dismissed"); @@ -209,7 +209,7 @@ test("edit patch", async ({ page, authenticatedPeer }) => { await expect(titleLocator).toBeVisible(); await expect(descriptionLocator).toBeVisible(); - await page.getByRole("button", { name: "edit patch" }).click(); + await page.getByRole("button", { name: "Edit", exact: true }).click(); await page.getByPlaceholder("Title").fill("This is a modified patch title"); await page .getByPlaceholder("Leave a description")