Added back fontawesome icons

src/main.ts

@@ -10,9 +10,40 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faChevronLeft,
   faHouseChimney,
+  faMagnifyingGlass,
+  faFolderOpen,
+  faHand,
+  faCircleUser,
+  faCopy,
+  faShareNodes,
+  faQrcode,
+  faUser,
+  faPen,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck,
 } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faChevronLeft, faHouseChimney);
+library.add(
+  faChevronLeft,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faFolderOpen,
+  faHand,
+  faCircleUser,
+  faCopy,
+  faShareNodes,
+  faQrcode,
+  faUser,
+  faPen,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck
+);
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 

src/views/AccountViewView.vue

@@ -5,31 +5,31 @@
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-house-chimney fa-fw"></i
+          ><fa icon="house-chimney" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Search -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="search.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-magnifying-glass fa-fw"></i
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Projects -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-folder-open fa-fw"></i
+          ><fa icon="folder-open" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-hand fa-fw rotate-45"></i
+          ><fa icon="hand" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md bg-slate-400 text-white">
         <a href="account-view.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-circle-user fa-fw"></i
+          ><fa icon="circle-user" class="fa-fw"></fa
         ></a>
       </li>
     </ul>
@@ -68,18 +68,18 @@
       >
         <span
           ><code>did:peer:kl45kj41lk451kl3</code>
-          <i class="fa-solid fa-copy text-slate-400 fa-fw"></i
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
         ></span>
         <span>
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
           >
-            <i class="fa-solid fa-share-nodes fa-fw"></i>
+            <fa icon="share-nodes" class="fa-fw"></fa>
           </button>
           <button
-            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
+            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md ml-1"
           >
-            <i class="fa-solid fa-qrcode fa-fw"></i>
+            <fa icon="qrcode" class="fa-fw"></fa>
           </button>
         </span>
       </div>
@@ -88,7 +88,7 @@
       <div class="text-sm text-slate-500 mb-1">
         <span
           ><code>dyIgKepL19trfrFu5jzkoNhI</code>
-          <i class="fa-solid fa-copy text-slate-400 fa-fw"></i
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
         ></span>
       </div>
 
@@ -96,7 +96,7 @@
       <div class="text-sm text-slate-500 mb-1">
         <span
           ><code>m/44'/0'/0'/0/0</code>
-          <i class="fa-solid fa-copy text-slate-400 fa-fw"></i
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
         ></span>
       </div>
     </div>

src/views/ConfirmContactView.vue

@@ -8,7 +8,7 @@
         <a
           href="account-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa
         ></a>
 
         Confirm Contact

src/views/ContactScanView.vue

@@ -7,7 +7,7 @@
         <a
           href="account-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left"></fa
+          ><fa icon="chevron-left" class="fa-fw"></fa
         ></a>
 
         Scan Contact

src/views/DiscoverView.vue

@@ -1,34 +1,35 @@
 <template>
+  <!-- QUICK NAV -->
   <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><fa icon="chevron-left"></fa
+          ><fa icon="house-chimney" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Search -->
       <li class="basis-1/5 rounded-md bg-slate-400 text-white">
         <a href="search.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-magnifying-glass fa-fw"></i
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Projects -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-folder-open fa-fw"></i
+          ><fa icon="folder-open" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-hand fa-fw rotate-45"></i
+          ><fa icon="hand" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="account-view.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-circle-user fa-fw"></i
+          ><fa icon="circle-user" class="fa-fw"></fa
         ></a>
       </li>
     </ul>
@@ -51,7 +52,7 @@
       <button
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
-        <i class="fa-solid fa-magnifying-glass fa-fw"></i>
+        <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
     </form>
 
@@ -99,7 +100,7 @@
           <div class="grow">
             <h2 class="text-base font-semibold">Canyon cleanup</h2>
             <div class="text-sm">
-              <i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Rotary
             </div>
           </div>
         </a>
@@ -117,7 +118,7 @@
           <div class="grow">
             <h2 class="text-base font-semibold">Potluck with neighbors</h2>
             <div class="text-sm">
