Visual fixes

For more adaptive widths

project.task.yaml

@@ -1,32 +1,36 @@
 
 tasks:
-- 40 notifications :
-  - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
-
 - 01 add a location for a project via map pin
 - 04 search by a bounding box for local projects (see API by clicking on "Nearby")
-- 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:matthew
+- 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:jose
-- 02 Fix images on projectview - allow choice of image from a pallete of images or a url image (discovery page display also)
+- 02 Fix images on projectview - allow choice of image from a pallete of images or a url image.
-  - SEE: https://github.com/dmester/jdenticon assignee:jose
 
-- 08 Scan QR code to import into contacts assignee:matthew
+- 08 Scan QR code to import into contacts.
-  - SEE: https://github.com/gruhn/vue-qrcode-reader
 
-- Show pop-up or some message confirming that settings & contacts download has been initiated/finished assignee:matthew
+- 40 notifications :
+    - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data
 
-- Ensure each action sent to the server has a confirmation - eg registration (ie a toast something that dismisses after 5-10s)
+- refactor UI :
-  - SEE: https://github.com/emmanuelsw/notiwind assignee:jose
+  - .5 Alerts show at the top and can be missed if you've scrolled down on the page, eg. account data download
+  - .2 Make alerts at the top more visible (because they're currently a similar color and sometimes aren't seen)
+
+- Show pop-up or some message confirming that settings & contacts download has been initiated/finished
+
+- Ensure each action sent to the server has a confirmation - eg registration
 
 - Home Feed & Quick Give screen :
   - 01 save the feed-viewed status in settings storage ("afterQuery")
-  - 01 quick action - send action, maybe choose via canvas tool 
+  - 01 quick action - send action, maybe choose via canvas tool https://github.com/konvajs/vue-konva
-    - SEE: https://github.com/konvajs/vue-konva
 
-- 24 Move to Vite assignee:matthew
+- 24 Move to Vite
 
+- .5 add project ID to the URL, to make a project publicly-accessible
+- .5 remove edit from project page for projects owned by others
 - .5 fix where user 0 sees no txns from user 1 on contacts page but sees them on list page
+- .2 there are three dots at the top of ProjectViewView that refreshes the page but doesn't do anything else
+- 01 fix images on project page, on discovery page
 - .2 on ProjectViewView, show different messages for "to" and "from" sections if none exist
-- .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?) assignee:jose
+- .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?)
 - .2 fix rate limit verbiage (with the new one-per-day allowance) assignee:trent
 
 - Discuss whether the remaining tasks are worthwhile before MVP release.

src/components/GiftedDialog.vue

@@ -2,7 +2,7 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">
-        {{ message }} {{ giver?.did || "somebody not specified" }}
+        {{ message }} {{ giver?.name || "somebody not specified" }}
       </h1>
       <input
         type="text"

src/main.ts

@@ -10,6 +10,8 @@ import "./assets/styles/tailwind.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
+  faArrowLeft,
+  faArrowRight,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -51,6 +53,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
+  faArrowLeft,
+  faArrowRight,
   faBurst,
   faCalendar,
   faChevronLeft,

src/views/ContactAmountsView.vue

@@ -1,83 +1,78 @@
 <template>
   <QuickNav selected="Contacts"></QuickNav>
   <section id="Content" class="p-6 pb-24">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
-        ></router-link>
-      </h1>
-    </div>
-
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       Given with {{ contact?.name }}
     </h1>
 
     <!-- Results List -->
-    <div>
+    <table
-      <div class="border-b border-slate-300 flex">
+      class="table-auto w-full border-t border-slate-300 text-sm sm:text-base text-center"
-        <div class="w-1/4"></div>
+    >
-        <div class="w-1/4">from them</div>
+      <thead class="bg-slate-100">
-        <div class="w-1/4"></div>
+        <tr class="border-b border-slate-300">
-        <div class="w-1/4">to them</div>
+          <th></th>
-      </div>
+          <th class="px-1 py-2">From Them</th>
-      <div
+          <th></th>
-        class="border-b border-slate-300 flex"
+          <th class="px-1 py-2">To Them</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
           v-for="record in giveRecords"
           :key="record.id"
+          class="border-b border-slate-300"
         >
-        <div class="w-1/4">
+          <td class="p-1 text-xs sm:text-sm text-left text-slate-500">
             {{ new Date(record.issuedAt).toLocaleString() }}
-        </div>
+          </td>
-        <div class="w-1/4">
+          <td class="p-1">
             <span v-if="record.agentDid == contact.did">
               <div class="font-bold">
                 {{ record.amount }} {{ record.unit }}
