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 1/7] 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()">

From 18e00b95c751f4bc8b3313fa2cfb8c5808432878 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 13 Dec 2023 17:41:27 +0800
Subject: [PATCH 2/7] Fixed size and alignment of QR code button

---
 src/views/ContactsView.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 01df405b..a28ee1e6 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -19,12 +19,13 @@
     </div>
 
     <!-- New Contact -->
-    <div class="mb-4 flex">
-      <span class="self-center bg-slate-500 text-white px-1.5 py-1 rounded-md">
-        <router-link :to="{ name: 'contact-qr' }">
-          <fa icon="qrcode" class="fa-fw" />
-        </router-link>
-      </span>
+    <div class="mb-4 flex items-stretch">
+      <router-link
+        :to="{ name: 'contact-qr' }"
+        class="flex items-center bg-slate-500 text-white px-1.5 py-1 mr-1 rounded-md"
+      >
+        <fa icon="qrcode" class="fa-fw text-2xl" />
+      </router-link>
       <input
         type="text"
         placeholder="DID, Name, Public Key (base 16 or 64)"

From e533cd3d34fdf704142d19b6cb7e66e19dac1274 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 13 Dec 2023 18:16:15 +0800
Subject: [PATCH 3/7] Visual improvements to "set name" button

---
 src/views/AccountViewView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 271277d2..a8e2abaa 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -58,9 +58,9 @@
       <span v-else>
         <router-link
           :to="{ name: 'new-edit-account' }"
-          class="text-xs bg-blue-500 text-white px-1.5 py-1 rounded-md"
+          class="block w-full text-center text-md text-slate-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
         >
-          (set name)
+          (Set Your Name)
         </router-link>
       </span>
 

From c2839e8a9923a046391ecfefed21a816f0284111 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 13 Dec 2023 18:22:15 +0800
Subject: [PATCH 4/7] Mobile-style flushed-right toggle switches

---
 src/views/AccountViewView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index a8e2abaa..fe2c38e5 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -89,7 +89,7 @@
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <label
         for="toggleNotifications"
