Use new buttons in components

WordPress · Mar 23, 2023 · ddfd75f · ddfd75f
1 parent d26b85d
commit ddfd75f
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 71 deletions.
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -55,16 +55,13 @@
       <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"
+        variant="filled-pink"
+        has-icon-end
+        size="large"
+        class="order-1 self-center text-sr font-semibold ms-auto md:text-2xl 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"
-        />
+        <VIcon :icon-path="externalIcon" :rtl-flip="true" :size="6" />
       </VButton>
     </div>
   </div>

diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
@@ -377,10 +377,10 @@ a.button {
 }
 
 .transparent-gray {
-  @apply border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
 }
 .transparent-dark {
-  @apply border-tx bg-tx text-dark-charcoal hover:border-dark-charcoal hover:text-white hover:text-dark-charcoal;
+  @apply border border-tx bg-tx text-dark-charcoal hover:border-dark-charcoal hover:text-white hover:text-dark-charcoal;
 }
 
 .primary {

diff --git a/frontend/src/components/VContentReport/VContentReportButton.vue b/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="text-sr text-dark-charcoal-70 !pe-0 md:text-base"
   >
-    <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 :icon-path="icons.flag" class="ms-2" />
+    <VIcon :icon-path="icons.flag" />
   </VButton>
 </template>
 
@@ -33,9 +35,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.report-button {
-  @apply px-0;
-}
-</style>
diff --git a/frontend/src/components/VContentReport/VContentReportForm.vue b/frontend/src/components/VContentReport/VContentReportForm.vue
@@ -78,7 +78,8 @@
         <div class="flex flex-row items-center justify-end gap-4">
           <VButton
             v-if="allowCancel"
-            variant="secondary-bordered"
+            variant="bordered-dark"
+            size="medium"
             @click="handleCancel"
           >
             {{ $t("media-details.content-report.form.cancel") }}
@@ -88,19 +89,22 @@
             v-if="selectedReason === DMCA"
             key="dmca"
             as="VLink"
-            variant="secondary-filled"
+            variant="filled-dark"
+            size="medium"
+            has-icon-end
             :href="DMCA_FORM_URL"
           >
             {{ $t("media-details.content-report.form.dmca.open") }}
-            <VIcon :size="4" class="ms-1" :icon-path="icons.externalLink" />
+            <VIcon :size="6" :icon-path="icons.externalLink" />
           </VButton>
           <VButton
             v-else
             key="non-dmca"
             type="submit"
             :disabled="isSubmitDisabled"
             :focusable-when-disabled="true"
-            variant="secondary-filled"
+            variant="filled-dark"
+            size="medium"
             :value="$t('media-details.content-report.form.submit')"
           >
             {{ $t("media-details.content-report.form.submit") }}

diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -1,6 +1,6 @@
 <template>
   <VButton
-    class="group h-12 flex-shrink-0 gap-2"
+    class="h-12 flex-shrink-0 gap-2"
     :class="showLabel ? 'w-auto gap-2 px-3' : 'w-12'"
     variant="action-menu"
     size="disabled"

diff --git a/frontend/src/components/VCopyButton.vue b/frontend/src/components/VCopyButton.vue
@@ -1,10 +1,9 @@
 <template>
   <VButton
     :id="id"
-    type="button"
-    variant="secondary-filled"
-    size="disabled"
-    class="py-2 px-3 text-sr font-semibold"
+    variant="filled-dark"
+    size="small"
+    class="text-sr font-semibold"
     :data-clipboard-target="el"
   >
     <span v-if="!success">

diff --git a/frontend/src/components/VErrorSection/VNoResults.vue b/frontend/src/components/VErrorSection/VNoResults.vue
@@ -13,11 +13,13 @@
         :key="source.name"
         as="VLink"
         :href="source.url"
-        variant="secondary-bordered"
-        class="label-bold justify-between text-dark-charcoal md:justify-start md:gap-x-2"
+        variant="bordered-dark"
+        size="medium"
+        has-icon-end
+        class="label-bold justify-between md:justify-start"
       >
         {{ source.name }}
-        <VIcon :icon-path="externalLinkIcon" :size="4" rtl-flip />
+        <VIcon :icon-path="externalLinkIcon" :size="6" rtl-flip />
       </VButton>
     </div>
   </div>

diff --git a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -40,9 +40,10 @@
       :aria-controls="
         isMd ? 'external-sources-popover' : 'external-sources-modal'
       "
-      variant="dropdown-label"
-      size="disabled"
-      class="caption-regular min-w-max gap-1 py-1 px-3 text-dark-charcoal pe-1 ms-2 focus-visible:border-tx"
+      variant="bordered-gray"
+      size="medium"
+      class="caption-regular min-w-max ms-2"
+      has-icon-end
       @click="onTriggerClick"
       >{{ $t("external-sources.button").toString()
       }}<VIcon

diff --git a/frontend/src/components/VExternalSearch/VExternalSourceList.vue b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
@@ -18,16 +18,11 @@
       as="VLink"
       variant="plain"
       size="disabled"
-      class="caption-bold w-full justify-between px-4 py-3 text-dark-charcoal hover:bg-dark-charcoal-10"
+      class="caption-bold w-full justify-between gap-x-2 px-4 py-3 text-dark-charcoal hover:bg-dark-charcoal-10"
       :href="source.url"
     >
       {{ source.name }}
-      <VIcon
-        :icon-path="icons.externalLink"
-        :size="4"
-        :rtl-flip="true"
-        class="ms-2"
-      />
+      <VIcon :icon-path="icons.externalLink" :rtl-flip="true" />
     </VButton>
   </div>
 </template>

diff --git a/frontend/src/components/VFilters/VFilterChecklist.vue b/frontend/src/components/VFilters/VFilterChecklist.vue
@@ -32,7 +32,6 @@
             size="disabled"
             :aria-label="$t('browse-page.aria.license-explanation')"
             class="text-dark-charcoal-70"
-            type="button"
           >
             <VIcon :icon-path="icons.help" />
           </VButton>

diff --git a/frontend/src/components/VFilters/VSearchGridFilter.vue b/frontend/src/components/VFilters/VSearchGridFilter.vue
@@ -10,8 +10,9 @@
       <VButton
         v-show="isAnyFilterApplied"
         id="clear-filter-button"
-        variant="plain"
-        class="label-bold absolute py-1 px-4 text-pink end-0 hover:ring hover:ring-pink"
+        variant="transparent-gray"
+        size="medium"
+        class="label-bold !absolute text-pink end-0"
         @click="clearFilters"
       >
         {{ $t("filter-list.clear") }}
@@ -31,7 +32,7 @@
       v-if="showFilterHeader && isAnyFilterApplied"
       class="flex justify-between md:hidden"
     >
-      <VButton variant="primary" @click="$emit('close')">
+      <VButton variant="filled-pink" size="medium" @click="$emit('close')">
         {{ $t("filter-list.show") }}
       </VButton>
     </footer>

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
@@ -62,8 +62,9 @@
     >
       <VButton
         v-show="showClearFiltersButton"
-        variant="text"
+        variant="transparent-gray"
         class="!font-normal"
+        size="large"
         :disabled="isClearButtonDisabled"
         @click="clearFilters"
         >{{ $t("filter-list.clear") }}

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
@@ -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="relative text-sm font-semibold ms-auto"
     @click="$emit('click')"
   >
     <!-- Loading animation -->

diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
@@ -1,8 +1,9 @@
 <template>
   <VButton
     v-show="canLoadMore"
-    size="large-old"
-    variant="full"
+    size="disabled"
+    variant="filled-gray"
+    class="h-20 w-full"
     :disabled="isFetching"
     data-testid="load-more"
     @click="onLoadMore"

diff --git a/frontend/src/components/VModal/VModalContent.vue b/frontend/src/components/VModal/VModalContent.vue
@@ -34,8 +34,9 @@
           >
             <VButton
               ref="closeButton"
-              size="disabled"
-              variant="plain"
+              size="medium"
+              variant="transparent-gray"
+              has-icon-end
               class="text-sr md:text-base md:text-white"
               @click="hide()"
             >

diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -14,7 +14,8 @@
       </span>
       <VButton
         v-show="entries.length"
-        variant="text"
+        variant="transparent-gray"
+        size="medium"
         class="caption-bold"
         :aria-label="$t('recent-searches.clear.label').toString()"
         @click="handleClear"

diff --git a/frontend/src/pages/image/_id/index.vue b/frontend/src/pages/image/_id/index.vue
@@ -26,21 +26,18 @@
 
     <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-4 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"
+        size="large"
+        has-icon-end
+        class="mb-4 w-full flex-initial self-center md:mb-0 md:w-max"
       >
         {{ $t("image-details.weblink") }}
-        <VIcon
-          :icon-path="externalIcon"
-          :rtl-flip="true"
-          class="ms-2 md:h-6 md:w-6"
-          :size="4"
-        />
+        <VIcon :icon-path="externalIcon" :rtl-flip="true" :size="6" />
       </VButton>
       <div class="description-bold flex flex-1 flex-col justify-center">
         <h1 class="description-bold md:heading-5 line-clamp-2">

diff --git a/frontend/src/pages/image/_id/report.vue b/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="text-sr"
       >
         {{ $t("report.image-details") }}
       </VButton>

diff --git a/frontend/src/pages/sources.vue b/frontend/src/pages/sources.vue
@@ -57,13 +57,14 @@
     <p class="inline-block">
       <VButton
         as="VLink"
-        variant="primary"
-        size="disabled"
-        class="not-prose mt-5 px-6 py-4 font-semibold"
+        variant="filled-pink"
+        size="large"
+        class="not-prose mt-5 font-semibold"
+        has-icon-end
         href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
       >
         {{ $t("sources.issue-button") }}
-        <VIcon :icon-path="externalLinkIcon" :rtl-flip="true" class="mx-2" />
+        <VIcon :icon-path="externalLinkIcon" :rtl-flip="true" />
       </VButton>
     </p>