-              <span v-if="record.amountConfirmed" class="tooltip">
+                <span v-if="record.amountConfirmed" title="Confirmed">
-                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                <span class="tooltiptext">Confirmed</span>
                 </span>
-              <button v-else class="tooltip" @click="confirm(record)">
+                <button v-else @click="confirm(record)" title="Unconfirmed">
-                <fa icon="circle" class="text-blue-600 fa-fw ml-1" />
+                  <fa icon="circle" class="text-blue-600 fa-fw" />
-                <span class="tooltiptext">Unconfirmed</span>
                 </button>
               </div>
-            <br />
+              <div class="italic text-xs sm:text-sm text-slate-500">
                 {{ record.description }}
-          </span>
               </div>
-        <div class="w-1/8">
+            </span>
+          </td>
+          <td class="p-1">
             <span v-if="record.agentDid == contact.did">
-            <fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" />
+              <fa icon="arrow-left" class="text-slate-400 fa-fw" />
             </span>
             <span v-else>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <fa icon="arrow-right" class="text-slate-400 fa-fw" />
-            <fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
             </span>
-        </div>
+          </td>
-        <div class="w-1/4">
+          <td class="p-1">
             <span v-if="record.agentDid != contact.did">
               <div class="font-bold">
                 {{ record.amount }} {{ record.unit }}
-              <span v-if="record.amountConfirmed" class="tooltip">
+                <span v-if="record.amountConfirmed" title="Confirmed">
-                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                <span class="tooltiptext">Confirmed</span>
                 </span>
-              <button v-else class="tooltip" @click="cannotConfirmMessage()">
+                <button
-                <fa icon="circle" class="text-slate-600 fa-fw ml-1" />
+                  v-else
-                <span class="tooltiptext">Unconfirmed</span>
+                  @click="cannotConfirmMessage()"
+                  title="Unconfirmed"
+                >
+                  <fa icon="circle" class="text-slate-600 fa-fw" />
                 </button>
               </div>
-            <br />
+              <div class="italic text-xs sm:text-sm text-slate-500">
                 {{ record.description }}
+              </div>
             </span>
-        </div>
+          </td>
-      </div>
+        </tr>
-    </div>
+      </tbody>
+    </table>
     <AlertMessage
       :alertTitle="alertTitle"
       :alertMessage="alertMessage"

src/views/ContactsView.vue

@@ -70,9 +70,9 @@
     </div>
 
     <!-- Results List -->
-    <ul v-if="contacts.length > 0">
+    <ul v-if="contacts.length > 0" class="border-t border-slate-300">
       <li
-        class="border-b border-slate-300"
+        class="border-b border-slate-300 py-4"
         v-for="contact in contacts"
         :key="contact.did"
       >
@@ -85,45 +85,63 @@
             Public Key (base 64): {{ contact.publicKeyBase64 }}
           </div>
 
+          <div id="ContactActions" class="flex gap-1.5 mt-2">
             <button
               v-if="contact.seesMe"
-            class="tooltip"
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
               @click="setVisibility(contact, false)"
+              title="They can see you"
             >
-            <fa icon="eye" class="text-slate-900 fa-fw ml-1" />
+              <fa icon="eye" class="fa-fw" />
-            <span class="tooltiptext">They can see you</span>
             </button>
-          <button v-else class="tooltip" @click="setVisibility(contact, true)">
+            <button
-            <span class="tooltiptext">They cannot see you</span>
+              v-else
-            <fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" />
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              @click="setVisibility(contact, true)"
+              title="They cannot see you"
+            >
+              <fa icon="eye-slash" class="fa-fw" />
             </button>
 
-          <button class="tooltip" @click="checkVisibility(contact)">
+            <button
-            <span class="tooltiptext">Check Visibility</span>
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
-            <fa icon="rotate" class="text-slate-900 fa-fw ml-1" />
+              @click="checkVisibility(contact)"
+              title="Check Visibility"
+            >
+              <fa icon="rotate" class="fa-fw" />
             </button>
 
-          <button v-if="contact.registered" class="tooltip">
+            <button
-            <span class="tooltiptext">Registered</span>
+              v-if="contact.registered"
-            <fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" />
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              title="Registered"
+            >
+              <fa icon="person-circle-check" class="fa-fw" />
             </button>
