Fix incorrect text styles (#1403)

* Fix incorrect text styles

Fix incorrect text styles on image single result page to
match figma design file.
- Update image author text to have font-size: 14px and line-height: 18.2px

* Update src/pages/image/_id.vue

* Refactor image title wrapper

- Updated image title wrapper from span to div

- Moved text styles to wrapper to avoid repetition

* Fix incorrect text styles in audio single result page

Fix text styles on audio single result page that do not match figma design:

- Change Download button font-weight and font-size on all screens

- Change audio title line-height

- Change audio creator font-size on all screens

- Change Audio Information and Related Audio headings' font-size on mobile

* Fix text line-height

- Convert line-height from percent to unit-less numbers

- Fix author text line-height

* Update src/pages/image/_id.vue

* Fix translation files

* Update snapshots and fix playwright pnpm versions

Co-authored-by: Olga Bulat <obulat@gmail.com>
Co-authored-by: Zack Krida <zackkrida@pm.me>
Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

Dockerfile.playwright

@@ -2,4 +2,5 @@ ARG PLAYWRIGHT_VERSION
 
 FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-focal
 
-RUN npm install -g pnpm
+COPY package.json .
+RUN npm install -g $(grep packageManager package.json | awk '{print $2}' | sed 's/[",]//g')

bin/playwright.sh

@@ -11,4 +11,4 @@ export TEST_COMMAND=${TEST_COMMAND:-test:playwright:local}
 
 echo Running Playwright v$PLAYWRIGHT_VERSION as $USER_ID with Playwright arguments $PLAYWRIGHT_ARGS
 
-docker-compose -f docker-compose.playwright.yml up --build --force-recreate --abort-on-container-exit --exit-code-from playwright
+docker-compose -f docker-compose.playwright.yml up --build --force-recreate --abort-on-container-exit --exit-code-from playwright --remove-orphans

docker-compose.playwright.yml

@@ -10,7 +10,7 @@ services:
       - .:/app
     user: ${USER_ID}
     working_dir: /app
-    command: pnpm ${TEST_COMMAND} -- ${PLAYWRIGHT_ARGS:-}
+    command: pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-}
     environment:
       # This makes the webserver that Playwright runs show the build
       - DEBUG=pw:webserver

src/components/VAudioDetails/VAudioDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="audio-info">
     <header class="flex flex-row justify-between items-center mb-6">
-      <h4 class="text-base lg:text-3xl">
+      <h4 class="text-2xl lg:text-3xl">
         {{ $t('audio-details.information') }}
       </h4>
       <VContentReportPopover :media="audio" />

src/components/VAudioDetails/VRelatedAudio.vue

@@ -1,6 +1,6 @@
 <template>
   <aside :aria-label="$t('audio-details.related-audios')">
-    <h4 class="text-base lg:text-3xl mb-6">
+    <h4 class="text-2xl lg:text-3xl mb-6">
       {{ $t('audio-details.related-audios') }}
     </h4>
     <div v-if="!fetchState.isError" class="flex flex-col gap-8 lg:gap-12 mb-12">

src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -24,18 +24,14 @@
         class="audio-info order-2 lg:order-1 w-full lg:w-auto flex flex-col justify-center"
       >
         <h1
-          class="text-base lg:text-3xl font-heading font-semibold lg:line-clamp-2"
+          class="text-base lg:text-3xl font-heading font-semibold lg:line-clamp-2 leading-[1.3]"
         >
           {{ audio.title }}
         </h1>
         <div
-          class="subtitle mt-1 flex flex-col lg:flex-row lg:items-center gap-2"
+          class="subtitle mt-1 flex flex-col lg:flex-row lg:items-center gap-2 text-base leading-[1.3]"
         >
-          <i18n
-            as="span"
-            path="audio-track.creator"
-            class="font-semibold leading-snug"
-          >
+          <i18n as="span" path="audio-track.creator" class="font-semibold">
             <template #creator>
               <VLink
                 class="p-px rounded-sm focus:outline-none focus:ring focus:ring-pink"
@@ -58,7 +54,7 @@
         as="VLink"
         :href="audio.foreign_landing_url"
         :size="isSmall ? 'small' : 'medium'"
-        class="ms-auto order-1 lg:order-2 font-bold"
+        class="ms-auto order-1 lg:order-2 text-sr lg:text-2xl font-semibold"
       >
         {{ $t('download-button.download') }}
       </VButton>

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-06-16T13:55:29+00:00\n"
+"POT-Creation-Date: 2022-06-16T20:51:13+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -13,7 +13,7 @@ msgstr ""
 "Language-Team: LANGUAGE <LL@li.org>\n"
 
 
-#: src/components/VAudioTrack/layouts/VFullLayout.vue:50
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:46
 msgctxt "interpunct"
 msgid "•"
 msgstr ""
@@ -160,7 +160,7 @@ msgctxt "modal.close-named"
 msgid "Close ###name###"
 msgstr ""
 
-#: src/components/VAudioTrack/layouts/VFullLayout.vue:63
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:59
 msgctxt "download-button.download"
 msgid "Download"
 msgstr ""
@@ -467,7 +467,7 @@ msgid "Genre"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:44
+#: src/pages/image/_id.vue:46
 msgctxt "image-details.creator"
 msgid "by ###name###"
 msgstr ""
@@ -654,7 +654,7 @@ msgid "Open form"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:54
+#: src/pages/image/_id.vue:51
 msgctxt "media-details.aria.creator-url"
 msgid "author ###name###"
 msgstr ""
@@ -1195,7 +1195,7 @@ msgid "An error occurred"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:196
+#: src/pages/image/_id.vue:193
 msgctxt "error.image-not-found"
 msgid "Couldn't find image with id ###id###"
 msgstr ""

src/pages/image/_id.vue

@@ -33,20 +33,17 @@
       <VButton
         as="VLink"
         :href="image.foreign_landing_url"
-        class="btn-main flex-initial w-full md:w-max mb-4 md:mb-0"
+        class="btn-main flex-initial w-full md:w-max mb-4 md:mb-0 leading-[1.3]"
         size="large"
         >{{ $t('image-details.weblink') }}</VButton
       >
-      <span class="flex-1 flex flex-col justify-center">
-        <h1 class="text-base md:text-3xl font-semibold leading-[130%]">
+      <div
+        class="flex-1 flex flex-col justify-center font-semibold text-base leading-[1.3]"
+      >
+        <h1 class="md:text-3xl font-semibold">
           {{ image.title }}
         </h1>
-        <i18n
-          v-if="image.creator"
-          path="image-details.creator"
-          tag="span"
-          class="font-semibold leading-[130%]"
-        >
+        <i18n v-if="image.creator" path="image-details.creator" tag="span">
           <template #name>
             <VLink
               v-if="image.creator_url"
@@ -61,7 +58,7 @@
             <span v-else>{{ image.creator }}</span>
           </template>
         </i18n>
-      </span>
+      </div>
     </section>
 
     <VMediaReuse :media="image" />

test/playwright/README.md

@@ -29,10 +29,10 @@ To run the end-to-end tests, after having installed docker, run the following:
 pnpm test:playwright
 ```
 
-You may pass arguments to playwright after a `--`, for example `-u` to update snapshots or a filter.
+You may pass arguments to playwright directly, for example `-u` to update snapshots or a filter.
 
 ```bash
-pnpm test:playwright -- visual-regression -u
+pnpm test:playwright visual-regression -u
 ```
 
 The above will run only test files with `visual-regression` in the path and will update any snapshot tests due to the `-u` flag.