change icons to font-awesome

src/views/ProjectViewView.vue

@@ -372,7 +372,7 @@
           <!-- Totals section -->
           <div class="mt-1 flex items-center min-h-[1.5rem]">
             <div v-if="loadingTotals" class="flex-1">
-              <fa icon="spinner" class="fa-spin-pulse text-blue-500" />
+              <font-awesome icon="spinner" class="fa-spin-pulse text-blue-500" />
             </div>
             <div v-else-if="givesTotalsByUnit.length > 0" class="flex-1">
               <span class="font-semibold mr-2 shrink-0">Totals</span>
@@ -391,7 +391,7 @@
                   </span>
                   <span v-if="givesTotalsByUnit.length > 1">...</span>
                   <span>
-                    <fa
+                    <font-awesome
                       :icon="totalsExpanded ? 'chevron-up' : 'chevron-right'"
                       class="fa-fw text-xs ml-1"
                     />
@@ -404,7 +404,7 @@
                     :key="total.unit"
                     class="ml-2"
                   >
-                    <fa
+                    <font-awesome
                       :icon="libsUtil.iconForUnitCode(total.unit)"
                       class="fa-fw text-slate-400 mr-1"
                     />
@@ -431,7 +431,7 @@
             >
               <div class="flex justify-between gap-4">
                 <span>
-                  <fa icon="user" class="fa-fw text-slate-400" />
+                  <font-awesome icon="user" class="fa-fw text-slate-400" />
                   {{
                     serverUtil.didInfo(
                       give.agentDid,
@@ -442,23 +442,23 @@
                   }}
                 </span>
                 <span v-if="give.amount" class="whitespace-nowrap">
-                  <fa
+                  <font-awesome
                     :icon="libsUtil.iconForUnitCode(give.unit)"
                     class="fa-fw text-slate-400"
                   />{{ give.amount }}
                 </span>
               </div>
               <div class="text-slate-500">
-                <fa icon="calendar" class="fa-fw text-slate-400" />
+                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                 {{ give.issuedAt?.substring(0, 10) }}
-              </div>
+              </div> 
               <div v-if="give.description" class="text-slate-500">
-                <fa icon="comment" class="fa-fw text-slate-400" />
+                <font-awesome icon="comment" class="fa-fw text-slate-400" />
                 {{ give.description }}
               </div>
               <div class="flex justify-between">
                 <a @click="onClickLoadClaim(give.jwtId)">
-                  <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                  <font-awesome icon="file-lines" class="text-blue-500 cursor-pointer" />
                 </a>
 
                 <a
@@ -468,16 +468,16 @@
                   "
                   @click="deepCheckConfirmable(give)"
                 >
-                  <fa
+                  <font-awesome
                     icon="circle-check"
                     class="text-blue-500 cursor-pointer"
                   />
                 </a>
                 <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
-                  <fa icon="spinner" class="fa-spin-pulse" />
+                  <font-awesome icon="spinner" class="fa-spin-pulse" />
                 </a>
                 <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                  <fa
+                  <font-awesome
                     icon="circle-check"
                     class="text-slate-500 cursor-pointer"
                   />