various look-and-feel improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.31",
+  "version": "0.3.31-beta",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",

src/main.ts

@@ -40,9 +40,11 @@ import {
   faEllipsis,
   faEllipsisVertical,
   faEnvelopeOpenText,
+  faEraser,
   faEye,
   faEyeSlash,
   faFileLines,
+  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -55,6 +57,7 @@ import {
   faHouseChimney,
   faImagePortrait,
   faLeftRight,
+  faLightbulb,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -111,9 +114,11 @@ library.add(
   faEllipsis,
   faEllipsisVertical,
   faEnvelopeOpenText,
+  faEraser,
   faEye,
   faEyeSlash,
   faFileLines,
+  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -126,6 +131,7 @@ library.add(
   faHouseChimney,
   faImagePortrait,
   faLeftRight,
+  faLightbulb,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,

src/views/ClaimView.vue

@@ -317,6 +317,7 @@
       </div>
     </div>
 
+    <!-- Note that a similar section is found in ConfirmGiftView.vue -->
     <div>
       <h2 class="font-bold uppercase text-xl mt-8 mb-2">
         {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
@@ -344,7 +345,7 @@
           If you'd like to ask any of your contacts to take a look and see if
           their contacts can see more details,
           <a
-            @click="copyToClipboard('This page location', windowLocation)"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
             >share this page with them</a
           >
@@ -365,7 +366,7 @@
         <span v-else>
           If you'd like an introduction,
           <a
-            @click="copyToClipboard('Location', windowLocation)"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
             >share this page with them and ask if they'll tell you more about
             about the participants.</a

src/views/ConfirmGiftView.vue

@@ -25,7 +25,7 @@
         >
           Do you agree?
         </span>
-        <span v-else> Details </span>
+        <span v-else> Confirmation Details </span>
       </h1>
     </div>
 
@@ -257,10 +257,11 @@
           count as confirming it.
         </div>
         <div v-else-if="serverUtil.containsHiddenDid(veriClaim.claim)">
-          You cannot confirm this because it contains hidden identifiers.
+          You cannot confirm this because some people are hidden.
         </div>
       </div>
 
+      <!-- Note that a similar section is found in ClaimView.vue -->
       <h2
         class="font-bold uppercase text-xl text-blue-500 mt-8 mb-2 cursor-pointer"
         @click="showDetails = !showDetails"
@@ -842,7 +843,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "info",
           title: "Cannot Confirm",
-          text: "You cannot confirm this because it contains hidden identifiers.",
+          text: "You cannot confirm this because some people are hidden.",
         },
         3000,
       );

src/views/DIDView.vue

@@ -200,7 +200,7 @@
     </div>
     <!-- Results List -->
     <div v-if="claims.length > 0" class="mt-4">
-      <div class="text-l font-bold text-center">Claims That Involve Them</div>
+      <div class="text-l font-bold text-center">Claims That Involve {{ isMyDid ? "You" : "Them" }}</div>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreData">
       <ul>

src/views/DiscoverView.vue

@@ -78,11 +78,12 @@
     </div>
 
     <div v-if="isLocalActive">
-      <div>
+      <div class="text-center">
         <button
           class="ml-2 mt-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="$router.push({ name: 'search-area' })"
         >
+          <fa icon="location-dot" class="fa-fw" />
           Select a {{ searchBox ? "Different" : "" }} Location for Nearby Search
         </button>
       </div>
@@ -97,8 +98,13 @@
     </div>
     <div v-else-if="projects.length === 0" class="text-center mt-8">
       <p class="text-lg text-slate-500">
-        No projects were found with that search.
+        <span v-if="isLocalActive">
-        <span v-if="isLocalActive">Try looking Anywhere.</span>
+          <span v-if="searchBox">
+            None found in the selected area.
+          </span>
+          <!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. -->
+        </span>
+        <span v-else>No projects were found with that search.</span>
       </p>
     </div>
 

src/views/HomeView.vue

@@ -112,16 +112,16 @@
             <!-- !isCreatingIdentifier && isRegistered -->
 
             <!-- show the actions for recognizing a give -->
-            <div class="flex justify-between">
+            <div class="flex">
-              <h2 class="text-xl font-bold">Record Something Given By:</h2>
+              <h2 class="text-xl font-bold">
-              <div class="flex justify-end">
+                What have you seen someone do?
-                <button
+              </h2>
-                  @click="openGiftedPrompts()"
+              <button
-                  class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+                @click="openGiftedPrompts()"
-                >
+                class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
-                  Ideas...
+              >
-                </button>
+                <fa icon="lightbulb" class="fa-fw" />
-              </div>
+              </button>
             </div>
 
             <ul
@@ -139,7 +139,7 @@
                 </h3>
               </li>
               <li v-if="allContacts.length === 0" class="text-sm">
-                (Add contacts to see more people worthy of recognition.)
+                (Add friends to see more people worthy of recognition.)
               </li>
               <li
                 v-for="contact in allContacts.slice(0, 6)"
@@ -161,9 +161,9 @@
                 <router-link
                   v-if="allContacts.length >= 6"
                   :to="{ name: 'contact-gift' }"
-                  class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+                  class="flex align-bottom text-xs text-blue-500 mt-12"
                 >
-                  Choose From All Contacts
+                  ... or someone else...
                 </router-link>
               </li>
             </ul>
@@ -177,25 +177,24 @@
     <FeedFilters ref="feedFilters" />
 
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4 mb-4">
+    <div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
       <div class="flex items-center mb-4">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="text-xl font-bold">Latest Activity
-        <button @click="openFeedFilters()" class="block text-center ml-auto">
+          <button @click="openFeedFilters()">
-          <span class="text-sm text-white">
+            <span class="text-xs text-white">
-            <span
+              <fa
-              v-if="resultsAreFiltered()"
+                v-if="resultsAreFiltered()"
-              class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
+                icon="filter"
-            >
+                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
-              Filtered
+              />
+              <fa
+                v-else
+                icon="filter"
+                class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+              />
             </span>
-            <span
+          </button>
-              v-else
+        </h2>
-              class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
-            >
-              Unfiltered
-            </span>
-          </span>
-        </button>
       </div>
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul id="listLatestActivity" class="border-t border-slate-300">
@@ -270,7 +269,7 @@
                 <a @click="onClickLoadClaim(record.jwtId)">
                   <fa
                     icon="file-lines"
-                    class="pl-2 text-blue-500 cursor-pointer"
+                    class="pl-2 text-slate-500 cursor-pointer"
                   />
                 </a>
               </span>

src/views/SearchAreaView.vue

@@ -26,7 +26,7 @@
       your device to run searches but it is not stored on our servers.
     </div>
 
-    <div>
+    <div class="text-center">
       <button v-if="!searchBox && !isNewMarkerSet" class="m-4 px-4 py-2">
         Click to Choose a Location for Nearby Search
       </button>
@@ -35,6 +35,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="storeSearchBox"
       >
+        <fa icon="save" class="fa-fw" />
         Store This Location for Nearby Search
       </button>
       <button
@@ -42,6 +43,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="forgetSearchBox"
       >
+        <fa icon="trash-can" class="fa-fw" />
         Delete Stored Location
       </button>
       <button
@@ -49,13 +51,15 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="resetLatLong"
       >
-        Reset Marker
+        <fa icon="rotate" class="fa-fw" />
+        Reset To Original
       </button>
       <button
         v-if="isNewMarkerSet"
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="isNewMarkerSet = false"
       >
+        <fa icon="eraser" class="fa-fw" />
         Erase Marker
       </button>
       <div v-if="isNewMarkerSet">