Various aesthetic improvements and optimizations

src/components/GiftedDialog.vue

@@ -33,12 +33,12 @@
                   : selectProject(project)
               "
             >
-              <div class="relative w-fit mx-auto">
+              <div class="relative w-fit mx-auto mb-1">
                 <ProjectIcon
                   :entity-id="project.handleId"
                   :icon-size="48"
                   :image-url="project.image"
-                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full"
                 />
               </div>
               <h3
@@ -143,10 +143,10 @@
                   : selectGiver(contact))
               "
             >
-              <div class="relative w-fit mx-auto">
+              <div class="relative w-fit mx-auto mb-1">
                 <EntityIcon
                   :contact="contact"
-                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full"
                 />
                 <div
                   class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"

src/views/ContactGiftingView.vue

@@ -4,7 +4,7 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
         <!-- Back -->
         <router-link
           :to="{ name: 'home' }"
@@ -19,13 +19,12 @@
     <ul class="border-t border-slate-300">
       <li class="border-b border-slate-300 py-3">
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow">
+          <span class="grow flex gap-2 items-center font-medium">
-            <img
+            <font-awesome
-              src="../assets/blank-square.svg"
+              icon="circle-question"
-              width="32"
+              class="text-slate-400 text-4xl"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
             />
-            Unnamed/Unknown
+            <span class="italic text-slate-400">(Unnamed/Unknown)</span>
           </span>
           <span class="text-right">
             <button
@@ -44,13 +43,14 @@
         class="border-b border-slate-300 py-3"
       >
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow font-semibold">
+          <span class="grow flex gap-2 items-center font-medium">
             <EntityIcon
               :contact="contact"
-              :icon-size="32"
+              :icon-size="34"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+              class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden"
             />
-            {{ contact.name || "(no name)" }}
+            <span v-if="contact.name">{{ contact.name }}</span>
+            <span v-else class="italic text-slate-400">(No name)</span>
           </span>
           <span class="text-right">
             <button

src/views/GiftedDetailsView.vue

@@ -4,45 +4,44 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <!-- Breadcrumb -->
-    <div
+    <div id="ViewBreadcrumb" class="mb-8">
-      v-if="!hideBackButton"
+      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
-      class="text-lg text-center font-light relative px-7"
+        <!-- Back -->
-    >
+        <div
-      <h1
+          v-if="!hideBackButton"
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="cancelBack()"
+          @click="cancelBack()"
-      >
+        >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+          <font-awesome icon="chevron-left" class="fa-fw" />
+        </div>
+        What Was Given
       </h1>
+
+      <h2 class="text-lg font-normal text-center overflow-hidden">
+        <div class="truncate">
+          From
+          {{
+            providedByProject
+              ? providerProjectName
+              : providedByGiver
+                ? giverName
+                : "someone not named"
+          }}
+        </div>
+        <div class="truncate">
+          to
+          {{
+            givenToProject
+              ? fulfillsProjectName
+              : givenToRecipient
+                ? recipientName
+                : "someone not named"
+          }}
+        </div>
+      </h2>
     </div>
 
-    <!-- Heading -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>
-
-    <h1 class="text-xl font-bold text-center mb-4 truncate">
-      <span>
-        From
-        {{
-          providedByProject
-            ? providerProjectName
-            : providedByGiver
-              ? giverName
-              : "someone not named"
-        }}
-      </span>
-      <br />
-      <span>
-        to
-        {{
-          givenToProject
-            ? fulfillsProjectName
-            : givenToRecipient
-              ? recipientName
-              : "someone not named"
-        }}</span
-      >
-    </h1>
     <textarea
       v-model="description"
       class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"