Updated icon and splash assets

- Switched to CSS max() for proper conditional padding when dealing with screens that have a notch, dynamic island, gesture bar, etc.
- Top padding should now appear more compact in iOS

src/App.vue

@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed top-[calc(env(safe-area-inset-top)+1rem)] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"
@@ -541,13 +541,13 @@ export default class App extends Vue {
 
 <style>
 #Content {
-  padding-left: 1.5rem;
+  padding-left: max(1.5rem, env(safe-area-inset-left));
-  padding-right: 1.5rem;
+  padding-right: max(1.5rem, env(safe-area-inset-right));
-  padding-top: calc(env(safe-area-inset-top) + 1.5rem);
+  padding-top: max(1.5rem, env(safe-area-inset-top));
-  padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
+  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
 }
 
 #QuickNav ~ #Content {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
 }
 </style>

src/components/ActivityListItem.vue

@@ -14,37 +14,22 @@
       class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2"
     >
       <div class="flex items-center gap-2">
-        <router-link
+        <div v-if="record.issuerDid">
-          v-if="record.issuerDid && !isHiddenDid(record.issuerDid)"
-          :to="{
-            path: '/did/' + encodeURIComponent(record.issuerDid),
-          }"
-          title="More details about this person"
-        >
           <EntityIcon
             :entity-id="record.issuerDid"
             class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
           />
-        </router-link>
+        </div>
-        <font-awesome
+        <div v-else>
-          v-else-if="isHiddenDid(record.issuerDid)"
+          <font-awesome
-          icon="eye-slash"
+            icon="person-circle-question"
-          class="text-slate-400 !size-[2rem] cursor-pointer"
+            class="text-slate-300 text-[2rem]"
-          @click="notifyHiddenPerson"
+          />
-        />
+        </div>
-        <font-awesome
-          v-else
-          icon="person-circle-question"
-          class="text-slate-400 !size-[2rem] cursor-pointer"
-          @click="notifyUnknownPerson"
-        />
 
         <div>
-          <h3
+          <h3 class="font-semibold">
-            v-if="record.issuer.known"
+            {{ record.issuer.known ? record.issuer.displayName : "" }}
-            class="font-semibold leading-tight"
-          >
-            {{ record.issuer.displayName }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
             {{ friendlyDate }}
@@ -61,7 +46,7 @@
       <!-- Record Image -->
       <div
         v-if="record.image"
-        class="bg-cover mb-4 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
+        class="bg-cover mb-6 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
         :style="`background-image: url(${record.image});`"
       >
         <a
@@ -78,55 +63,33 @@
       </div>
 
       <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mb-3"
+        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mb-5"
       >
         <!-- Source -->
         <div
-          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
               <!-- Project Icon -->
               <div v-if="record.providerPlanName">
-                <router-link
+                <ProjectIcon
-                  :to="{
+                  :entity-id="record.providerPlanName"
-                    path: '/project/' + encodeURIComponent(record.providerPlanHandleId || ''),
+                  :icon-size="48"
-                  }"
+                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                  title="View project details"
+                />
-                >
-                  <ProjectIcon
-                    :entity-id="record.providerPlanHandleId || ''"
-                    :icon-size="48"
-                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                  />
-                </router-link>
               </div>
               <!-- Identicon for DIDs -->
               <div v-else-if="record.agentDid">
-                <router-link
+                <EntityIcon
-                  v-if="!isHiddenDid(record.agentDid)"
+                  :entity-id="record.agentDid"
-                  :to="{
+                  :profile-image-url="record.issuer.profileImageUrl"
-                    path: '/did/' + encodeURIComponent(record.agentDid),
+                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
-                  }"
-                  title="More details about this person"
-                >
-                  <EntityIcon
-                    :entity-id="record.agentDid"
-                    :profile-image-url="record.issuer.profileImageUrl"
-                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
-                  />
-                </router-link>
-                <font-awesome
-                  v-else
-                  @click="notifyHiddenPerson"
-                  icon="eye-slash"
-                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
                 />
               </div>
               <!-- Unknown Person -->
               <div v-else>
                 <font-awesome
-                  @click="notifyUnknownPerson"
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
@@ -147,9 +110,9 @@
 
         <!-- Arrow -->
         <div
-          class="absolute inset-x-[7rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
+          class="absolute inset-x-[8rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
         >
-          <div class="text-sm text-center leading-none font-semibold pe-2 sm:pe-4">
+          <div class="text-sm text-center leading-none font-semibold pe-[15px]">
             {{ fetchAmount }}
           </div>
 
@@ -166,51 +129,29 @@
 
         <!-- Destination -->
         <div
-          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
               <!-- Project Icon -->
               <div v-if="record.recipientProjectName">
