WIP: gifting UI revamp

Started to transform the gifting dialog into the two-step setup as per previous mockups

src/components/GiftedDialog.vue

@@ -1,87 +1,168 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">
+      <!-- Step 1: Recipient -->
-        {{ customTitle }}
+      <div id="sectionGiftedRecipient">
-      </h1>
+        <label class="block font-bold mb-4">Choose a person to receive from:</label>
-      <input
+
-        v-model="description"
+        <!-- Quick-pick grid -->
-        type="text"
+				<ul
-        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
-        :placeholder="prompt || 'What was given?'"
-      />
-      <div class="flex flex-row justify-center">
-        <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
-          @click="changeUnitCode()"
         >
-          {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
+          <li @click="openDialog()">
-        </span>
+            <img
-        <div
+              src="../assets/blank-square.svg"
-          class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
+              class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-          @click="amountInput === '0' ? null : decrement()"
+            />
-        >
+            <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
-          <font-awesome icon="chevron-left" />
+            <h3
-        </div>
+              class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
-        <input
+            >
-          id="inputGivenAmount"
+              Unnamed
-          v-model="amountInput"
+            </h3>
-          type="number"
+          </li>
-          class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
+          <li v-if="allContacts.length === 0" class="text-sm">
-        />
+            (Add friends to see more people worthy of recognition.)
-        <div
+          </li>
-          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
+          <li
-          @click="increment()"
+            v-for="contact in allContacts.slice(0, 6)"
-        >
+            :key="contact.did"
-          <font-awesome icon="chevron-right" />
+            @click="openDialog(contact)"
-        </div>
+            class="cursor-pointer"
-      </div>
-      <div class="mt-4 flex justify-center">
-        <span>
-          <router-link
-            :to="{
-              name: 'gifted-details',
-              query: {
-                amountInput,
-                description,
-                giverDid: giver?.did,
-                giverName: giver?.name,
-                offerId,
-                fulfillsProjectId: toProjectId,
-                providerProjectId: fromProjectId,
-                recipientDid: receiver?.did,
-                recipientName: receiver?.name,
-                unitCode,
-              },
-            }"
-            class="text-blue-500"
           >
-            Photo & more options ...
+            <div class="relative w-fit mx-auto">
-          </router-link>
+              <EntityIcon
-        </span>
+                :contact="contact"
-      </div>
+                :icon-size="64"
-      <p class="text-center mb-2 mt-6 italic">
+                class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
-        Sign & Send to publish to the world
+              />
-        <font-awesome
+
-          icon="circle-info"
+              <div
-          class="pl-2 text-blue-500 cursor-pointer"
+                class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
-          @click="explainData()"
+              >
-        />
+                <font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
-      </p>
+              </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            </div>
+            <h3
+              class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+            >
+              {{ contact.name || contact.did }}
+            </h3>
+          </li>
+          <li>
+            <router-link
+              v-if="allContacts.length >= 6"
+              :to="{ name: 'contact-gift' }"
+              class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+            >
+              <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
+              <h3
+                class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+              >
+                Show All
+              </h3>
+            </router-link>
+          </li>
+        </ul>
+
         <button
-          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          class="block w-full text-center text-md uppercase 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.5 py-2 rounded-lg"
-          @click="confirm"
-        >
-          Sign &amp; Send
-        </button>
-        <button
-          class="block w-full text-center text-md uppercase 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.5 py-2 rounded-md"
           @click="cancel"
         >
           Cancel
         </button>
       </div>
