Style "unnamed" entity

src/components/GiftedDialog.vue

@@ -262,8 +262,17 @@
                     : "Received from:"
                 }}
               </p>
-              <h3 class="font-semibold truncate">
+              <h3 
-                {{ giver?.name || "Unnamed" }}
+                v-if="giver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ giver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -307,8 +316,17 @@
                     : "Received from:"
                 }}
               </p>
-              <h3 class="font-semibold truncate">
+              <h3 
-                {{ giver?.name || "Unnamed" }}
+                v-if="giver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ giver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -340,8 +358,17 @@
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
                 Given to:
               </p>
-              <h3 class="font-semibold truncate">
+              <h3 
-                {{ receiver?.name || "Unnamed" }}
+                v-if="receiver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ receiver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -367,8 +394,17 @@
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
                 Given to project:
               </p>
-              <h3 class="font-semibold truncate">
+              <h3 
-                {{ receiver?.name || "Unnamed" }}
+                v-if="receiver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ receiver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -920,7 +956,7 @@ export default class GiftedDialog extends Vue {
     } else {
       this.giver = {
         did: "",
-        name: "Unnamed",
+        name: "",
       };
     }
     this.currentStep = 2;
@@ -983,7 +1019,7 @@ export default class GiftedDialog extends Vue {
     } else {
       this.receiver = {
         did: "",
-        name: "Unnamed",
+        name: "",
       };
     }
     this.currentStep = 2;