-        class="flex items-center cursor-pointer"
+        class="flex items-center justify-between cursor-pointer"
         @click="
           !toggleNotifications
             ? this.$notify(
@@ -129,7 +129,7 @@
       </label>
       <label
         for="toggleMuteNotifications"
-        class="flex items-center cursor-pointer mt-4"
+        class="flex items-center justify-between cursor-pointer mt-4"
         @click="
           this.$notify(
             {
@@ -280,7 +280,7 @@
 
       <label
         for="toggleShowAmounts"
-        class="flex items-center cursor-pointer py-2"
+        class="flex items-center justify-between cursor-pointer py-2"
         @click="handleChange"
       >
         <!-- label -->

From 0484dfb253cd4d2aa3c7dc15016bf518d8d8c5cf Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 13 Dec 2023 18:37:03 +0800
Subject: [PATCH 5/7] Spacing and typography fixes

---
 src/views/AccountViewView.vue | 54 +++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index fe2c38e5..9c1037bd 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -179,30 +179,42 @@
     </a>
     <a ref="downloadLink" />
 
-    <div v-if="activeDid" class="flex py-2">
-      <button class="text-center text-md text-blue-500" @click="checkLimits()">
+    <div v-if="activeDid" class="my-8">
+      <h3 class="text-sm uppercase font-semibold mb-3">Rate Limits</h3>
+      <button
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        @click="checkLimits()"
+      >
         Check Limits
       </button>
       <!-- show spinner if loading limits -->
-      <div v-if="loadingLimits" class="ml-2">
-        Checking... <fa icon="spinner" class="fa-spin"></fa>
+      <div v-if="loadingLimits" class="text-center mb-4">
+        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
       </div>
-      <div class="ml-2">
+      <div class="mb-4">
         {{ limitsMessage }}
       </div>
-      <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
-        <span class="font-bold">Rate Limits</span>
-        <p>
-          You have done {{ limits.doneClaimsThisWeek }} claims out of
-          {{ limits.maxClaimsPerWeek }} for this week. Your claims counter
-          resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
+      <div v-if="!!limits?.nextWeekBeginDateTime">
+        <p class="mb-3 text-sm">
+          You have done <b>{{ limits.doneClaimsThisWeek }}</b> claims out of
+          <b>{{ limits.maxClaimsPerWeek }}</b> for this week. Your claims
+          counter resets at
+          <b class="whitespace-nowrap">{{
+            readableTime(limits.nextWeekBeginDateTime)
+          }}</b>
         </p>
-        <p>
-          You have done {{ limits.doneRegistrationsThisMonth }} registrations
-          out of {{ limits.maxRegistrationsPerMonth }} for this month. (You can
-          register nobody on your first day, and after that only one a day in
-          your first month.) Your registration counter resets at
-          {{ readableTime(limits.nextMonthBeginDateTime) }}
+        <p class="text-sm">
+          You have done
+          <b>{{ limits.doneRegistrationsThisMonth }}</b> registrations out of
+          <b>{{ limits.maxRegistrationsPerMonth }}</b> for this month.
+          <i
+            >(You can register nobody on your first day, and after that only one
+            a day in your first month.)</i
+          >
+          Your registration counter resets at
+          <b class="whitespace-nowrap">
+            {{ readableTime(limits.nextMonthBeginDateTime) }}
+          </b>
         </p>
       </div>
     </div>
@@ -216,13 +228,13 @@
       Advanced
     </h3>
     <div v-if="showAdvanced">
-      <p>
+      <p class="text-rose-600 mb-8">
         Beware: the features here can be confusing and even change data in ways
         you do not expect. But we support your freedoms!
       </p>
 
       <!-- Deep Identity Details -->
-      <h2 class="text-slate-500 text-sm font-bold mb-2 py-2">
+      <h2 class="text-sm uppercase font-semibold mb-3">
         Deep Identity Details
       </h2>
       <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
@@ -284,9 +296,7 @@
         @click="handleChange"
       >
         <!-- label -->
-        <h2 class="text-slate-500 text-sm font-bold mb-2">
-          Show amounts given with contacts
-        </h2>
+        <h2>Show amounts given with contacts</h2>
         <!-- toggle -->
         <div class="relative ml-2">
           <!-- input -->

From ab523639a5b5d58a3c82f9e93bd5c75061f601f2 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 13 Dec 2023 18:48:45 +0800
Subject: [PATCH 6/7] Normalized button visual styles

---
 src/views/AccountViewView.vue | 49 +++++++++++++++--------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 9c1037bd..87ba3cb1 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -292,7 +292,7 @@
 
       <label
         for="toggleShowAmounts"
-        class="flex items-center justify-between cursor-pointer py-2"
+        class="flex items-center justify-between cursor-pointer my-4"
         @click="handleChange"
       >
         <!-- label -->
@@ -315,35 +315,28 @@
         </div>
       </label>
 
-      <div class="flex py-2">
-        <button class="text-blue-500">
-          <router-link :to="{ name: 'statistics' }" class="block text-center">
-            See Global Animated History of Giving
-          </router-link>
-        </button>
-      </div>
+      <router-link
+        :to="{ name: 'statistics' }"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        See Global Animated History of Giving
+      </router-link>
 
-      <div class="flex py-2">
-        <button class="text-blue-500">
-          <!-- id used by puppeteer test script -->
-          <router-link
-            id="switch-identity-link"
-            :to="{ name: 'identity-switcher' }"
-            class="block text-center"
-          >
-            Switch Identity / No Identity
-          </router-link>
-        </button>
-      </div>
+      <!-- id used by puppeteer test script -->
+      <router-link
+        id="switch-identity-link"
+        :to="{ name: 'identity-switcher' }"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        Switch Identity / No Identity
+      </router-link>
 
-      <div class="flex py-2">
-        <button
-          @click="alertWebPushSubscription()"
-          class="block text-center text-md bg-blue-500 text-white px-1.5 py-2 rounded-md mr-2 mb-2"
-        >
-          Show Subscription from Web Push Server
-        </button>
-      </div>
+      <button
+        @click="alertWebPushSubscription()"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        Show Subscription from Web Push Server
+      </button>
 
       <div class="flex py-4">
         <h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2>

From 8ed74b71f233aca316163f2085533c8bf8c1b229 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Wed, 13 Dec 2023 09:16:45 -0700
Subject: [PATCH 7/7] change colors and add spacing to make buttons obvious

---
 src/views/HomeView.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8994a9c1..a6005c90 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -13,11 +13,11 @@
         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.
+          You need an <b>identifier</b> before you can record anyone's 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"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
         >
           Create Your Identifier</router-link
         >
@@ -27,17 +27,17 @@
         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:
+        Someone must register your account before you can record anyone's
+        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"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 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"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
         >
           2. Check Your Limits</router-link
         >