Update report buttons (#1004)

* Use new buttons in components

* Wait for network idle to try to fix license icon VR failure

* Fix button inner ring appearing wider than the outer ring

* Update the snapshots

* Wait for navigation to /about page

* Fix outline width on Chrome

* Try the `maxDiffPixelRatio` fix for the CI

frontend/src/components/VContentReport/VContentReportButton.vue

@@ -1,15 +1,17 @@
 <template>
   <VButton
-    variant="plain"
-    class="report-button font-semibold text-dark-charcoal-70 hover:underline"
+    variant="transparent-gray"
+    size="medium"
+    has-icon-end
+    class="label-bold"
   >
-    <span class="text-sr md:hidden md:text-base">{{
+    <span class="md:hidden">{{
       $t("media-details.content-report.short")
     }}</span>
-    <span class="hidden text-sr md:inline md:text-base">{{
+    <span class="hidden md:inline">{{
       $t("media-details.content-report.long")
     }}</span>
-    <VIcon name="flag" class="ms-2" />
+    <VIcon name="flag" />
   </VButton>
 </template>
 
@@ -24,9 +26,3 @@ export default defineComponent({
   components: { VButton, VIcon },
 })
 </script>
-
-<style scoped>
-.report-button {
-  @apply px-0;
-}
-</style>

frontend/src/components/VContentReport/VContentReportForm.vue

@@ -79,7 +79,9 @@
         <div class="flex flex-row items-center justify-end gap-4">
           <VButton
             v-if="allowCancel"
-            variant="secondary-bordered"
+            variant="bordered-gray"
+            size="medium"
+            class="label-bold"
             @click="handleCancel"
           >
             {{ $t("media-details.content-report.form.cancel") }}
@@ -89,20 +91,26 @@
             v-if="selectedReason === DMCA"
             key="dmca"
             as="VLink"
-            variant="secondary-filled"
+            variant="filled-dark"
+            size="medium"
+            class="label-bold"
+            has-icon-end
+            show-external-icon
+            :external-icon-size="6"
             :href="DMCA_FORM_URL"
             @click="handleDmcaSubmit"
           >
             {{ $t("media-details.content-report.form.dmca.open") }}
-            <VIcon :size="4" class="ms-1" name="external-link" />
           </VButton>
           <VButton
             v-else
             key="non-dmca"
             type="submit"
             :disabled="isSubmitDisabled"
             :focusable-when-disabled="true"
-            variant="secondary-filled"
+            variant="filled-dark"
+            size="medium"
+            class="label-bold"
             :value="$t('media-details.content-report.form.submit')"
           >
             {{ $t("media-details.content-report.form.submit") }}
@@ -133,7 +141,6 @@ import type { AudioDetail, ImageDetail } from "~/types/media"
 import { useAnalytics } from "~/composables/use-analytics"
 
 import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
 import VRadio from "~/components/VRadio/VRadio.vue"
 import VDmcaNotice from "~/components/VContentReport/VDmcaNotice.vue"
 import VReportDescForm from "~/components/VContentReport/VReportDescForm.vue"
@@ -143,7 +150,6 @@ export default defineComponent({
   name: "VContentReportForm",
   components: {
     VButton,
-    VIcon,
     VLink,
     VRadio,
     VDmcaNotice,

frontend/src/components/VLink.vue

@@ -2,7 +2,7 @@
 <template>
   <NuxtLink
     v-if="isNuxtLink"
-    :class="{ 'inline-flex flex-row items-center gap-2': showExternalIcon }"
+    :class="{ 'inline-flex w-max items-center gap-x-2': showExternalIcon }"
     :to="linkTo"
     v-on="$listeners"
     @click.native="$emit('click', $event)"

frontend/src/pages/image/_id/report.vue

@@ -20,11 +20,11 @@
       />
       <!-- eslint-enable vue/no-v-html -->
       <VButton
-        variant="secondary-bordered"
+        variant="bordered-gray"
         :href="`/image/${image.id}`"
         as="VLink"
-        size="disabled"
-        class="p-2 text-sr text-dark-charcoal"
+        size="medium"
+        class="label-bold"
       >
         {{ $t("report.image-details") }}
       </VButton>

frontend/src/styles/tailwind.css

@@ -173,7 +173,7 @@ Time                - 11px - xs semibold (default leading-tight)
   [class*="focus-slim-filled"] {
     @apply focus-visible:relative focus-visible:after:pointer-events-none;
     /* colored outline */
-    @apply focus-visible:outline focus-visible:outline-1.5;
+    @apply focus-visible:outline focus-visible:outline-1.5 focus-visible:outline-offset-0;
     /* absolutely positioned overlapping pseudo element with a 1.5px border */
     @apply focus-visible:after:absolute focus-visible:after:z-10 focus-visible:after:rounded-inherit;
     @apply focus-visible:after:border-1.5 focus-visible:after:border-white;

frontend/test/playwright/e2e/header-internal.spec.ts

@@ -84,6 +84,7 @@ test.describe("Header internal", () => {
       await page.goto("/")
       await clickMenuButton(page)
       await page.getByRole("link", { name: t("navigation.about") }).click()
+      await page.waitForURL("/about")
       await scrollToBottom(page)
       const scrollPosition = await page.evaluate(() => window.scrollY)
       expect(scrollPosition).toBeGreaterThan(100)

frontend/test/playwright/utils/navigation.ts

@@ -336,7 +336,7 @@ export const openFirstResult = async (page: Page, mediaType: MediaType) => {
   const firstResultHref = await getLocatorHref(firstResult)
   await firstResult.click({ position: { x: 32, y: 32 } })
   await scrollDownAndUp(page)
-  await page.waitForURL(firstResultHref)
+  await page.waitForURL(firstResultHref, { waitUntil: "networkidle" })
   await page.mouse.move(0, 0)
 }