-                <router-link
+                <ProjectIcon
-                  :to="{
+                  :entity-id="record.recipientProjectName"
-                    path: '/project/' + encodeURIComponent(record.fulfillsPlanHandleId || ''),
+                  :icon-size="48"
-                  }"
+                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                  title="View project details"
+                />
-                >
-                  <ProjectIcon
-                    :entity-id="record.fulfillsPlanHandleId || ''"
-                    :icon-size="48"
-                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                  />
-                </router-link>
               </div>
               <!-- Identicon for DIDs -->
               <div v-else-if="record.recipientDid">
-                <router-link
+                <EntityIcon
-                  v-if="!isHiddenDid(record.recipientDid)"
+                  :entity-id="record.recipientDid"
-                  :to="{
+                  :profile-image-url="record.receiver.profileImageUrl"
-                    path: '/did/' + encodeURIComponent(record.recipientDid),
+                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
-                  }"
-                  title="More details about this person"
-                >
-                  <EntityIcon
-                    :entity-id="record.recipientDid"
-                    :profile-image-url="record.receiver.profileImageUrl"
-                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
-                  />
-                </router-link>
-                <font-awesome
-                  v-else
-                  @click="notifyHiddenPerson"
-                  icon="eye-slash"
-                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
                 />
               </div>
               <!-- Unknown Person -->
               <div v-else>
                 <font-awesome
-                  @click="notifyUnknownPerson"
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
@@ -245,9 +186,8 @@ import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "../types";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
-import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer";
+import { containsHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
-import { NotificationIface } from "../constants/app";
 
 @Component({
   components: {
@@ -262,33 +202,6 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
-  isHiddenDid = isHiddenDid;
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
-
-  notifyHiddenPerson() {
-    this.$notify(
-      {
-        group: "alert",
-        type: "warning",
-        title: "Person Outside Your Network",
-        text: "This person is not visible to you.",
-      },
-      3000
-    );
-  }
-
-  notifyUnknownPerson() {
-    this.$notify(
-      {
-        group: "alert",
-        type: "warning",
-        title: "Unidentified Person",
-        text: "Nobody specific was recognized.",
-      },
-      3000
-    );
-  }
-
   @Emit()
   cacheImage(image: string) {
     return image;

src/components/TopMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-5 top-[calc(env(safe-area-inset-top)+0.75rem)]">
+  <div class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top))]">
     <span class="align-center text-red-500 mr-2">{{ message }}</span>
     <span class="ml-2">
       <router-link

src/views/DiscoverView.vue

@@ -11,30 +11,9 @@
 
     <OnboardingDialog ref="onboardingDialog" />
 
-    <!-- Quick Search -->
-    <div
-      id="QuickSearch"
-      class="mt-8 mb-4 flex"
-      :style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }"
-    >
-      <input
-        v-model="searchTerms"
-        type="text"
-        placeholder="Search…"
-        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
-        @keyup.enter="searchSelected()"
-      />
-      <button
-        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
-        @click="searchSelected()"
-      >
-        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
-      </button>
-    </div>
-
     <!-- Result Tabs -->
     <!-- Top Level Selection -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mb-4">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
@@ -146,6 +125,27 @@
       </ul>
     </div>
 
+    <!-- Quick Search -->
+    <div
+      id="QuickSearch"
+      class="mt-6 mb-4 flex"
+      :style="{ display: isSearchVisible ? 'flex' : 'none' }"
+    >
+      <input
+        v-model="searchTerms"
+        type="text"
+        placeholder="Search…"
+        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
+        @keyup.enter="searchSelected()"
+      />
+      <button
+        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+        @click="searchSelected()"
+      >
+        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
+      </button>
+    </div>
+
     <div v-if="isLocalActive">
       <div class="text-center">
         <button
@@ -159,7 +159,7 @@
     </div>
 
     <div v-if="isMappedActive && !tempSearchBox">
-      <div class="mt-4 h-96 w-5/6 mx-auto">
+      <div class="mt-6 h-96 w-full mx-auto">
         <l-map
           ref="projectMap"
           @ready="onMapReady"
@@ -167,6 +167,7 @@
           @movestart="onMoveStart"
           @zoomend="onZoomEnd"
           @zoomstart="onZoomStart"
+          class="z-40"
         >
           <l-tile-layer
             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -197,14 +198,18 @@
           -->
         </span>
         <span v-else-if="isAnywhereActive"
-          >No projects were found with that search.</span
+          >No {{ isProjectsActive ? 'projects' : 'people' }} were found with that search.</span
         >
       </p>
     </div>
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul id="listDiscoverResults">
+      <ul 
+        id="listDiscoverResults" 
+        class="border-t border-slate-300 mt-6"
+        v-if="projects.length > 0 || userProfiles.length > 0"
+      >
         <!-- Projects List -->
         <template v-if="isProjectsActive">
           <li