Add underline to the "contribute a translation" link

src/components/VNotificationBanner.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="wrapper px-4 md:px-7 py-2 md:flex md:items-center md:justify-between"
+    dir="ltr"
+  >
+    <p class="text-center md:text-left">
+      <slot name="default" />
+    </p>
+    <div class="flex">
+      <slot name="buttons">
+        <button
+          class="button is-text small dismiss-button"
+          type="button"
+          :aria-label="$t('modal.close')"
+          @click="$emit('close')"
+        >
+          <VIcon :icon-path="closeIcon" />
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import closeIcon from '~/assets/icons/close.svg'
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+const VNotificationBanner = defineComponent({
+  name: 'VNotificationBanner',
+  components: {
+    VIcon,
+  },
+  setup() {
+    return { closeIcon }
+  },
+})
+export default VNotificationBanner
+</script>
+
+<style scoped lang="scss">
+// Styles from learn.wordpress.org
+.wrapper {
+  background-color: #fff8e5;
+  border-left: 0.25rem solid #ffb900;
+}
+</style>

src/components/TranslationStatusBanner.vue → src/components/VTranslationStatusBanner.vue

@@ -1,26 +1,30 @@
 <template>
-  <NotificationBanner v-show="!shouldHideBanner" @close="dismissBanner">
+  <VNotificationBanner v-show="!shouldHideBanner" @close="dismissBanner">
     {{
       // eslint-disable-next-line @intlify/vue-i18n/no-raw-text
       '⚠️'
     }}
     <i18n path="notification.translation.text">
       <template #link>
-        <a :href="translationLink" target="_blank">{{
+        <a :href="translationLink" target="_blank" class="underline">{{
           $t('notification.translation.link')
         }}</a>
       </template>
       <template #locale>
         {{ bannerLocale.name }}
       </template>
     </i18n>
-  </NotificationBanner>
+  </VNotificationBanner>
 </template>
 <script>
 import useI18nSync from '~/composables/use-i18n-sync'
+import VNotificationBanner from '~/components/VNotificationBanner.vue'
 
 export default {
-  name: 'TranslationStatusBanner',
+  name: 'VTranslationStatusBanner',
+  components: {
+    VNotificationBanner,
+  },
   setup() {
     const { shouldHideBanner, bannerLocale, translationLink, dismissBanner } =
       useI18nSync()

src/layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="app grid h-screen overflow-hidden">
     <VTeleportTarget name="skip-to-content" />
     <MigrationNotice v-show="isReferredFromCc" />
-    <TranslationStatusBanner />
+    <VTranslationStatusBanner />
     <VHeader />
     <main
       class="main embedded overflow-x-hidden"
@@ -32,7 +32,7 @@ import { useMatchSearchRoutes } from '~/composables/use-match-routes'
 import { useScroll } from '~/composables/use-scroll'
 
 import MigrationNotice from '~/components/MigrationNotice.vue'
-import TranslationStatusBanner from '~/components/TranslationStatusBanner.vue'
+import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
 import VHeader from '~/components/VHeader/VHeader.vue'
 import VModalTarget from '~/components/VModal/VModalTarget.vue'
 import VSidebarTarget from '~/components/VModal/VSidebarTarget.vue'
@@ -43,7 +43,7 @@ const embeddedPage = {
   name: 'embedded',
   components: {
     MigrationNotice,
-    TranslationStatusBanner,
+    VTranslationStatusBanner,
     VHeader,
     VModalTarget,
     VTeleportTarget,