WordPress · obulat · Apr 13, 2023 · Mar 28, 2023 · Mar 28, 2023 · Apr 6, 2023
@@ -53,16 +53,14 @@
       <VButton
         as="VLink"
         :href="audio.foreign_landing_url"
-        size="disabled"
-        class="order-1 self-center px-6 py-3 text-sr font-semibold ms-auto md:px-6 md:py-4 md:text-2xl lg:order-2"
+        size="large"
+        variant="filled-pink"
+        has-icon-end
+        show-external-icon
+        :external-icon-size="6"
+        class="description-bold order-1 my-1 flex-shrink-0 ms-auto lg:order-2"
       >
         {{ $t("audio-details.weblink") }}
-        <VIcon
-          :icon-path="externalIcon"
-          :rtl-flip="true"
-          :size="4"
-          class="ms-2 md:h-6 md:w-6"
-        />
       </VButton>
     </div>
   </div>
@@ -76,14 +74,11 @@ import { timeFmt } from "~/utils/time-fmt"
 import { AudioSize, AudioStatus, audioFeatures } from "~/constants/audio"
 
 import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
 import VLink from "~/components/VLink.vue"
 
-import externalIcon from "~/assets/icons/external-link.svg"
-
 export default defineComponent({
   name: "VFullLayout",
-  components: { VButton, VIcon, VLink },
+  components: { VButton, VLink },
   props: {
     audio: {
       type: Object as PropType<AudioDetail>,
@@ -108,7 +103,6 @@ export default defineComponent({
 
       isSmall,
       audioFeatures,
-      externalIcon,
     }
   },
 })

@@ -15,10 +15,10 @@
         'gap-x-2':
           (hasIconEnd || hasIconStart) && (size == 'medium' || size == 'large'),
         'gap-x-1': (hasIconEnd || hasIconStart) && size == 'small',
-        // Custom tailwind classes don't work with CSS modules in Vue so they are written here explicitly instead of accessed off of `$style`.
+        // Custom tailwind classes don't work with CSS modules in Vue, so they are
+        // written here explicitly instead of accessed off of `$style`.
         'focus-slim-filled': isFilled,
         'focus-slim-tx': isBordered || isTransparent,
-        'description-bold': isNewVariant,
         'border border-tx ring-offset-1 focus:outline-none focus-visible:ring focus-visible:ring-pink':
           !isPlainDangerous && !isNewVariant,
       },
@@ -292,15 +292,9 @@ export default VButton
   @apply cursor-not-allowed;
 }
 
-.size-small-old {
-  @apply py-1 px-2;
-}
 .size-medium-old {
   @apply py-2 px-4;
 }
-.size-large-old {
-  @apply py-6 px-8;
-}
 
 .size-small {
   @apply h-8 py-0 px-2;

@@ -1,7 +1,8 @@
 <template>
   <VButton
-    variant="primary"
-    class="relative h-12 py-4 text-sm font-semibold ms-auto"
+    variant="filled-pink"
+    size="large"
+    class="label-bold relative ms-auto"
     @click="$emit('click')"
   >
     <!-- Loading animation -->

@@ -1,7 +1,7 @@
 <template>
   <VButton
     v-show="canLoadMore"
-    size="large-old"
+    class="py-6 px-8"
     variant="full"
     :disabled="isFetching"
     data-testid="load-more"

@@ -34,7 +34,7 @@ export const Template = (args) => ({
     <div id="wrapper"
         class="w-40 h-16 flex items-center justify-center"
         :class="args?.variant.startsWith('transparent') ? 'bg-dark-charcoal-06': 'bg-white'">
-    <VButton v-bind="args" @click="onClick" href="/">
+    <VButton v-bind="args" class="description-bold" @click="onClick" href="/">
       Code is Poetry
     </VButton>
     </div>

@@ -26,21 +26,19 @@
 
     <section
       id="title-button"
-      class="flex flex-row flex-wrap justify-between md:mt-6 md:flex-row-reverse"
+      class="flex flex-row flex-wrap justify-between gap-x-6 md:mt-6 md:flex-row-reverse"
     >
       <VButton
         as="VLink"
         :href="image.foreign_landing_url"
-        class="description-bold md:heading-6 mb-4 w-full flex-initial self-center md:mb-0 md:w-max"
-        size="large-old"
+        variant="filled-pink"
+        class="description-bold mb-4 !w-full flex-initial md:mb-0 md:!w-max"
+        show-external-icon
+        :external-icon-size="6"
+        has-icon-end
+        size="large"
       >
         {{ $t("image-details.weblink") }}
-        <VIcon
-          :icon-path="externalIcon"
-          :rtl-flip="true"
-          class="ms-2 md:h-6 md:w-6"
-          :size="4"
-        />
       </VButton>
       <div class="description-bold flex flex-1 flex-col justify-center">
         <h1 class="description-bold md:heading-5 line-clamp-2">
@@ -94,7 +92,6 @@ import { createDetailPageMeta } from "~/utils/og"
 
 import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
 import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
 import VImageDetails from "~/components/VImageDetails/VImageDetails.vue"
 import VLink from "~/components/VLink.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
@@ -110,7 +107,6 @@ export default defineComponent({
   components: {
     VBackToSearchResultsLink,
     VButton,
-    VIcon,
     VLink,
     VImageDetails,
     VMediaReuse,

@@ -59,7 +59,7 @@
         as="VLink"
         variant="filled-pink"
         size="large"
-        class="not-prose"
+        class="not-prose description-bold"
         show-external-icon
         :external-icon-size="6"
         has-icon-end

@@ -36,9 +36,7 @@ export const buttonSizes = [
   "medium",
   "small",
   "disabled",
-  "large-old",
   "medium-old",
-  "small-old",
 ] as const
 export type ButtonSize = typeof buttonSizes[number]