-          <button v-else @click="register(contact)" class="tooltip">
+            <button
-            <span class="tooltiptext">Registration Unknown</span>
+              v-else
-            <fa
+              @click="register(contact)"
-              icon="person-circle-question"
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
-              class="text-slate-900 fa-fw ml-1"
+              title="Registration unknown"
-            />
+            >
+              <fa icon="person-circle-question" class="fa-fw" />
             </button>
 
-          <button @click="deleteContact(contact)" class="px-9 tooltip">
+            <button
-            <span class="tooltiptext">Delete!</span>
+              @click="deleteContact(contact)"
-            <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
+              class="text-sm uppercase bg-red-600 text-white px-2 py-1.5 rounded-md"
+              title="Delete"
+            >
+              <fa icon="trash-can" class="fa-fw" />
             </button>
 
-          <div v-if="showGiveNumbers" class="float-right">
+            <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
-            <div class="float-right">
+              <button
-              <div class="tooltip">
+                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
-                to:
+                @click="onClickAddGive(activeDid, contact.did)"
+                title="givenByMeDescriptions[contact.did]"
+              >
+                To:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -134,15 +152,15 @@
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <span
+                <fa icon="plus" class="fa-fw" />
-                  v-if="givenByMeDescriptions[contact.did]"
+              </button>
-                  class="tooltiptext-left"
+
+              <button
+                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                @click="onClickAddGive(contact.did, activeDid)"
+                title="givenToMeDescriptions[contact.did]"
               >
-                  {{ givenByMeDescriptions[contact.did] }}
+                From:
-                </span>
-              </div>
-              <div class="tooltip px-2">
-                from:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -153,25 +171,18 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <span
+                <fa icon="plus" class="fa-fw" />
-                  v-if="givenToMeDescriptions[contact.did]"
+              </button>
-                  class="tooltiptext-left"
+
-                >
-                  {{ givenToMeDescriptions[contact.did] }}
-                </span>
-              </div>
               <router-link
                 :to="{
                   name: 'contact-amounts',
                   query: { contactDid: contact.did },
                 }"
-                class="tooltip"
+                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                title="See all given activity"
               >
-                <button>
+                <fa icon="file-lines" class="fa-fw" />
-                  <fa icon="gift" class="pt-1 pr-2 text-slate-500" />Give
-                </button>
-                <fa icon="file-lines" class="text-slate-600 fa-fw ml-1" />
-                <span class="tooltiptext-left">See All Given Activity</span>
               </router-link>
             </div>
           </div>
@@ -203,13 +214,12 @@ import {
 import { Component, Vue } from "vue-facing-decorator";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
-import GiftedDialog from "@/components/GiftedDialog.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
 @Component({
-  components: { AlertMessage, QuickNav, GiftedDialog },
+  components: { AlertMessage, QuickNav },
 })
 export default class ContactsView extends Vue {
   activeDid = "";

src/views/HomeView.vue

@@ -22,7 +22,7 @@
           <h3
             class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
           >
-            {{ contact.name || contact.did }}
+            {{ contact.name || "(no name)" }}
           </h3>
         </li>
       </ul>
@@ -39,7 +39,6 @@
       <!-- If there are no contacts, show this instead: -->
       <div
         class="rounded border border-dashed border-slate-300 bg-slate-100 px-4 py-3 text-center italic text-slate-500"
-        v-if="allContacts.length === 0"
       >
         (No contacts to show.)
       </div>
@@ -287,7 +286,7 @@ export default class HomeView extends Vue {
   handleDialogResult(result) {
     if (result.action === "confirm") {
       return new Promise((resolve) => {
-        this.recordGive(result.giver?.did, result.description, result.hours);
+        this.recordGive(result.contact?.did, result.description, result.hours);
         resolve();
       });
     } else {

src/views/ProjectViewView.vue

@@ -12,6 +12,13 @@
         >
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
+        <!-- Context Menu -->
+        <a
+          href=""
+          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
+          ><fa icon="ellipsis-vertical" class="fa-fw"></fa
+        ></a>
+
         View Plan
       </h1>
     </div>
@@ -49,7 +56,6 @@
         </div>
       </div>
       <button
-        v-if="issuer == activeDid"
         type="button"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
         @click="onEditClick()"

src/views/ProjectsView.vue

@@ -8,6 +8,7 @@
 
     <!-- Quick Search -->
 
+    <div id="QuickSearch" class="mb-4 flex">
       <input
         type="text"
         placeholder="Search…"
@@ -18,6 +19,7 @@
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
+    </div>
 
     <!-- New Project -->
     <button
@@ -37,7 +39,7 @@
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul>
+      <ul class="border-t border-slate-300">
         <li
           class="border-b border-slate-300"
           v-for="project in projects"