+
+      <!-- Step 2: Gift -->
+      <div id="sectionGiftedGift">
+        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
+					<img src="https://placehold.co/480?text=(Image)" class="size-8 object-cover rounded-full">
+
+					<div class="text-start">
+						<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">Received from:</p>
+						<h3 class="font-semibold">Matthew Raymer</h3>
+					</div>
+
+					<p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
+				</button>
+        <input
+          v-model="description"
+          type="text"
+          class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
+          :placeholder="prompt || 'What was given?'"
+        />
+        <div class="flex mb-4">
+					<button
+            class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
+            @click="amountInput === '0' ? null : decrement()"
+          >
+						<i class="fa-solid fa-chevron-left"></i>
+					</button>
+          <input
+            id="inputGivenAmount"
+            v-model="amountInput"
+            type="number"
+            class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
+          />
+					<button
+            class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
+            @click="increment()"
+          >
+						<i class="fa-solid fa-chevron-right"></i>
+					</button>
+
+					<select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
+						<option value="HUR">Hours</option>
+						<option value="USD">US $</option>
+						<option value="BTC">BTC</option>
+						<option value="BX">BX</option>
+						<option value="ETH">ETH</option>
+					</select>
+				</div>
+        <button class="block w-full text-center text-md uppercase 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.5 py-2 rounded-lg mb-4">Photo &amp; more options&hellip;</button>
+        <router-link
+          :to="{
+            name: 'gifted-details',
+            query: {
+              amountInput,
+              description,
+              giverDid: giver?.did,
+              giverName: giver?.name,
+              offerId,
+              fulfillsProjectId: toProjectId,
+              providerProjectId: fromProjectId,
+              recipientDid: receiver?.did,
+              recipientName: receiver?.name,
+              unitCode,
+            },
+          }"
+          class="block w-full text-center text-md uppercase 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.5 py-2 rounded-lg mb-4"
+        >
+          Photo &amp; more options&hellip;
+        </router-link>
+        <p class="text-center mb-4">
+          <b class="font-medium">Sign &amp; Send</b> to publish to the world
+          <font-awesome
+            icon="circle-info"
+            class="fa-fw text-blue-500 text-lg cursor-pointer"
+            @click="explainData()"
+          />
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            class="block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
+            @click="confirm"
+          >
+            Sign &amp; Send
+          </button>
+          <button
+            class="block w-full text-center text-md uppercase 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.5 py-2 rounded-lg"
+            @click="cancel"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/lib/fontawesome.ts

@@ -28,6 +28,7 @@ import {
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -77,6 +78,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,
@@ -108,6 +110,7 @@ library.add(
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -157,6 +160,7 @@ library.add(
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,

src/main.ts

@@ -32,6 +32,7 @@ import {
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -82,6 +83,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,
@@ -112,6 +114,7 @@ library.add(
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -162,6 +165,7 @@ library.add(
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,

src/views/HomeView.vue

@@ -117,62 +117,37 @@ Raymer * @version 1.0.0 */
           </div>
 
           <div v-else id="sectionRecordSomethingGiven">
-            <!-- !isCreatingIdentifier && isRegistered -->
+            <!-- Record Quick-Action -->
+            <div class="mb-6">
+              <div class="flex gap-2 items-center mb-2">
+                <h2 class="text-xl font-bold">Record something given by:</h2>
+                <button
+                  @click="openGiftedPrompts()"
+                  class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+                >
+                  <font-awesome icon="lightbulb" />
+                </button>
+              </div>
 
-            <!-- show the actions for recognizing a give -->
+              <div class="grid grid-cols-2 gap-2">
-            <div class="flex">
+                <button
-              <h2 class="text-xl font-bold">What have you seen someone do?</h2>
+                  type="button"
-              <button
+                  @click="openDialog()"
-                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"
+                  class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
-                @click="openGiftedPrompts()"
+                >
-              >
+                  <font-awesome icon="user" />
-                <font-awesome icon="lightbulb" class="fa-fw" />
+                  Person
-              </button>
+                </button>
+                <button
+                  type="button"
+                  @click="openDialog()"
+                  class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
+                >
+                  <font-awesome icon="folder-open" />
+                  Project
+                </button>
+              </div>
             </div>
-
-            <ul
-              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
-            >
-              <li @click="openDialog()">
-                <img
-                  src="../assets/blank-square.svg"
-                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-                />
-                <h3
-                  class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-                >
-                  Unnamed/Unknown
-                </h3>
-              </li>
-              <li v-if="allContacts.length === 0" class="text-sm">
-                (Add friends to see more people worthy of recognition.)
-              </li>
-              <li
-                v-for="contact in allContacts.slice(0, 6)"
-                :key="contact.did"
-                @click="openDialog(contact)"
-              >
-                <EntityIcon
-                  :contact="contact"
-                  :icon-size="64"
-                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-                />
-                <h3
-                  class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-                >
-                  {{ contact.name || contact.did }}
-                </h3>
-              </li>
-              <li>
-                <router-link
-                  v-if="allContacts.length >= 6"
-                  :to="{ name: 'contact-gift' }"
-                  class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
-                >
-                  ... or someone else...
-                </router-link>
-              </li>
-            </ul>
           </div>
         </div>
       </div>