chore: replace fontawesome icons by lucide icons (#2183)

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
Co-authored-by: Eric Le Ponner <eric.leponner@icloud.com>

Author: svienot

src/components/AxiosStatus.vue

@@ -31,7 +31,7 @@
         @click="showErrorDialog = true"
     />
   </template>
-  <ModalDialog v-model:show-dialog="showErrorDialog" iconClass="fa fa-2x fa-exclamation-triangle has-text-danger">
+  <ModalDialog v-model:show-dialog="showErrorDialog">
     <template #modalDialogContent>
       <TaskPanel :mode="TaskPanelMode.error">
         <template #taskPanelMessage>{{ explanation }}</template>

src/components/allowances/HbarAllowanceTable.vue

@@ -41,7 +41,11 @@
     </o-table-column>
 
     <o-table-column v-if="isWalletConnected" v-slot="props" position="right">
-      <i class="fa fa-pen" @click="emit('editAllowance', props.row)"/>
+      <Pencil
+          class="icon-in-table"
+          :size="16"
+          @click="emit('editAllowance', props.row)"
+      />
     </o-table-column>
 
     <template v-slot:bottom-left>
@@ -77,6 +81,7 @@ import AccountLink from "@/components/values/link/AccountLink.vue";
 import HbarAmount from "@/components/values/HbarAmount.vue";
 import TablePageSize from "@/components/transaction/TablePageSize.vue";
 import {walletManager} from "@/utils/RouteManager.ts";
+import {Pencil} from "lucide-vue-next";
 
 const emit = defineEmits(["editAllowance"])
 

src/components/allowances/NftAllSerialsAllowanceTable.vue

@@ -37,7 +37,12 @@
     </o-table-column>
 
     <o-table-column v-if="isWalletConnected" v-slot="props" field="action" position="right">
-      <i v-if="props.row.isEditable" class="far fa-trash-alt" @click="emit('deleteAllowance', props.row)"/>
+      <Trash2
+          v-if="props.row.isEditable"
+          class="icon-in-table"
+          :size="16"
+          @click="emit('deleteAllowance', props.row)"
+      />
       <InfoTooltip
           v-else
           label="The allowance cannot be modified because the NFT collection is no longer associated with this account."
@@ -81,6 +86,7 @@ import {NftAllSerialsAllowanceTableController} from "@/components/allowances/Nft
 import {isValidAssociation} from "@/schemas/MirrorNodeUtils.ts";
 import TablePageSize from "@/components/transaction/TablePageSize.vue";
 import {walletManager} from "@/utils/RouteManager.ts";
+import {Trash2} from 'lucide-vue-next';
 
 interface DisplayedNftAllowance extends NftAllowance {
   isEditable: boolean

src/components/allowances/NftAllowanceTable.vue

@@ -43,7 +43,11 @@
     </o-table-column>
 
     <o-table-column v-if="isWalletConnected" v-slot="props" field="action" position="right">
-      <i class="far fa-trash-alt" @click="emit('deleteAllowance', props.row)"/>
+      <Trash2
+          class="icon-in-table"
+          :size="16"
+          @click="emit('deleteAllowance', props.row)"
+      />
     </o-table-column>
 
     <template v-slot:bottom-left>
@@ -80,6 +84,7 @@ import TokenLink from "@/components/values/link/TokenLink.vue";
 import {NftAllowanceTableController} from "@/components/allowances/NftAllowanceTableController";
 import TablePageSize from "@/components/transaction/TablePageSize.vue";
 import {walletManager} from "@/utils/RouteManager.ts";
+import {Trash2} from 'lucide-vue-next';
 
 const emit = defineEmits(["deleteAllowance"])
 

src/components/allowances/TokenAllowanceTable.vue

@@ -45,9 +45,15 @@
     </o-table-column>
 
     <o-table-column v-if="isWalletConnected" v-slot="props" field="edit-icon" position="right">
-      <i v-if="props.row.isEditable" class="fa fa-pen" @click="emit('editAllowance', props.row)"/>
+      <Pencil
+          v-if="props.row.isEditable"
+          class="icon-in-table"
+          :size="16"
+          @click="emit('editAllowance', props.row)"
+      />
       <InfoTooltip
           v-else
+          class="icon-in-table"
           label="The allowance cannot be modified because the token is no longer associated with this account."
       />
     </o-table-column>
@@ -90,6 +96,7 @@ import TokenLink from "@/components/values/link/TokenLink.vue";
 import InfoTooltip from "@/components/InfoTooltip.vue";
 import TablePageSize from "@/components/transaction/TablePageSize.vue";
 import {walletManager} from "@/utils/RouteManager.ts";
+import {Pencil} from 'lucide-vue-next';
 
 interface DisplayedTokenAllowance extends TokenAllowance {
   isEditable: boolean

src/components/page/header/wallet/WalletStatusButton.vue

@@ -20,8 +20,8 @@
           {{ accountId !== null ? accountId : "No account" }}
         </div>
         <div class="right">
-          <i v-if="!showWalletOptions" class="fas fa-solid fa-angle-down"/>
-          <i v-else class="fas fa-solid fa-angle-up"/>
+          <ChevronDown v-if="!showWalletOptions" :size="18"/>
+          <ChevronUp v-else :size="18" />
         </div>
       </ButtonView>
     </template>
@@ -42,6 +42,7 @@ import {ref} from "vue";
 import DropdownPanel from "@/components/DropdownPanel.vue";
 import ButtonView from "@/elements/ButtonView.vue";
 import {ButtonSize} from "@/dialogs/core/DialogUtils.ts";
+import {ChevronDown, ChevronUp} from "lucide-vue-next"
 import WalletOptions from "@/components/page/header/wallet/WalletOptions.vue";
 import {walletManager} from "@/utils/RouteManager.ts";
 

src/components/token/NftFile.vue

@@ -7,18 +7,18 @@
 <template>
 
   <MediaContent
-      :url="url"
-      :type="type"
-      :size="size"
+      :url="props.url"
+      :type="props.type"
+      :size="props.size"
       :auto="false"
-      :no-anchor="noAnchor"
+      :no-anchor="props.noAnchor"
   >
     <template #placeHolder>
-      <div class="icon mt-4" style="font-size: 50px">
-        <i class="fas fa-file"></i>
-      </div>
-      <div class="place-holder-text">
-        {{ type }}
+      <div class="place-holder-content">
+        <File :size="50"/>
+        <div class="place-holder-text">
+          {{ props.type }}
+        </div>
       </div>
     </template>
   </MediaContent>
@@ -29,32 +29,28 @@
 <!--                                                      SCRIPT                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {defineComponent, PropType} from "vue";
+import {PropType} from "vue";
+import {File} from "lucide-vue-next";
 import MediaContent from "@/components/MediaContent.vue";
 
-export default defineComponent({
-  name: "NftFile",
-  components: {MediaContent},
-
-  props: {
-    url: {
-      type: String as PropType<string | null>,
-      default: null
-    },
-    type: {
-      type: String as PropType<string | null>,
-      default: null
-    },
-    size: {
-      type: Number,
-      default: 50
-    },
-    noAnchor: {
-      type: Boolean,
-      default: false
-    },
+const props = defineProps({
+  url: {
+    type: String as PropType<string | null>,
+    default: null
+  },
+  type: {
+    type: String as PropType<string | null>,
+    default: null
+  },
+  size: {
+    type: Number,
+    default: 50
+  },
+  noAnchor: {
+    type: Boolean,
+    default: false
   },
 })
 
@@ -66,6 +62,12 @@ export default defineComponent({
 
 <style scoped>
 
+div.place-holder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 div.place-holder-text {
   font-size: 10px;
   margin-top: 1.5rem;

src/components/transaction/NftTransactionSummary.vue

@@ -6,21 +6,25 @@
 
 <template>
   <template v-if="transaction">
-    <NftDetailsTransferGraph v-if="shouldGraph" :transaction="transactionDetail"/>
-    <div v-else-if="isTokenAssociation">
+
+    <NftDetailsTransferGraph
+        v-if="shouldGraph"
+        :transaction="transactionDetail"
+    />
+
+    <div v-else-if="isTokenAssociation" class="h-should-wrap tx-summary">
       {{ transaction?.sender_account_id }}
-      <span v-if="tokens.length">
-                <i class="fas fa-link mr-1 h-is-low-contrast"></i>
-                <TokenExtra :token-id="tokens[0]"/>
-                <span
-                    v-if="additionalTokensNumber"
-                    class="h-is-smaller h-is-extra-text h-should-wrap"
-                >
-                    {{ " ( + " + additionalTokensNumber + " more )" }}
-                </span>
-            </span>
+      <template v-if="tokens.length">
+        <Link :size="16" :stroke-width="2.5" class="h-is-low-contrast"/>
+        <TokenExtra :token-id="tokens[0]"/>
+        <span v-if="additionalTokensNumber" class="h-is-smaller h-is-extra-text h-should-wrap">
+          {{ ' (+' + additionalTokensNumber + ' more)' }}
+        </span>
+      </template>
     </div>
+
     <div v-else/>
+
   </template>
   <div v-else/>
 </template>
@@ -35,6 +39,7 @@ import {NftTransactionTransfer, TransactionType,} from "@/schemas/MirrorNodeSche
 import TokenExtra from "@/components/values/link/TokenExtra.vue"
 import {NftTransactionAnalyzer} from "./NftTransactionAnalyzer"
 import NftDetailsTransferGraph from "@/components/transfer_graphs/NftDetailsTransferGraph.vue";
+import {Link} from "lucide-vue-next"
 
 const GRAPH_TRANSACTION_TYPES = [
   TransactionType.CRYPTOTRANSFER,

src/components/transaction/TransactionSummary.vue

@@ -13,15 +13,15 @@
         :compact="true"
     />
 
-    <div v-else-if="isTokenAssociation" class="h-should-wrap">
+    <div v-else-if="isTokenAssociation" class="h-should-wrap tx-summary">
       <EntityIOL :entity-id="entityId"/>
-      <span v-if="tokens.length">
-        <i class="fas fa-link mr-1 h-is-low-contrast"></i>
+      <template v-if="tokens.length">
+        <Link :size="16" :stroke-width="2.5" class="h-is-low-contrast"/>
         <TokenExtra :token-id="tokens[0]"/>
         <span v-if="additionalTokensNumber" class="h-is-smaller h-is-extra-text h-should-wrap">
-          {{ ' ( + ' + additionalTokensNumber + ' more )' }}
+          {{ ' (+' + additionalTokensNumber + ' more)' }}
         </span>
-      </span>
+      </template>
     </div>
 
     <div v-else-if="displayMemo" class="h-should-wrap">
@@ -50,6 +50,7 @@ import TransferGraphSection from "@/components/transfer_graphs/TransferGraphSect
 import {TransactionAnalyzer} from "@/components/transaction/TransactionAnalyzer";
 import TokenExtra from "@/components/values/link/TokenExtra.vue";
 import EntityIOL from "@/components/values/link/EntityIOL.vue";
+import {Link} from "lucide-vue-next";
 
 const GRAPH_TRANSACTION_TYPES = [
   TransactionType.CRYPTOTRANSFER,

src/components/values/FunctionError.vue

@@ -41,7 +41,7 @@
         <template v-else>
           <HexaDumpValue :byte-string="error" :show-none="true"/>
           <div v-if="errorDecodingStatus" class="h-is-extra-text">
-            <span class="icon fas fa-exclamation-circle h-is-low-contrast is-small mt-1 mr-1"/>
+            <CircleAlert class="h-is-low-contrast mr-1" :size="16" style="vertical-align: text-top"/>
             <span>{{ errorDecodingStatus }}</span>
           </div>
         </template>
@@ -58,6 +58,7 @@
 <script setup lang="ts">
 
 import {computed, PropType} from 'vue';
+import {CircleAlert} from "lucide-vue-next";
 import HexaDumpValue from "@/components/values/HexaDumpValue.vue";
 import {FunctionCallAnalyzer} from "@/utils/analyzer/FunctionCallAnalyzer";
 import Property from "@/components/Property.vue";