diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js index 4fa236a8b6..a1b458e358 100644 --- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -860,6 +860,9 @@ test.describe("Profile page controls", () => { await page.getByText("Change email").hover(); await expect(container).toHaveScreenshot(shot); + await page.getByText("Want to remove your account?").hover(); + await expect(container).toHaveScreenshot(shot); + // The "Update" overlay is a button: it shows on keyboard focus too. await page.mouse.move(10, 700); await page.getByRole("button", { name: "Update" }).focus(); diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs index 74f073ae36..14cfb8097c 100644 --- a/frontend/src/app/main/ui/settings/profile.cljs +++ b/frontend/src/app/main/ui/settings/profile.cljs @@ -73,8 +73,9 @@ [:div {:class (stl/css :options)} [:div.change-email - [:a {:class (stl/css :link) - :on-click on-show-change-email} + [:button {:type "button" + :class (stl/css :link) + :on-click on-show-change-email} (tr "dashboard.change-email")]]]] [:> fm/submit-button* @@ -84,9 +85,10 @@ [:div {:class (stl/css :links)} [:div - [:a {:class (stl/css :link) - :on-click on-show-delete-account - :data-testid "remove-acount-btn"} + [:button {:type "button" + :class (stl/css :link) + :on-click on-show-delete-account + :data-testid "remove-acount-btn"} (tr "dashboard.remove-account")]]]])) ;; --- Profile Photo Form diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss index 0c2b954a18..d98a0f5996 100644 --- a/frontend/src/app/main/ui/settings/profile.scss +++ b/frontend/src/app/main/ui/settings/profile.scss @@ -19,10 +19,20 @@ align-items: center; } +// "Change email" and "Want to remove your account?" open modals, so they +// are buttons that keep the look of a text link. .link { @include use-typography("body-medium"); color: var(--color-accent-primary); + background: none; + border: none; + padding: 0; + cursor: pointer; + + &:hover { + text-decoration: underline; + } } .form-container {