Merge branch 'master' into fix-contact-totals

src/views/ProjectViewView.vue

@@ -77,115 +77,93 @@
     </div>
 
     <div>
-      <div v-if="activeDid" class="text-center">
+      <div v-if="activeDid">
         <button
           @click="openDialog({ name: 'you', did: activeDid })"
-          class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
+          class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
         >
-          I gave&hellip;
+          I gave...
         </button>
-        <p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
+        &horbar; or:
       </div>
-      <p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>
+      <!-- similar contact selection code is in multiple places -->
-
+      Record a gift from
-      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+      <span v-for="contact in allContacts" :key="contact.did">
-        <li @click="openDialog()">
+        <button @click="openDialog(contact)" class="text-blue-500">
-          <div class="mb-1">
+          &nbsp;{{ contact.name }}</button
-            <fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
+        >,
-          </div>
+      </span>
-          <h3
+      <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
-            class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+      <button @click="openDialog()" class="text-blue-500">
-          >
+        someone not specified
-            Anonymous
+      </button>
-          </h3>
-        </li>
-        <li
-          v-for="contact in allContacts"
-          :key="contact.did"
-          @click="openDialog(contact)"
-        >
-          <div class="mb-1">
-            <fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
-          </div>
-          <h3
-            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-          >
-            {{ contact.name || "(no name)" }}
-          </h3>
-        </li>
-      </ul>
-
-      <!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
-      <router-link
-        v-if="allContacts.length > 7"
-        :to="{ name: 'contact-gives' }"
-        class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
-      >
-        Show More Contacts&hellip;
-      </router-link>
     </div>
 
     <!-- Gifts to & from this -->
-    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
+    <div class="mt-8 flex justify-around">
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
+      <div>
-        <h3 class="text-sm uppercase font-semibold mb-3">
+        <h1 class="text-xl">Given to this Project</h1>
-          Given to this Project
-        </h3>
-
-        <ul class="text-sm border-t border-slate-300">
-          <li
-            v-for="give in givesToThis"
-            :key="give.id"
-            class="py-1.5 border-b border-slate-300"
-          >
-            <div class="flex justify-between gap-4">
-              <span
-                ><fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
-              </span>
-              <span v-if="give.amount"
-                ><fa icon="coins" class="fa-fw text-slate-400"></fa>
-                {{ give.amount }}
-              </span>
       </div>
-            <div v-if="give.description" class="text-slate-500">
+      <div>
+        <h1 class="text-xl">... and paid forward from this Project</h1>
+      </div>
+    </div>
+    <div class="flex justify-around">
+      <div class="w-1/2">
+        <div v-for="give in givesToThis" :key="give.id">
+          <div class="flex justify-between">
+            <div class="flex gap-3">
+              <div class="flex gap-2">
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <span>{{
+                  didInfo(give.agentDid, activeDid, allMyDids, allContacts)
+                }}</span>
+              </div>
+              <div class="flex gap-2" v-if="give.amount">
+                <fa
+                  icon="clock"
+                  v-if="give.unit === 'HUR'"
+                  class="fa-fw text-slate-400"
+                ></fa>
+                <fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
+                <span>{{ give.amount }}</span>
+              </div>
+              <div class="flex gap-2" v-if="give.description">
                 <fa icon="comment" class="fa-fw text-slate-400"></fa>
-              {{ give.description }}
+                <span>{{ give.description }}</span>
               </div>
-          </li>
-        </ul>
             </div>
-
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm uppercase font-semibold mb-3">
-          &hellip;and from this Project
-        </h3>
-
-        <ul class="text-sm border-t border-slate-300">
-          <li
-            v-for="give in givesByThis"
-            :key="give.id"
-            class="py-1.5 border-b border-slate-300"
-          >
-            <div class="flex justify-between gap-4">
-              <span
-                ><fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
-              </span>
-              <span v-if="give.amount"
-                ><fa icon="coins" class="fa-fw text-slate-400"></fa>
-                {{ give.amount }}
-              </span>
           </div>
-            <div v-if="give.description" class="text-slate-500">
+        </div>
+      </div>
+      <div class="w-1/2">
+        <div v-for="give in givesByThis" :key="give.id">
+          <div class="flex justify-between">
+            <div class="flex gap-3">
+              <div class="flex gap-2">
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <span>{{
+                  didInfo(give.agentDid, activeDid, allMyDids, allContacts)
+                }}</span>
+              </div>
+              <div class="flex gap-2" v-if="give.amount">
+                <fa
+                  icon="clock"
+                  v-if="give.unit === 'HUR'"
+                  class="fa-fw text-slate-400"
+                ></fa>
+                <fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
+                <span>{{ give.amount }}</span>
+              </div>
+              <div class="flex gap-2">
                 <fa icon="comment" class="fa-fw text-slate-400"></fa>
-              {{ give.description }}
+                <span>{{ give.description }}</span>
-            </div>
+              </div>
-          </li>
+            </div>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
-
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"

src/views/SeedBackupView.vue

@@ -20,26 +20,22 @@
     </div>
 
     <div v-if="activeAccount">
-      <p class="text-center mb-4">
+      <p>
-        <b class="text-red-600">BEWARE!</b> Anyone who has this seed phrase will
+        BEWARE: Anyone who gets hold of this mnemonic seed phrase will be able
-        be able impersonate you and take over any digital holdings based on it.
+        impersonate you and take over any digital holdings based on it. So only
-        Reveal it when you are somewhere only you can see your screen, and
+        reveal it when you are in a private place out of sight of other eyes,
-        record it somewhere only you have access.
+        and only record it in something private -- don't take a screenshot or
-        <i>Don't take a screenshot or send it to any online service.</i>
+        send it to any online service.
       </p>
 
-      <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
       <button
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
         @click="showSeedPhrase"
       >
-          Reveal my Seed Phrase
+        Click here when you're ready to see it.
       </button>
 
-        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
+      <p v-if="showSeed">{{ activeAccount.mnemonic }}</p>
-          {{ activeAccount.mnemonic }}
-        </p>
-      </div>
     </div>
     <div v-else>You do not have an active identity.</div>
     <AlertMessage