-              <i class="fa-solid fa-user fa-fw text-slate-400"></i> Andrew A.
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A.
             </div>
           </div>
         </a>
@@ -135,7 +136,7 @@
           <div class="grow">
             <h2 class="text-base font-semibold">Historical site</h2>
             <div class="text-sm">
-              <i class="fa-solid fa-user fa-fw text-slate-400"></i>
+              <fa icon="user" class="fa-fw text-slate-400 mr-1"></fa>
               <em>Unknown</em>
             </div>
           </div>

src/views/NewEditAccountView.vue

@@ -7,7 +7,7 @@
         <a
           href="account-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left"></fa>
+          ><fa icon="chevron-left" class="fa-fw"></fa>
         </a>
         [New/Edit] Identity
       </h1>

src/views/NewEditCommitmentView.vue

@@ -8,7 +8,7 @@
         <a
           href="project-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left"></fa>
+          ><fa icon="chevron-left" class="fa-fw"></fa>
         </a>
 
         Make Commitment

src/views/NewEditProjectView.vue

@@ -8,7 +8,7 @@
         <a
           href="project-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left"></fa>
+          ><fa icon="chevron-left" class="fa-fw"></fa>
         </a>
 
         [New/Edit] Project
@@ -25,12 +25,12 @@
           <button
             class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
           >
-            <i class="fa-solid fa-pen fa-fw"></i>
+            <fa icon="pen" class="fa-fw"></fa>
           </button>
           <button
             class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"
           >
-            <i class="fa-solid fa-trash-can fa-fw"></i>
+            <fa icon="trash-can" class="fa-fw"></fa>
           </button>
         </div>
         <img src="https://picsum.photos/800/400" class="w-full" />

src/views/ProjectViewView.vue

@@ -5,31 +5,31 @@
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><fa icon="house-chimney"></fa
+          ><fa icon="house-chimney" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Search -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="search.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-magnifying-glass fa-fw"></i
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Projects -->
       <li class="basis-1/5 rounded-md bg-slate-400 text-white">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-folder-open fa-fw"></i
+          ><fa icon="folder-open" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-hand fa-fw rotate-45"></i
+          ><fa icon="hand" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="account-view.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-circle-user fa-fw"></i
+          ><fa icon="circle-user" class="fa-fw"></fa
         ></a>
       </li>
     </ul>
@@ -42,13 +42,13 @@
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa
         ></a>
         <!-- Context Menu -->
         <a
           href=""
           class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
-          ><i class="fa-solid fa-ellipsis-vertical fa-fw"></i
+          ><fa icon="ellipsis-vertical" class="fa-fw"></fa
         ></a>
 
         View Project
@@ -65,11 +65,9 @@
       <div>
         <h2 class="text-xl font-semibold">Canyon cleanup</h2>
         <div class="flex justify-between gap-4 text-sm mb-3">
+          <span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
           <span
-            ><i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary</span
-          >
-          <span
-            ><i class="fa-solid fa-calendar fa-fw text-slate-400"></i> 8 days
+            ><fa icon="calendar" class="fa-fw text-slate-400"></fa> 8 days
             ago</span
           >
         </div>
@@ -99,22 +97,21 @@
         <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
           <span>[Username]</span>
           <span
-            >5 hours <i class="fa-solid fa-spinner fa-fw text-slate-400"></i
+            >5 hours <fa icon="spinner" class="fa-fw text-slate-400"></fa
           ></span>
         </li>
 
         <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
           <span>[Username]</span>
           <span
-            >US$ 20.00
-            <i class="fa-solid fa-circle-check fa-fw text-lime-500"></i
+            >US$ 20.00 <fa icon="circle-check" class="fa-fw text-lime-500"></fa
           ></span>
         </li>
 
         <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
           <span>[Username]</span>
           <span
-            >0.1 BTC <i class="fa-solid fa-spinner fa-fw text-slate-400"></i
+            >0.1 BTC <fa icon="spinner" class="fa-fw text-slate-400"></fa
           ></span>
         </li>
       </ul>