UI: wording and spacing consistencies

- Added grouped conditional spacing to ensure a top margin before fulfills links
- Brought over icons and wording from ConfirmGiftView to ClaimView

src/views/ClaimView.vue

@@ -106,9 +106,9 @@
             </div>
 
             <!-- Fullfills Links -->
-
+            <div class="mt-4 empty:hidden">
               <!-- fullfills links for a give -->
-            <div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4">
+              <div v-if="detailsForGive?.fulfillsPlanHandleId">
                 <router-link
                   :to="
                     '/project/' +
@@ -116,9 +116,14 @@
                   "
                   class="text-blue-500 mt-2"
                 >
-                Fulfills a bigger plan...
+                  This fulfills a bigger plan
+                  <font-awesome
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw"
+                  />
                 </router-link>
               </div>
+
               <!-- Show offer fulfillment if this give fulfills an offer -->
               <div v-if="offerFulfillment?.offerHandleId">
                 <!-- router-link to /claim/ only changes URL path -->
@@ -126,12 +131,16 @@
                   class="text-blue-500 mt-4 cursor-pointer"
                   @click="showDifferentClaimPage(offerFulfillment.offerHandleId)"
                 >
-                Fulfills
+                  This fulfills
                   {{
-                  capitalizeAndInsertSpacesBeforeCaps(
+                    capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
                       offerFulfillment.offerType || "Offer",
                     )
-                }}...
+                  }}
+                  <font-awesome
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw"
+                  />
                 </a>
               </div>
 
@@ -144,12 +153,16 @@
                   "
                   class="text-blue-500 mt-4"
                 >
-                Offered to a bigger plan...
+                  Offered to a bigger plan
+                  <font-awesome
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw"
+                  />
                 </router-link>
               </div>
 
               <!-- Providers -->
-            <div v-if="providersForGive?.length > 0" class="mt-4">
+              <div v-if="providersForGive?.length > 0">
                 <span>Other assistance provided by:</span>
                 <ul class="ml-4">
                   <li
@@ -163,7 +176,11 @@
                           class="text-blue-500 mt-4 cursor-pointer"
                           @click="handleProviderClick(provider)"
                         >
-                        an activity...
+                          an activity
+                          <font-awesome
+                            icon="arrow-up-right-from-square"
+                            class="fa-fw"
+                          />
                         </a>
                       </div>
                     </div>
@@ -174,6 +191,7 @@
           </div>
         </div>
       </div>
+    </div>
     <div class="mt-2">
       <font-awesome icon="comment" class="text-slate-400" />
       {{ issuerName }} posted that.
@@ -789,6 +807,27 @@ export default class ClaimView extends Vue {
     this.canShare = !!navigator.share;
   }
 
+  /**
+   * Formats type string for display by adding spaces before capitals
+   * Optionally adds a prefix
+   *
+   * @param text - Text to format
+   * @param prefix - Optional prefix to add
+   * @returns Formatted string
+   */
+   capitalizeAndInsertSpacesBeforeCapsWithAPrefix(text: string): string {
+    const word = this.capitalizeAndInsertSpacesBeforeCaps(text);
+    if (word) {
+      // if the word starts with a vowel, use "an" instead of "a"
+      const firstLetter = word[0].toLowerCase();
+      const vowels = ["a", "e", "i", "o", "u"];
+      const particle = vowels.includes(firstLetter) ? "an" : "a";
+      return particle + " " + word;
+    } else {
+      return "";
+    }
+  }
+
   // insert a space before any capital letters except the initial letter
   // (and capitalize initial letter, just in case)
   capitalizeAndInsertSpacesBeforeCaps(text: string): string {

src/views/ConfirmGiftView.vue

@@ -96,9 +96,9 @@
               </div>
 
               <!-- Fullfills Links -->
-
+              <div class="mt-4">
                 <!-- fullfills links for a give -->
-              <div v-if="giveDetails?.fulfillsPlanHandleId" class="mt-2">
+                <div v-if="giveDetails?.fulfillsPlanHandleId">
                   <router-link
                     :to="
                       '/project/' +
@@ -113,6 +113,7 @@
                     />
                   </router-link>
                 </div>
+                
                 <!-- Show offer fulfillment if this give fulfills an offer -->
                 <div v-if="offerFulfillment?.offerHandleId">
                   <!-- router-link to /claim/ only changes URL path -->
@@ -139,6 +140,7 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="mt-2">
         <font-awesome icon="comment" class="text-slate-400" />
         {{ issuerName }} posted that.