From 24266b6a6fb14e2d1b467826de431f40f4899b75 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 17:04:20 -0400
Subject: [PATCH 1/8] Remove scss lang directives from Vue SFC style tags; add
 eslint rule to enforce

---
 .eslintrc.js                                  |   6 +
 src/components/CopyButton.vue                 |   6 +-
 src/components/ExtensionBrowsers.vue          |  11 +-
 src/components/LoadingIcon.vue                |   3 +-
 src/components/LocaleSelector.vue             | 150 ------------------
 src/components/SketchFabViewer.vue            |   2 +-
 .../VAudioDetails/VAudioDetails.vue           |   8 +-
 src/components/VErrorSection/VErrorImage.vue  |   9 +-
 src/components/VImageGrid/VImageGrid.vue      |   2 +-
 src/components/VNotificationBanner.vue        |   4 +-
 src/components/VSkeleton/VGridSkeleton.vue    |   2 +-
 src/layouts/default.vue                       |  11 +-
 src/pages/extension.vue                       | 100 +++++-------
 src/pages/sources.vue                         |   3 +-
 14 files changed, 76 insertions(+), 241 deletions(-)
 delete mode 100644 src/components/LocaleSelector.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 53ae8e253d..a5407c73c9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -44,6 +44,12 @@ module.exports = {
     'vue/html-closing-bracket-newline': 'off',
     'vue/html-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',
+    'vue/block-lang': [
+      'error',
+      {
+        style: { allowNoLang: true },
+      },
+    ],
     'vue/component-name-in-template-casing': [
       'error',
       'PascalCase',
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index a245eb66d9..040482b426 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -61,7 +61,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+/**
+  * Styles are applied here to 'hack' and overrule specificity.
+  * @todo Find a better way to handle this in the template.
+**/
 button {
   @apply py-2 px-3 text-sr;
 }
diff --git a/src/components/ExtensionBrowsers.vue b/src/components/ExtensionBrowsers.vue
index d49bef4bf6..999fbdef3a 100644
--- a/src/components/ExtensionBrowsers.vue
+++ b/src/components/ExtensionBrowsers.vue
@@ -51,13 +51,12 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .browser-button {
-  background-color: $color-white;
+  @apply bg-white;
+}
 
-  img {
-    height: 1.5em;
-    width: 1.5em;
-  }
+.browser-button img {
+  @apply w-6 h-6;
 }
 </style>
diff --git a/src/components/LoadingIcon.vue b/src/components/LoadingIcon.vue
index 11aba5b9fe..0abf4a8240 100644
--- a/src/components/LoadingIcon.vue
+++ b/src/components/LoadingIcon.vue
@@ -13,7 +13,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .lds-ring {
   display: inline-block;
   position: relative;
@@ -40,6 +40,7 @@ export default {
 .lds-ring div:nth-child(3) {
   animation-delay: -0.15s;
 }
+
 @keyframes lds-ring {
   0% {
     transform: rotate(0deg);
diff --git a/src/components/LocaleSelector.vue b/src/components/LocaleSelector.vue
deleted file mode 100644
index a3183ccfd6..0000000000
--- a/src/components/LocaleSelector.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <div class="locale-selector">
-    {{ $t('hero.locale.label') }}
-    <div class="lang">
-      <span class="icon globe is-small is-left">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 30 30"
-          width="30"
-          height="30"
-        >
-          <path
-            d="M20.186 9.375C19.335 4.143 17.332.469 15 .469s-4.336 3.674-5.186 8.906h10.372zM9.375 15c0 1.3.07 2.549.193 3.75h10.858a36.74 36.74 0 00.193-3.75c0-1.3-.07-2.549-.193-3.75H9.568A36.725 36.725 0 009.375 15zM28.4 9.375a14.562 14.562 0 00-9.257-8.297c1.43 1.98 2.414 4.963 2.93 8.297H28.4zM10.852 1.078A14.552 14.552 0 001.6 9.375h6.328c.51-3.334 1.494-6.316 2.924-8.297zM29.027 11.25h-6.72c.123 1.23.193 2.49.193 3.75 0 1.26-.07 2.52-.193 3.75h6.715c.322-1.201.503-2.45.503-3.75 0-1.3-.181-2.549-.498-3.75zM7.5 15c0-1.26.07-2.52.193-3.75H.973A14.66 14.66 0 00.469 15c0 1.3.187 2.549.504 3.75h6.715A39.675 39.675 0 017.5 15zm2.314 5.625c.85 5.232 2.854 8.906 5.186 8.906s4.336-3.674 5.186-8.906H9.814zm9.334 8.297a14.576 14.576 0 009.258-8.297h-6.328c-.515 3.334-1.5 6.316-2.93 8.297zM1.6 20.625a14.562 14.562 0 009.257 8.297c-1.43-1.98-2.414-4.963-2.93-8.297H1.6z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-      <div class="select">
-        <select
-          ref="select"
-          v-model="currentLocale"
-          aria-labelledby="locale-label"
-        >
-          <option
-            v-for="locale in $i18n.locales"
-            :key="locale.code"
-            :value="locale.code"
-          >
-            {{ locale.name }}
-          </option>
-        </select>
-      </div>
-      <span class="icon caret-down is-small is-right">
-        <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M7.45896 11.25H22.5351c1.043 0 1.5645 1.2598.8262 1.998l-7.5352 7.5411c-.457.457-1.2011.457-1.6582 0L6.63279 13.248c-.73828-.7382-.2168-1.998.82617-1.998z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LocaleSelector',
-  data() {
-    return {
-      currentLanguage: 'English',
-    }
-  },
-  computed: {
-    currentLocale: {
-      get() {
-        return this.$i18n.locale
-      },
-      set(val) {
-        this.$i18n.setLocale(val)
-      },
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.locale-selector {
-  margin-top: $space-big;
-  display: flex;
-  .lang {
-    margin-left: 1rem;
-  }
-}
-.lang {
-  position: relative;
-  height: fit-content;
-  border-radius: 4px;
-  .select:not(.is-multiple):not(.is-loading) {
-    height: unset;
-    select:not(.is-multiple):not(.is-loading) {
-      border-color: transparent;
-      border-width: 0.125rem;
-      width: 8.125rem;
-      padding: calc(#{$space-smaller} - 1.3px) calc(#{$space-big} - 1.3px)
-        calc(#{$space-smaller} - 1.3px) 1.7rem;
-      height: 2.1875rem;
-      line-height: 1.118rem;
-      font-size: 0.813rem;
-      font-weight: 700;
-      &:focus,
-      &:active,
-      &:hover {
-        border-color: #b0b0b0;
-        outline: none;
-      }
-    }
-    &:not(.is-multiple):not(.is-loading)::after {
-      content: unset;
-    }
-  }
-  .icon {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-    &.is-right {
-      left: 6.5rem;
-    }
-    &.is-left {
-      left: 0.625rem;
-    }
-    & svg {
-      height: 0.625rem;
-      width: auto;
-    }
-    &.caret-down {
-      color: $color-gray;
-      width: 0.938rem;
-      & svg {
-        height: 0.938rem;
-        width: auto;
-      }
-    }
-    &.globe {
-      z-index: 1;
-      color: $color-gray;
-    }
-  }
-  @include tablet() {
-    background-color: $color-lighter-gray;
-    .select:not(.is-multiple):not(.is-loading) {
-      select:not(.is-multiple):not(.is-loading) {
-        width: 100%;
-        font-size: 0.75rem;
-        background-color: $color-lighter-gray;
-        height: unset;
-      }
-      &:not(.is-multiple):not(.is-loading)::after {
-        content: unset;
-      }
-    }
-    .icon.is-right {
-      right: 0.625rem;
-      left: unset;
-    }
-  }
-}
-</style>
diff --git a/src/components/SketchFabViewer.vue b/src/components/SketchFabViewer.vue
index 6871442a55..a3e1f16a9c 100644
--- a/src/components/SketchFabViewer.vue
+++ b/src/components/SketchFabViewer.vue
@@ -69,7 +69,7 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .image {
   display: block;
 }
diff --git a/src/components/VAudioDetails/VAudioDetails.vue b/src/components/VAudioDetails/VAudioDetails.vue
index 8b3b280cd6..71d67fd266 100644
--- a/src/components/VAudioDetails/VAudioDetails.vue
+++ b/src/components/VAudioDetails/VAudioDetails.vue
@@ -107,14 +107,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 dl {
-  @apply grid gap-4;
+  @apply grid gap-4 lg:gap-5;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-
-  @screen lg {
-    @apply gap-5;
-  }
 }
 dl div {
   display: flex;
diff --git a/src/components/VErrorSection/VErrorImage.vue b/src/components/VErrorSection/VErrorImage.vue
index 6076a74a83..64cfbee585 100644
--- a/src/components/VErrorSection/VErrorImage.vue
+++ b/src/components/VErrorSection/VErrorImage.vue
@@ -49,12 +49,11 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 ::v-deep .attribution {
   @apply text-dark-charcoal-70;
-
-  a {
-    @apply text-current underline;
-  }
+}
+::v-deep a {
+  @apply text-current underline;
 }
 </style>
diff --git a/src/components/VImageGrid/VImageGrid.vue b/src/components/VImageGrid/VImageGrid.vue
index 02c8265817..fe9643ca84 100644
--- a/src/components/VImageGrid/VImageGrid.vue
+++ b/src/components/VImageGrid/VImageGrid.vue
@@ -65,7 +65,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .image-grid:after {
   /**
    * This keeps the last item in the results from expanding to fill
diff --git a/src/components/VNotificationBanner.vue b/src/components/VNotificationBanner.vue
index f14d794db3..42ba6749ee 100644
--- a/src/components/VNotificationBanner.vue
+++ b/src/components/VNotificationBanner.vue
@@ -40,8 +40,8 @@ const VNotificationBanner = defineComponent({
 export default VNotificationBanner
 </script>
 
-<style scoped lang="scss">
-// Styles from learn.wordpress.org
+<style scoped>
+/** Styles from learn.wordpress.org **/
 .wrapper {
   background-color: #fff8e5;
   border-left: 0.25rem solid #ffb900;
diff --git a/src/components/VSkeleton/VGridSkeleton.vue b/src/components/VSkeleton/VGridSkeleton.vue
index 42fcacec45..2249c7b2c3 100644
--- a/src/components/VSkeleton/VGridSkeleton.vue
+++ b/src/components/VSkeleton/VGridSkeleton.vue
@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .square {
   aspect-ratio: 1 / 1;
 }
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index eeec414ca6..9f899385b0 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -99,25 +99,24 @@ const embeddedPage = {
 }
 export default embeddedPage
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .app {
   grid-template-rows: auto 1fr;
 }
 
 @screen md {
-  // Logic for displaying the filter sidebar and search results
-  // as independently-scrolling sections.
+  /** Display the search filter sidebar and results as independently-scrolling. **/
   .main {
     height: 100%;
     display: grid;
     grid-template-columns: 1fr 336px;
   }
-  // Make the main content area span both grid columns
-  // when the sidebar is closed...
+
+  /** Make the main content area span both grid columns when the sidebar is closed... **/
   .main > *:first-child {
     grid-column: span 2;
   }
-  // ...and only one column when it is visible.
+  /** ...and only one column when it is visible. **/
   .main.has-sidebar > *:first-child {
     grid-column: 1;
   }
diff --git a/src/pages/extension.vue b/src/pages/extension.vue
index 06a2c4d4ff..607b9667a4 100644
--- a/src/pages/extension.vue
+++ b/src/pages/extension.vue
@@ -10,7 +10,7 @@
         <ExtensionBrowsers />
         <video
           ref="heroVid"
-          class="screenshot block w-full mx-auto"
+          class="max-w-7xl block w-full mx-auto"
           autoplay
           loop
           muted
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div
-      class="features grid grid-cols-1 tab:grid-cols-2 gap-x-12 gap-y-30 py-30 mx-auto"
+      class="features max-w-6xl grid grid-cols-1 tab:grid-cols-2 gap-x-12 gap-y-30 py-30 mx-auto"
     >
       <template v-for="(feature, index) in features">
         <figure
@@ -35,7 +35,7 @@
           :style="{ '--cell-idx': index * 2 }"
         >
           <img
-            class="screenshot w-full rounded border"
+            class="max-w-7xl w-full rounded border"
             :src="feature.image"
             :alt="$t(`extension.features.${feature.key}.heading`)"
           />
@@ -105,75 +105,57 @@ const AboutPage = {
 export default AboutPage
 </script>
 
-<style lang="scss" scoped>
-$video-max-width: 1200px;
-$video-actual-width: 1140px; // Video has internal padding
+<style scoped>
+.container .intro {
+  max-width: 880px;
+}
 
 .hero-section {
-  background-color: $color-wp-gray-0;
-  border-color: $color-transition-gray;
-
-  .container {
-    .intro {
-      max-width: 880px;
-    }
-
-    .screenshot {
-      max-width: $video-max-width;
-    }
-  }
+  @apply border-dark-charcoal-30 bg-[#f6f7f7];
 }
 
-.features {
-  max-width: $video-actual-width;
-
-  figure,
-  .description {
-    order: var(--cell-idx);
-    @apply text-center;
-
-    @include from($tablet) {
-      &:nth-of-type(odd) {
-        @apply text-left items-start;
-      }
+.features figure,
+.features .description {
+  order: var(--cell-idx);
+  @apply text-center;
+}
 
-      &:nth-of-type(even) {
-        @apply text-right items-end;
-      }
-    }
+@screen md {
+  .features figure:nth-of-type(odd),
+  .features .description:nth-of-type(odd) {
+    @apply text-left items-start;
   }
 
-  figure {
-    img {
-      border-color: rgba(30, 30, 30, 0.2);
-      filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))
-        drop-shadow(0px 20px 33px rgba(0, 0, 0, 0.07));
-      max-width: 30rem;
-    }
+  .features figure:nth-of-type(even),
+  .features .description:nth-of-type(even) {
+    @apply text-right items-end;
   }
+}
 
-  .description {
-    h2,
-    p {
-      max-width: 30rem;
-    }
-  }
+figure img {
+  border-color: rgba(30, 30, 30, 0.2);
+  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))
+    drop-shadow(0px 20px 33px rgba(0, 0, 0, 0.07));
+  max-width: 30rem;
+}
 
-  @include from($tablet) {
-    // Rearrange middle row on two column layouts for zig-zag appearance
-    figure[data-index='1'] {
-      order: 4;
-    }
+.description h2,
+.description p {
+  max-width: 30rem;
+}
 
-    .description[data-index='1'] {
-      order: 3;
-    }
+@screen md {
+  /** Rearrange middle row on two column layouts for zig-zag appearance **/
+  figure[data-index='1'] {
+    order: 4;
   }
-}
 
-.conclusion {
-  h2 {
-    max-width: 40rem;
+  .description[data-index='1'] {
+    order: 3;
   }
 }
+
+.conclusion h2 {
+  max-width: 40rem;
+}
 </style>
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 2900046bbf..3f18c55cf7 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -194,8 +194,7 @@ const SourcePage = {
 export default SourcePage
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
+<style scoped>
 .table {
   table-layout: fixed;
   width: 100%;

From bc6a432e3f904ee0143f340853a01a947b3f6899 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 17:45:31 -0400
Subject: [PATCH 2/8] Remove explicit "lang=css" declarations from some vue
 components

---
 src/components/DropdownButton.vue        | 2 +-
 src/components/VAudioTrack/VWaveform.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DropdownButton.vue b/src/components/DropdownButton.vue
index f10e7fe8a2..6e093bb58e 100644
--- a/src/components/DropdownButton.vue
+++ b/src/components/DropdownButton.vue
@@ -170,7 +170,7 @@ const DropdownButton = defineComponent({
 export default DropdownButton
 </script>
 
-<style lang="css" scoped>
+<style scoped>
 .dropdown-button {
   @apply flex items-center justify-center bg-pink text-white font-bold transition-shadow duration-100 ease-linear disabled:opacity-70 focus:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-pink hover:bg-dark-pink no-underline appearance-none;
 }
diff --git a/src/components/VAudioTrack/VWaveform.vue b/src/components/VAudioTrack/VWaveform.vue
index f0cc754001..0f420706b3 100644
--- a/src/components/VAudioTrack/VWaveform.vue
+++ b/src/components/VAudioTrack/VWaveform.vue
@@ -583,7 +583,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="css">
+<style scoped>
 .waveform {
   --v-background-color: var(
     --waveform-background-color,

From 3625326c6b1f83cc37babe7b2d1c493fe2f157f2 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 17:46:07 -0400
Subject: [PATCH 3/8] Update translations

---
 src/locales/po-files/openverse.pot | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index ac268854c2..f460280c4f 100644
--- a/src/locales/po-files/openverse.pot
+++ b/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-03-23T10:00:02+00:00\n"
+"POT-Creation-Date: 2022-03-28T21:45:58+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1868,7 +1868,6 @@ msgctxt "hero.aria.search-type"
 msgid "search type"
 msgstr ""
 
-#: src/components/LocaleSelector.vue:3
 msgctxt "hero.locale.label"
 msgid "Languages available"
 msgstr ""

From 0402782e7eaa59e0a6d38f2d77b353641ce9dedb Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 21:34:33 -0400
Subject: [PATCH 4/8] Update .eslintrc.js

---
 .eslintrc.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index a5407c73c9..acf38b9f95 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,6 +47,8 @@ module.exports = {
     'vue/block-lang': [
       'error',
       {
+	// This confusing naming prevents the use of 'lang' directives 
+	// entirely on Vue SFC style blocks.
         style: { allowNoLang: true },
       },
     ],

From e6a66e49a1165f6d8136fc3f048b65f81156cd91 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 21:35:00 -0400
Subject: [PATCH 5/8] Update .eslintrc.js

---
 .eslintrc.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index acf38b9f95..ba35f3d052 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,8 +47,8 @@ module.exports = {
     'vue/block-lang': [
       'error',
       {
-	// This confusing naming prevents the use of 'lang' directives 
-	// entirely on Vue SFC style blocks.
+            // This confusing naming prevents the use of 'lang' directives 
+            // entirely on Vue SFC style blocks.
         style: { allowNoLang: true },
       },
     ],

From 38e1740c69f8ddebe440af2c9b03a5c9d382666a Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 21:35:23 -0400
Subject: [PATCH 6/8] Update .eslintrc.js

---
 .eslintrc.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index ba35f3d052..a761c7dfce 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,8 +47,8 @@ module.exports = {
     'vue/block-lang': [
       'error',
       {
-            // This confusing naming prevents the use of 'lang' directives 
-            // entirely on Vue SFC style blocks.
+          // This confusing naming prevents the use of 'lang' directives 
+          // entirely on Vue SFC style blocks.
         style: { allowNoLang: true },
       },
     ],

From 0c81128ac7fe137259f6f7d0e6864d7fbfeb4b61 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Mon, 28 Mar 2022 21:35:49 -0400
Subject: [PATCH 7/8] Update .eslintrc.js

---
 .eslintrc.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a761c7dfce..8caf91b837 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,8 +47,8 @@ module.exports = {
     'vue/block-lang': [
       'error',
       {
-          // This confusing naming prevents the use of 'lang' directives 
-          // entirely on Vue SFC style blocks.
+        // This confusing naming prevents the use of 'lang' directives 
+        // entirely on Vue SFC style blocks.
         style: { allowNoLang: true },
       },
     ],

From ee1b29347972f3152176638a33b502c4b09a1337 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 29 Mar 2022 13:44:24 +0300
Subject: [PATCH 8/8] CopyButton style and name change; remove unused locale
 strings (#1201)

* Move copy button styles to tailwind, add V prefix

* Remove unused locale strings
---
 .eslintrc.js                                  |  2 +-
 .../{CopyButton.vue => VCopyButton.vue}       | 14 +++----------
 src/components/VMediaInfo/VCopyLicense.vue    |  6 +++---
 src/locales/en.json                           |  4 ----
 src/locales/po-files/openverse.pot            | 14 +++----------
 ...y-button.spec.js => v-copy-button.spec.js} | 20 +++++++++----------
 6 files changed, 20 insertions(+), 40 deletions(-)
 rename src/components/{CopyButton.vue => VCopyButton.vue} (84%)
 rename test/unit/specs/components/{copy-button.spec.js => v-copy-button.spec.js} (74%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8caf91b837..93ad6cadbc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,7 +47,7 @@ module.exports = {
     'vue/block-lang': [
       'error',
       {
-        // This confusing naming prevents the use of 'lang' directives 
+        // This confusing naming prevents the use of 'lang' directives
         // entirely on Vue SFC style blocks.
         style: { allowNoLang: true },
       },
diff --git a/src/components/CopyButton.vue b/src/components/VCopyButton.vue
similarity index 84%
rename from src/components/CopyButton.vue
rename to src/components/VCopyButton.vue
index 040482b426..9cfa42bcf2 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/VCopyButton.vue
@@ -3,6 +3,8 @@
     :id="id"
     type="button"
     variant="secondary"
+    size="disabled"
+    class="py-2 px-3 text-sr"
     :data-clipboard-target="el"
   >
     <span v-if="!success">
@@ -20,7 +22,7 @@ import Clipboard from 'clipboard'
 import VButton from '~/components/VButton.vue'
 
 export default {
-  name: 'CopyButton',
+  name: 'VCopyButton',
   components: { VButton },
   props: {
     el: {
@@ -60,13 +62,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-/**
-  * Styles are applied here to 'hack' and overrule specificity.
-  * @todo Find a better way to handle this in the template.
-**/
-button {
-  @apply py-2 px-3 text-sr;
-}
-</style>
diff --git a/src/components/VMediaInfo/VCopyLicense.vue b/src/components/VMediaInfo/VCopyLicense.vue
index 796891d719..50eaa610eb 100644
--- a/src/components/VMediaInfo/VCopyLicense.vue
+++ b/src/components/VMediaInfo/VCopyLicense.vue
@@ -121,7 +121,7 @@
         </i18n>
       </div>
 
-      <CopyButton
+      <VCopyButton
         :id="`copyattr-${tab}`"
         :el="`#attribution-${tab}`"
         class="mt-6"
@@ -137,11 +137,11 @@ import getAttributionHtml from '~/utils/attribution-html'
 import { isPublicDomain } from '~/utils/license'
 
 import VLink from '~/components/VLink.vue'
-import CopyButton from '~/components/CopyButton.vue'
+import VCopyButton from '~/components/VCopyButton.vue'
 
 const VCopyLicense = defineComponent({
   name: 'VCopyLicense',
-  components: { CopyButton, VLink },
+  components: { VCopyButton, VLink },
   props: {
     media: {
       type: Object,
diff --git a/src/locales/en.json b/src/locales/en.json
index ae34961095..5847c45fa1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -16,10 +16,6 @@
     "license-filter": {
       "label": "I want something I can"
     },
-    "locale": {
-      "label": "Languages available",
-      "icon": "locale"
-    },
     "aria": {
       "search": "search",
       "search-type": "search type"
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index f460280c4f..fcc29726de 100644
--- a/src/locales/po-files/openverse.pot
+++ b/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-03-28T21:45:58+00:00\n"
+"POT-Creation-Date: 2022-03-29T03:57:50+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -596,12 +596,12 @@ msgctxt "media-details.reuse.copy-license.plain"
 msgid "Plain text"
 msgstr ""
 
-#: src/components/CopyButton.vue:9
+#: src/components/VCopyButton.vue:11
 msgctxt "media-details.reuse.copy-license.copy-text"
 msgid "Copy text"
 msgstr ""
 
-#: src/components/CopyButton.vue:12
+#: src/components/VCopyButton.vue:14
 msgctxt "media-details.reuse.copy-license.copied"
 msgid "Copied!"
 msgstr ""
@@ -1868,14 +1868,6 @@ msgctxt "hero.aria.search-type"
 msgid "search type"
 msgstr ""
 
-msgctxt "hero.locale.label"
-msgid "Languages available"
-msgstr ""
-
-msgctxt "hero.locale.icon"
-msgid "locale"
-msgstr ""
-
 msgctxt "hero.license-filter.label"
 msgid "I want something I can"
 msgstr ""
diff --git a/test/unit/specs/components/copy-button.spec.js b/test/unit/specs/components/v-copy-button.spec.js
similarity index 74%
rename from test/unit/specs/components/copy-button.spec.js
rename to test/unit/specs/components/v-copy-button.spec.js
index b7b1ec6b50..24e5f8d647 100644
--- a/test/unit/specs/components/copy-button.spec.js
+++ b/test/unit/specs/components/v-copy-button.spec.js
@@ -1,8 +1,8 @@
-import CopyButton from '~/components/CopyButton.vue'
+import VCopyButton from '~/components/VCopyButton.vue'
 
 import render from '../../test-utils/render'
 
-describe('CopyButton', () => {
+describe('VCopyButton', () => {
   let options = null
   let props = null
 
@@ -20,28 +20,28 @@ describe('CopyButton', () => {
   })
 
   it('should render correct contents', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     expect(wrapper.find('button')).toBeDefined()
   })
 
   it('data.success should be false by default', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     expect(wrapper.vm.$data.success).toBe(false)
   })
 
   it('data.success should be false by default', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     expect(wrapper.vm.$data.success).toBe(false)
   })
 
   it('should set data.success to true', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     wrapper.vm.onCopySuccess(eventData)
     expect(wrapper.vm.$data.success).toBe(true)
   })
 
   it('should set data.success to back to false after 2s', (done) => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     wrapper.vm.onCopySuccess(eventData)
     setTimeout(() => {
       expect(wrapper.vm.$data.success).toBe(false)
@@ -50,19 +50,19 @@ describe('CopyButton', () => {
   })
 
   it('should call clearSelection', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     wrapper.vm.onCopySuccess(eventData)
     expect(eventData.clearSelection).toHaveBeenCalled()
   })
 
   it('should emit copied event', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     wrapper.vm.onCopySuccess(eventData)
     expect(wrapper.emitted().copied).toBeTruthy()
   })
 
   it('should emit copyFailed event', () => {
-    const wrapper = render(CopyButton, options)
+    const wrapper = render(VCopyButton, options)
     wrapper.vm.onCopyError(eventData)
     expect(wrapper.emitted().copyFailed).toBeTruthy()
   })