From e97cd1b1fa57689be9eb77250ada78ae8c64c866 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 13 Dec 2023 17:29:53 +0800
Subject: [PATCH] Minor visual improvements in "giving recognition" section

---
 src/views/HomeView.vue | 42 +++++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a5189a4c..8994a9c1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -8,28 +8,44 @@
 
     <!-- show the actions for recognizing a give -->
     <div class="mb-8">
-      <div v-if="!activeDid">
-        To record others' giving,
-        <router-link :to="{ name: 'start' }" class="text-blue-500">
-          create your identifier.</router-link
+      <div
+        v-if="!activeDid"
+        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
+      >
+        <p class="text-lg mb-3">
+          You need an <b>identifier</b> before you can record others' giving.
+        </p>
+        <router-link
+          :to="{ name: 'start' }"
+          class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
+        >
+          Create Your Identifier</router-link
         >
       </div>
 
-      <div v-else-if="!isRegistered">
-        To record others' giving, someone must register your account, so show
-        them
-        <router-link :to="{ name: 'contact-qr' }" class="text-blue-500">
-          your identity info</router-link
+      <div
+        v-else-if="!isRegistered"
+        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
+      >
+        Someone must register your account before you can record others' giving.
+        To do this:
+        <router-link
+          :to="{ name: 'contact-qr' }"
+          class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
+        >
+          1. Show Them Your Identity Info</router-link
+        >
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
         >
-        and then
-        <router-link :to="{ name: 'account' }" class="text-blue-500">
-          check your limits.</router-link
+          2. Check Your Limits</router-link
         >
       </div>
 
       <div v-else>
         <!-- activeDid && isRegistered -->
-        <h2 class="text-xl font-bold">Record Something Given</h2>
+        <h2 class="text-xl font-bold mb-4">Record Something Given</h2>
 
         <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
           <li @click="openDialog()">