add hover state for play-pause button

src/components/VAudioTrack/layouts/VBoxLayout.vue

@@ -98,6 +98,10 @@ export default defineComponent({
   @apply border-yellow bg-yellow text-dark-charcoal focus:border-pink;
 }
 
+.play-pause:hover {
+  @apply border-dark-charcoal bg-dark-charcoal text-white;
+}
+
 .box-track .waveform {
   @apply h-10;
 }

test/playwright/e2e/homepage.spec.ts

@@ -12,15 +12,15 @@ import { supportedSearchTypes } from "~/constants/media"
 
 test.describe.configure({ mode: "parallel" })
 
-test.beforeEach(async ({ context }) => {
+test.beforeEach(async ({ context, page }) => {
   await mockProviderApis(context)
+  await enableNewHeader(page)
 })
 
 for (const searchType of supportedSearchTypes) {
   test(`can change type and search for ${searchType} from homepage`, async ({
     page,
   }) => {
-    await enableNewHeader(page)
     await goToSearchTerm(page, "cat", {
       searchType,
       mode: "CSR",

test/playwright/e2e/translation-banner.spec.ts

@@ -1,16 +1,21 @@
 import { test, expect } from "@playwright/test"
 
-import { enableNewHeader } from "~~/test/playwright/utils/navigation"
+import {
+  enableNewHeader,
+  setCookies,
+} from "~~/test/playwright/utils/navigation"
 
 const russianSearchPath = "/ru/search?q=dog"
 
 test.describe.configure({ mode: "parallel" })
 
 test.describe("translation banner", () => {
+  test.beforeEach(async ({ page }) => {
+    await enableNewHeader(page)
+  })
   test("Can see the translation banner and go to the correct link", async ({
     page,
   }) => {
-    await enableNewHeader(page)
     await page.goto(russianSearchPath)
     await expect(
       page.locator(
@@ -30,14 +35,10 @@ test.describe("translation banner", () => {
   test("Banner is not shown if dismissed state is saved in a cookie", async ({
     page,
   }) => {
-    await page.context().addCookies([
-      {
-        name: "uiDismissedBanners",
-        value: '["translation-ru"]',
-        domain: "localhost",
-        path: "/",
-      },
-    ])
+    await setCookies(page.context(), {
+      uiDismissedBanners: '["translation-ru"]',
+    })
+
     await page.goto(russianSearchPath)
     await expect(
       page.locator('[data-testid="banner-translation"]')

test/playwright/utils/navigation.ts

@@ -464,19 +464,12 @@ export const enableNewHeader = async (page: Page) => {
 
 export const enableOldHeader = async (page: Page) => {
   // Add the new_header cookie
-  await page.context().addCookies([
-    {
-      name: "features",
-      value: "%7B%22new_header%22%3A%22off%22%7D",
-      domain: "localhost",
-      path: "/",
-    },
-  ])
+  await setCookies(page.context(), { features: { new_header: "off" } })
 }
 
 export const setCookies = async (
   context: BrowserContext,
-  cookies: Record<string, string | boolean | string[]>
+  cookies: Record<string, string | boolean | string[] | Record<string, string>>
 ) => {
   await context.addCookies(
     Object.entries(cookies).map(([name, value]) => ({