feat: enable text inside iconButton

teritorio · Nov 3, 2023 · 2719dd2 · 2719dd2
1 parent 20e09d0
commit 2719dd2
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/components/MainMap/FavoriteNoteBook.vue b/components/MainMap/FavoriteNoteBook.vue
@@ -18,10 +18,11 @@
         <IconsBar class="tw-mr-6">
           <IconButton
             :label="$t('favorites.menu_share')"
-            class="tw-w-8 tw-h-8"
+            class="tw-h-8"
             @click="setShareLink()"
           >
             <FontAwesomeIcon icon="share-alt" />
+            <p class="tw-text-sm">{{ $t('favorites.notebook.share') }}</p>
           </IconButton>
           <IconButton
             :label="$t('favorites.export_pdf')"

diff --git a/components/UI/IconButton.vue b/components/UI/IconButton.vue
@@ -3,7 +3,7 @@
     v-if="!href"
     :aria-label="label"
     type="button"
-    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center"
+    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center tw-flex tw-px-2.5 tw-gap-2"
   >
     <slot></slot>
   </button>
@@ -12,7 +12,7 @@
     :aria-label="label"
     :to="href"
     :target="target"
-    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center"
+    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center tw-flex tw-px-2.5 tw-gap-2"
   >
     <slot></slot>
   </NuxtLink>
@@ -21,7 +21,7 @@
     :aria-label="label"
     :href="href"
     :target="target"
-    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center"
+    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center tw-flex tw-px-2.5 tw-gap-2"
   >
     <slot></slot>
   </a>

diff --git a/locales/en.js b/locales/en.js
@@ -26,6 +26,7 @@ export default {
     share_link: 'Share link of favorites',
     notebook: {
       title: 'Favorites notebook',
+      share: 'Share',
     },
     noFavs:
       'You do not have any favorite places yet. You can do this by selecting a location on the map, then saving it as a favorite.',

diff --git a/locales/es.js b/locales/es.js
@@ -26,6 +26,7 @@ export default {
     share_link: 'Compartir enlace de favoritos',
     notebook: {
       title: 'Cuaderno de favoritos',
+      share: 'Partager',
     },
     noFavs:
       'Todavía no tienes ningún lugar marcado. Puedes hacerlo seleccionando un lugar en el mapa y guardándolo como favorito',

diff --git a/locales/fr.js b/locales/fr.js
@@ -27,6 +27,7 @@ export default {
     share_link: 'Partager le lien des favoris',
     notebook: {
       title: 'Carnet des favoris',
+      share: 'Partager',
     },
     noFavs:
       "Vous n'avez pas encore de lieux en favoris. Vous pouvez le faire en sélectionnant un lieu sur la carte, puis en le mémorisant comme favori.",