diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue index 16a9607acc6..41739700727 100644 --- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue +++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue @@ -116,7 +116,7 @@ const clearFilters = () => { @click="close" /> - + { /> - + diameter * 3 + spacing * 2) - + {{ $t("header.seeResults") }} diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue index 0eef4ed3c84..0e5ceb16361 100644 --- a/frontend/src/components/VThemeSelect/VThemeSelect.vue +++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue @@ -45,7 +45,11 @@ const darkMode = useDarkMode() * The icon always reflects the actual theme applied to the site. * Therefore, it must be based on the value of `effectiveColorMode`. */ -const currentThemeIcon: Ref<"sun" | "moon" | undefined> = ref(undefined) +const currentThemeIcon: Ref<"sun" | "moon" | undefined> = ref( + darkMode.effectiveColorMode.value + ? THEME_ICON_NAME[darkMode.effectiveColorMode.value] + : undefined +) /** * The choices are computed because the text for the color mode choice diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css index 92b27f9a0b1..a98fc92baf0 100644 --- a/frontend/src/styles/tailwind.css +++ b/frontend/src/styles/tailwind.css @@ -232,6 +232,7 @@ --color-border-secondary-hover: var(--color-gray-1); --color-border-tertiary: var(--color-gray-1); --color-border-transparent-hover: var(--color-gray-11); + --color-border-overlay: var(--color-gray-10); --color-border-focus: var(--color-yellow-4); --color-border-bg-ring: var(--color-gray-13); --color-border-disabled: var(--color-gray-8); diff --git a/frontend/test/playwright/utils/components.ts b/frontend/test/playwright/utils/components.ts index a084cc51053..a88ba3c1059 100644 --- a/frontend/test/playwright/utils/components.ts +++ b/frontend/test/playwright/utils/components.ts @@ -46,3 +46,7 @@ export const getHeaderSearchbar = ( page: Page, dir: LanguageDirection = "ltr" ) => page.getByRole("combobox", { name: t("search.searchBarLabel", dir) }) + +const themeSelectLabel = (dir: LanguageDirection) => t("theme.theme", dir) +export const getThemeSwitcher = (page: Page, dir: LanguageDirection) => + page.getByLabel(themeSelectLabel(dir)).first() diff --git a/frontend/test/playwright/utils/expect-snapshot.ts b/frontend/test/playwright/utils/expect-snapshot.ts index 265274b1f6b..8c50ea8f767 100644 --- a/frontend/test/playwright/utils/expect-snapshot.ts +++ b/frontend/test/playwright/utils/expect-snapshot.ts @@ -4,6 +4,8 @@ import { type LanguageDirection, t } from "~~/test/playwright/utils/i18n" import { sleep } from "~~/test/playwright/utils/navigation" +import { getThemeSwitcher } from "~~/test/playwright/utils/components" + import type { Breakpoint } from "~/constants/screens" import type { @@ -35,17 +37,56 @@ export type ExpectScreenshotAreaSnapshot = ( ) => Promise type EffectiveColorMode = "dark" | "light" -const themeSelectLabel = (dir: LanguageDirection) => t("theme.theme", dir) const themeOption = (colorMode: EffectiveColorMode, dir: LanguageDirection) => t(`theme.choices.${colorMode}`, dir) -export const turnOnDarkMode = async (page: Page, dir: LanguageDirection) => { +const getModalCloseButton = (page: Page, dir: LanguageDirection) => + page.getByRole("button", { name: t("modal.closeContentSettings", dir) }) + +const selectDarkModeInSwitcher = async (page: Page, dir: LanguageDirection) => { // In Storybook, the footer story has two theme switchers (one in the footer, and one // is from the story decorator), so we need to select a single one. - await page - .getByLabel(themeSelectLabel(dir)) - .nth(0) - .selectOption(themeOption("dark", dir)) + await getThemeSwitcher(page, dir).selectOption(themeOption("dark", dir)) +} + +export const turnOnDarkMode = async (page: Page, dir: LanguageDirection) => { + const dialogOverlay = page.getByRole("dialog") + + const dialogOpen = await dialogOverlay.isVisible() + const switcherVisible = await getThemeSwitcher(page, dir).isVisible() + + // Content settings modal covers the theme switcher. If it's not open, + // we can just select dark mode. + if (!dialogOpen || switcherVisible) { + await selectDarkModeInSwitcher(page, dir) + return + } + + const isTabPanelVisible = await page.getByRole("tabpanel").isVisible() + if (!isTabPanelVisible) { + await selectDarkModeInSwitcher(page, dir) + return + } + + const tabLabel = await page + .getByRole("tab", { selected: true }) + .getAttribute("aria-label") + if (!tabLabel) { + throw new Error("Tab does not have an aria-label attribute") + } + + await getModalCloseButton(page, dir).click() + + await selectDarkModeInSwitcher(page, dir) + + // Reopen the content settings modal. + await page.locator("#content-settings-button").click() + const tab = page.getByRole("tab", { name: tabLabel }) + if (!((await tab.getAttribute("aria-selected")) === "true")) { + await tab.click() + } + // Remove the focus ring from the current tab by clicking on a blank area. + await page.getByRole("dialog").click({ position: { x: 4, y: 4 } }) } type SnapshotNameOptions = { @@ -96,7 +137,7 @@ export const expectSnapshot: ExpectSnapshot = async ( await turnOnDarkMode(page, dir ?? "ltr") // Wait for the theme to change. - await sleep(200) + await sleep(100) expect(await screenshotAble.screenshot(screenshotOptions)).toMatchSnapshot( getSnapshotName(name, "dark"), diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts b/frontend/test/playwright/visual-regression/components/filters.spec.ts index 5a74ddfde39..56b4605ac08 100644 --- a/frontend/test/playwright/visual-regression/components/filters.spec.ts +++ b/frontend/test/playwright/visual-regression/components/filters.spec.ts @@ -51,7 +51,7 @@ for (const dir of languageDirections) { await expectSnapshot( page, getFiltersName(breakpoint), - isDesktop ? page.locator(".sidebar") : page, + page.getByRole(isDesktop ? "complementary" : "dialog"), { dir, snapshotOptions: { maxDiffPixels: 2, maxDiffPixelRatio: undefined }, @@ -62,15 +62,17 @@ for (const dir of languageDirections) { test(`filters 1 filter selected - ${dir}`, async ({ page }) => { const firstFilter = page.getByRole("checkbox").first() await firstFilter.check() - await checkModalRendered(page, isDesktop, dir) - const snapshotName = `${getFiltersName(breakpoint)}-checked` + // We don't have a way to check that all images have loaded using the UI + // eslint-disable-next-line playwright/no-networkidle + await page.waitForLoadState("networkidle") + await checkModalRendered(page, isDesktop, dir) await firstFilter.hover() await expectSnapshot( page, - snapshotName, - isDesktop ? page.locator(".sidebar") : page, + `${getFiltersName(breakpoint)}-checked`, + page.getByRole(isDesktop ? "complementary" : "dialog"), { dir, snapshotOptions: { maxDiffPixels: 2, maxDiffPixelRatio: undefined }, diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-dark-linux.png index 42bbbd6c51c..b4504ee7ba0 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-light-linux.png index 2900d695b46..769b1d6da27 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-md-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-dark-linux.png index 818bd783713..40bdfedfa45 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-light-linux.png index 68447f922a9..f9c24f1f08f 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-sm-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-dark-linux.png index f98ff8ce5cb..b2616615b9b 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-light-linux.png index 38936d856a9..6a61d7e98a3 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-ltr-xs-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-dark-linux.png index 7c607a4cab2..88220c6c7bf 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-light-linux.png index 35e56ffe935..d7172a8307a 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-md-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-dark-linux.png index a2ff589d596..0b4d83072a0 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-light-linux.png index ec679b4247e..3f10d15d750 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-sm-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-dark-linux.png index 0d25d78ef07..7a1958ff8fd 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-light-linux.png index 75ea50bc1ca..c37008d810e 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-checked-rtl-xs-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-dark-linux.png index 76583b76205..bc64528e0ca 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-light-linux.png index 537cd955bb5..489ce763dc4 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-md-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-dark-linux.png index 84ea76b4a97..743cd915e08 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-light-linux.png index 71b83b8a1f9..526ef219bd7 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-sm-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-dark-linux.png index 48dd08bf917..ef1db65f683 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-light-linux.png index bd1935b119f..1a790d7023b 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-ltr-xs-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-dark-linux.png index 9bb6b92d9b3..ce3314c2513 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-light-linux.png index e8ae1eac319..5b628917895 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-md-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-dark-linux.png index 398605973ba..4d585b64440 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-light-linux.png index 902cf8721d5..f6a56bd1e09 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-sm-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-dark-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-dark-linux.png index f803f9ed76f..ff13d1bbbcb 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-dark-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-light-linux.png b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-light-linux.png index f0bcac231e8..b62933f8d08 100644 Binary files a/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-light-linux.png and b/frontend/test/playwright/visual-regression/components/filters.spec.ts-snapshots/filters-modal-rtl-xs-light-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-dark-linux.png b/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-dark-linux.png index b02eed8341b..6642cff038b 100644 Binary files a/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-dark-linux.png and b/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-dark-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-light-linux.png b/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-light-linux.png index 7d6885e8cbc..f8310e13ab4 100644 Binary files a/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-light-linux.png and b/frontend/test/playwright/visual-regression/pages/errors.spec.ts-snapshots/search-result-timeout-ltr-xl-light-linux.png differ