fix: icon button hover (#2291)

* Add transcribe and add circle filled icons * Update hover effect user buttons * Increase size limit
europeana · Apr 24, 2024 · 2c097a3 · 2c097a3
1 parent 59fd970
commit 2c097a3
Show file tree

Hide file tree

Showing 12 changed files with 227 additions and 102 deletions.
diff --git a/packages/portal/docs/style/FontIcons.md b/packages/portal/docs/style/FontIcons.md
@@ -34,6 +34,11 @@ Example:
           <td><code>icon-add</code></td>
           <td><span class="icon icon-add" /></td>
         </tr>
+        <tr>
+          <td>Add circle outlined</td>
+          <td><code>icon-add-circle-outlined</code></td>
+          <td><span class="icon icon-add-circle-outlined" /></td>
+        </tr>
         <tr>
           <td>Add circle</td>
           <td><code>icon-add-circle</code></td>
@@ -259,6 +264,16 @@ Example:
           <td><code>icon-temporary-tag</code></td>
           <td><span class="icon icon-temporary-tag" /></td>
         </tr>
+        <tr>
+          <td>Transcribe outlined</td>
+          <td><code>icon-transcribe-outlined</code></td>
+          <td><span class="icon icon-transcribe-outlined" /></td>
+        </tr>
+        <tr>
+          <td>Transcribe</td>
+          <td><code>icon-transcribe</code></td>
+          <td><span class="icon icon-transcribe" /></td>
+        </tr>
         <tr>
           <td>Translate</td>
           <td><code>icon-translate</code></td>

diff --git a/packages/portal/src/components/item/ItemAddButton.vue b/packages/portal/src/components/item/ItemAddButton.vue
@@ -10,7 +10,7 @@
       :title="$t('set.actions.addToGallery')"
       @click="addToSet"
     >
-      <span class="icon-add-circle" />
+      <span class="icon-add-circle-outlined" />
       {{ buttonText ? $t('actions.save') : '' }}
     </b-button>
     <template
@@ -113,3 +113,13 @@
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .add-button:hover {
+    .icon-add-circle-outlined::before {
+      content: '\e907';
+    }
+  }
+</style>
diff --git a/packages/portal/src/components/item/ItemLikeButton.vue b/packages/portal/src/components/item/ItemLikeButton.vue
@@ -121,3 +121,16 @@
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .like-button:hover {
+    .icon-heart-outlined::before {
+      content: '\e918';
+    }
+    .icon-heart::before {
+      content: '\e9da';
+    }
+  }
+</style>
diff --git a/packages/portal/src/components/item/ItemPinButton.vue b/packages/portal/src/components/item/ItemPinButton.vue
@@ -155,3 +155,16 @@
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .pin-button:hover {
+    .icon-pin-outlined::before {
+      content: '\e91e';
+    }
+    .icon-pin::before {
+      content: '\e936';
+    }
+  }
+</style>
diff --git a/packages/portal/src/components/item/ItemTranscribeButton.vue b/packages/portal/src/components/item/ItemTranscribeButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-button
-      class="transcribe-button icon-transcribe button-icon-only"
+      class="transcribe-button icon-transcribe-outlined button-icon-only"
       data-qa="transcribe button"
       :aria-label="$t('actions.transcribe')"
       @click="$bvModal.show(modalId)"
@@ -82,6 +82,10 @@
 
   &:hover {
     color: $mediumgrey;
+
+    &.icon-transcribe-outlined::before {
+      content: '\e916';
+    }
   }
 
   &::after {

diff --git a/packages/portal/src/components/user/UserCreateSetButton.vue b/packages/portal/src/components/user/UserCreateSetButton.vue
@@ -6,7 +6,7 @@
     @click="clickCreateSet"
   >
     <div class="card-inner d-flex justify-content-center align-items-center">
-      <span class="icon-add-circle" />
+      <span class="icon-add-circle-outlined" />
       <b-card-body data-qa="card body">
         <b-card-title title-tag="div">
           {{ $t('set.actions.createNew') }}
@@ -65,6 +65,16 @@
   };
 </script>
 
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .create-card:hover {
+    .icon-add-circle-outlined::before {
+      content: '\e907';
+    }
+  }
+</style>
+
 <docs lang="md">
   ```jsx
   <UserCreateSetButton />

diff --git a/packages/portal/tests/size/.size-limit.json b/packages/portal/tests/size/.size-limit.json
@@ -19,7 +19,7 @@
   {
     "name": "portal.js server",
     "running": false,
-    "limit": "1000 KB",
+    "limit": "1005 KB",
     "path": [
       ".nuxt/dist/server/*.js"
     ]