Update close buttons (#3225)

* Replace close button

* Replace close button in other components

* Update content report snapshots

* Add requested changes

* Update snapshots

* Update snapshots

Author: obulat

frontend/src/components/VBanner/VNotificationBanner.vue

@@ -13,12 +13,16 @@
     </p>
 
     <slot name="end">
-      <VCloseButton
-        :variant="variant === 'dark' ? 'black' : 'transparent-gray'"
-        size="close"
-        icon-size="small"
+      <VIconButton
+        :variant="variant === 'dark' ? 'transparent-tx' : 'transparent-gray'"
+        :icon-props="{ name: 'close-small' }"
+        size="small"
         :label="closeButtonLabel || $t('modal.closeBanner')"
-        @close="$emit('close')"
+        :class="{
+          'focus-slim-tx-yellow hover:bg-white hover:bg-opacity-10':
+            variant === 'dark',
+        }"
+        @click="$emit('close')"
       />
     </slot>
   </section>
@@ -32,7 +36,7 @@ import { defineEvent } from "~/types/emits"
 import type { BannerId } from "~/types/banners"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
-import VCloseButton from "~/components/VCloseButton.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 import type { TranslateResult } from "vue-i18n"
 
@@ -43,8 +47,8 @@ import type { TranslateResult } from "vue-i18n"
 export default defineComponent({
   name: "VNotificationBanner",
   components: {
+    VIconButton,
     VIcon,
-    VCloseButton,
   },
   props: {
     /**

frontend/src/components/VContentReport/VContentReportPopover.vue

@@ -11,10 +11,13 @@
     </template>
     <template #default="{ close }">
       <div class="grid w-80 items-stretch justify-stretch">
-        <VCloseButton
+        <VIconButton
           :label="$t('modal.close')"
-          class="z-10 col-start-1 row-start-1 self-start justify-self-end"
-          @close="close"
+          :icon-props="{ name: 'close' }"
+          variant="transparent-gray"
+          size="small"
+          class="z-10 col-start-1 row-start-1 me-1 mt-1 self-start justify-self-end"
+          @click="close"
         />
         <VContentReportForm
           class="col-start-1 row-start-1 p-6"
@@ -32,15 +35,15 @@ import { defineComponent, PropType } from "vue"
 
 import type { AudioDetail, ImageDetail } from "~/types/media"
 
-import VCloseButton from "~/components/VCloseButton.vue"
 import VContentReportButton from "~/components/VContentReport/VContentReportButton.vue"
 import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
 import VPopover from "~/components/VPopover/VPopover.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 export default defineComponent({
   name: "VContentReportPopover",
   components: {
-    VCloseButton,
+    VIconButton,
     VContentReportButton,
     VContentReportForm,
     VPopover,

frontend/src/components/VFilters/VFilterChecklist.vue

@@ -39,10 +39,13 @@
         </template>
         <template #default="{ close }">
           <div class="relative">
-            <VCloseButton
+            <VIconButton
               :label="getLicenseExplanationCloseAria(item.code)"
-              class="!absolute end-0 top-0"
-              @close="close"
+              :icon-props="{ name: 'close' }"
+              variant="transparent-gray"
+              size="small"
+              class="!absolute end-1 top-1"
+              @click="close"
             />
             <VLicenseExplanation :license="item.code" />
           </div>
@@ -67,8 +70,8 @@ import { getElements } from "~/utils/license"
 
 import VButton from "~/components/VButton.vue"
 import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
-import VCloseButton from "~/components/VCloseButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 import VLicense from "~/components/VLicense/VLicense.vue"
 import VLicenseExplanation from "~/components/VFilters/VLicenseExplanation.vue"
 import VPopover from "~/components/VPopover/VPopover.vue"
@@ -81,7 +84,7 @@ type toggleFilterPayload = {
 export default defineComponent({
   name: "VFilterCheckList",
   components: {
-    VCloseButton,
+    VIconButton,
     VCheckbox,
     VButton,
     VIcon,

frontend/src/components/VHeader/VHeaderInternal.vue

@@ -53,11 +53,13 @@
           <template #top-bar>
             <div class="flex h-20 w-full justify-between px-2 py-4">
               <VHomeLink variant="light" />
-              <VCloseButton
-                variant="black"
-                icon-size="medium"
+              <VIconButton
+                variant="transparent-tx"
+                size="large"
+                :icon-props="{ name: 'close' }"
+                class="text-white focus-slim-tx-yellow hover:bg-white hover:bg-opacity-10"
                 :label="$t('modal.closePagesMenu')"
-                @close="closePageMenu"
+                @click="closePageMenu"
               />
             </div>
           </template>
@@ -92,7 +94,6 @@ import usePages from "~/composables/use-pages"
 
 import { useUiStore } from "~/stores/ui"
 
-import VCloseButton from "~/components/VCloseButton.vue"
 import VHomeLink from "~/components/VHeader/VHomeLink.vue"
 import VPageLinks from "~/components/VHeader/VPageLinks.vue"
 import VModalContent from "~/components/VModal/VModalContent.vue"
@@ -104,7 +105,6 @@ export default defineComponent({
   name: "VHeaderInternal",
   components: {
     VIconButton,
-    VCloseButton,
     VModalContent,
     VPopoverContent,
     VHomeLink,

frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -35,11 +35,13 @@
           v-if="showFilters"
           :applied-filter-count="appliedFilterCount"
         />
-        <VCloseButton
+        <VIconButton
           :label="$t('modal.closeContentSettings')"
-          variant="filled-white"
+          :icon-props="{ name: 'close' }"
+          variant="transparent-gray"
+          size="large"
           class="ms-auto self-center"
-          @close="close"
+          @click="close"
         />
       </template>
       <VTabPanel id="content-settings">
@@ -84,8 +86,6 @@ import { useSearchStore } from "~/stores/search"
 import useSearchType from "~/composables/use-search-type"
 
 import VButton from "~/components/VButton.vue"
-import VCloseButton from "~/components/VCloseButton.vue"
-
 import VFilterTab from "~/components/VHeader/VHeaderMobile/VFilterTab.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VModalContent from "~/components/VModal/VModalContent.vue"
@@ -96,14 +96,15 @@ import VTab from "~/components/VTabs/VTab.vue"
 import VTabPanel from "~/components/VTabs/VTabPanel.vue"
 import VTabs from "~/components/VTabs/VTabs.vue"
 import VSafeBrowsing from "~/components/VSafeBrowsing/VSafeBrowsing.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 type ContentSettingsTab = "content-settings" | "filters"
 
 export default defineComponent({
   name: "VContentSettingsModalContent",
   components: {
+    VIconButton,
     VSafeBrowsing,
-    VCloseButton,
     VIcon,
     VModalContent,
     VButton,

frontend/src/components/VModal/VModalContent.vue

@@ -34,11 +34,12 @@
             class="flex w-full shrink-0 justify-between py-4 pe-3 ps-4 md:justify-end md:bg-tx md:px-0 md:py-3"
             :class="[$style[`top-bar-${variant}`], $style[`top-bar-${mode}`]]"
           >
-            <VCloseButton
+            <VIconButton
               ref="closeButton"
               :label="$t('modal.ariaClose')"
               variant="filled-white"
-              @close="hide()"
+              size="small"
+              @click="hide()"
             />
           </div>
         </slot>
@@ -66,14 +67,14 @@ import { useDialogContent } from "~/composables/use-dialog-content"
 
 import type { ModalColorMode, ModalVariant } from "~/types/modal"
 
-import VCloseButton from "~/components/VCloseButton.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 /**
  * Renders the inner content of a modal and manages focus.
  */
 export default defineComponent({
   name: "VModalContent",
-  components: { VCloseButton, VTeleport },
+  components: { VIconButton, VTeleport },
   inheritAttrs: false,
   props: {
     visible: {