mockup: change wording

src/components/GiftDetailsStep.vue

@@ -61,10 +61,21 @@ control over updates and validation * * @author Matthew Raymer */
       </select>
     </div>
 
-    <!-- Photo & More Options Link -->
+    <div class="grid grid-cols-2 gap-2 mb-4">
-    <router-link :to="photoOptionsRoute" :class="photoOptionsClasses">
+      <button
-      Photo &amp; more options&hellip;
+        class="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-1.5 py-2 rounded-lg"
-    </router-link>
+      >
+        <font-awesome icon="camera" />
+        Add Photo
+      </button>
+      <!-- More Options Link -->
+      <router-link
+        :to="optionsRoute"
+        class="block w-full 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-1.5 py-2 rounded-lg"
+      >
+        More Options
+      </router-link>
+    </div>
 
     <!-- Sign & Send Info -->
     <p class="text-center text-sm mb-4">
@@ -218,13 +229,6 @@ export default class GiftDetailsStep extends Vue {
   private localAmount: number = 0;
   private localUnitCode: string = "HUR";
 
-  /**
-   * CSS classes for the photo & more options link
-   */
-  get photoOptionsClasses(): string {
-    return "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";
-  }
-
   /**
    * CSS classes for the cancel button
    */
@@ -304,7 +308,7 @@ export default class GiftDetailsStep extends Vue {
   /**
    * Computed route for photo & more options
    */
-  get photoOptionsRoute(): RouteLocationRaw {
+  get optionsRoute(): RouteLocationRaw {
     return {
       name: "gifted-details",
       query: {

src/views/HomeView.vue

@@ -108,37 +108,60 @@ Raymer * @version 1.0.0 */
         />
 
         <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
-          <!-- Record Quick-Action -->
+          <!-- Record Quick-Action - variant A -->
-          <div class="mb-6">
+          <div v-if="false" class="mb-6">
-            <div class="flex gap-2 items-center mb-2">
+            <div class="flex justify-end gap-1">
-              <h2 class="font-bold">Record something given by:</h2>
-              <button
-                class="block ms-auto text-sm 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-1.5 rounded-full"
-                @click="openGiftedPrompts()"
-              >
-                <font-awesome
-                  icon="lightbulb"
-                  class="block text-center w-[1em]"
-                />
-              </button>
-            </div>
-
-            <div class="grid grid-cols-2 gap-2">
               <button
                 type="button"
-                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="grow text-center text-xl font-bold bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
                 @click="openPersonDialog()"
               >
-                <font-awesome icon="user" />
+                <font-awesome icon="circle-plus" />
-                Person
+                Record a Give
               </button>
               <button
                 type="button"
-                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="text-center text-lg 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="openProjectDialog()"
+              >
+                <font-awesome icon="folder-open" class="fa-fw" />
+              </button>
+              <button
+                type="button"
+                class="text-center text-lg 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-3 py-2 rounded-lg"
+                @click="openGiftedPrompts()"
+              >
+                <font-awesome icon="lightbulb" class="fa-fw" />
+              </button>
+            </div>
+          </div>
+
+          <!-- Record Quick-Action - variant B -->
+          <div class="mb-6">
+            <button
+              type="button"
+              class="w-full text-center text-2xl font-bold bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg mb-2"
+              @click="openPersonDialog()"
+            >
+              <font-awesome icon="circle-plus" />
+              Record a Give
+            </button>
+            <div class="grid grid-cols-2 gap-1">
+              <button
+                type="button"
+                class="text-center text-base 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="openProjectDialog()"
               >
                 <font-awesome icon="folder-open" />
-                Project
+                Project Give
+              </button>
+              <button
+                type="button"
+                class="text-center text-base 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-3 py-2 rounded-lg"
+                @click="openGiftedPrompts()"
+              >
+                <font-awesome icon="lightbulb" />
+                Give Ideas
               </button>
             </div>
           </div>