WIP: gifting UI revamp

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

src/components/GiftedDialog.vue

@@ -1,43 +1,125 @@
 <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>
+
+        <!-- Quick-pick grid -->
+				<ul
+          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
+        >
+          <li @click="openDialog()">
+            <img
+              src="../assets/blank-square.svg"
+              class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
+            />
+            <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
+            <h3
+              class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+            >
+              Unnamed
+            </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)"
+            class="cursor-pointer"
+          >
+            <div class="relative w-fit mx-auto">
+              <EntityIcon
+                :contact="contact"
+                :icon-size="64"
+                class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
+              />
+
+              <div
+                class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
+              >
+                <font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
+              </div>
+            </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-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>
+
+      <!-- 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 mb-2 px-3 py-2"
+          class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
           :placeholder="prompt || 'What was given?'"
         />
-      <div class="flex flex-row justify-center">
+        <div class="flex mb-4">
-        <span
+					<button
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
+            class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
-          @click="changeUnitCode()"
-        >
-          {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
-        </span>
-        <div
-          class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
             @click="amountInput === '0' ? null : decrement()"
           >
-          <font-awesome icon="chevron-left" />
+						<i class="fa-solid fa-chevron-left"></i>
-        </div>
+					</button>
           <input
             id="inputGivenAmount"
             v-model="amountInput"
             type="number"
-          class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
+            class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
           />
-        <div
+					<button
-          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
+            class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
             @click="increment()"
           >
-          <font-awesome icon="chevron-right" />
+						<i class="fa-solid fa-chevron-right"></i>
-        </div>
+					</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>
-      <div class="mt-4 flex justify-center">
+        <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>
-        <span>
         <router-link
           :to="{
             name: 'gifted-details',
@@ -54,29 +136,27 @@
               unitCode,
             },
           }"
-            class="text-blue-500"
+          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 & more options ...
+          Photo &amp; more options&hellip;
         </router-link>
-        </span>
+        <p class="text-center mb-4">
-      </div>
+          <b class="font-medium">Sign &amp; Send</b> to publish to the world
-      <p class="text-center mb-2 mt-6 italic">
-        Sign & Send to publish to the world
           <font-awesome
             icon="circle-info"
-          class="pl-2 text-blue-500 cursor-pointer"
+            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-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 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-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="cancel"
           >
             Cancel
@@ -84,6 +164,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">

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">
-            <!-- show the actions for recognizing a give -->
+              <div class="flex gap-2 items-center mb-2">
-            <div class="flex">
+                <h2 class="text-xl font-bold">Record something given by:</h2>
-              <h2 class="text-xl font-bold">What have you seen someone do?</h2>
                 <button
-                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"
                   @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" class="fa-fw" />
+                  <font-awesome icon="lightbulb" />
                 </button>
               </div>
 
-            <ul
+              <div class="grid grid-cols-2 gap-2">
-              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
+                <button
-            >
+                  type="button"
-              <li @click="openDialog()">
+                  @click="openDialog()"
-                <img
+                  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"
-                  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 }}
+                  <font-awesome icon="user" />
-                </h3>
+                  Person
-              </li>
+                </button>
-              <li>
+                <button
-                <router-link
+                  type="button"
-                  v-if="allContacts.length >= 6"
+                  @click="openDialog()"
-                  :to="{ name: 'contact-gift' }"
+                  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"
-                  class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
                 >
-                  ... or someone else...
+                  <font-awesome icon="folder-open" />
-                </router-link>
+                  Project
-              </li>
+                </button>
-            </ul>
+              </div>
+            </div>
           </div>
         </div>
       </div>