From c344d37bd9b4017cf3d561b44f9424ff9ad424ed Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 9 Nov 2023 15:45:26 +0800
Subject: [PATCH] Prettified identifier and register notices up top

---
 package-lock.json      |  4 ++--
 src/views/HomeView.vue | 40 ++++++++++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f584506..1745080 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kickstart-for-time-pwa",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kickstart-for-time-pwa",
-      "version": "0.1.0",
+      "version": "0.1.3",
       "dependencies": {
         "@ethersproject/hdnode": "^5.7.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5aaeac6..b785982 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -8,22 +8,38 @@
 
     <!-- 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>