put button directly on contacts page to show the given totals

src/views/ContactsView.vue

@@ -41,24 +41,17 @@
       </button>
     </div>
 
-    <div class="flex justify-between" v-if="showGiveNumbers">
     <div class="w-full text-right">
-        <!--
-        Hours to Add:
-        <input
-          class="border rounded border-slate-400 w-24 text-right"
-          type="text"
-          placeholder="1"
-          v-model="hourInput"
-        />
-        <br />
-        <input
-          class="border rounded border-slate-400 w-48"
-          type="text"
-          placeholder="Description"
-          v-model="hourDescriptionInput"
-        />
-        -->
+      <button
+        href=""
+        class="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 py-1 rounded-md"
+        @click="toggleShowContactAmounts()"
+      >
+        {{ showGiveNumbers ? "Hide Given Numbers" : "Show Given Numbers" }}
+      </button>
+    </div>
+    <div class="flex justify-between mt-1" v-if="showGiveNumbers">
+      <div class="w-full text-right">
         In the following, only the most recent hours are included. To see more,
         click
         <span
@@ -69,16 +62,16 @@
         <br />
         <button
           href=""
-          class="text-center text-md text-white px-1.5 py-2 rounded-md mt-1"
+          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
           v-bind:class="showGiveAmountsClassNames()"
           @click="toggleShowGiveTotals()"
         >
           {{
             showGiveTotals
-              ? "Showing Total"
+              ? "Showing Totals"
               : showGiveConfirmed
-                ? "Confirmed"
-                : "Unconfirmed"
+                ? "Showing Confirmed Amounts"
+                : "Showing Unconfirmed Amounts"
           }}
         </button>
       </div>
@@ -1188,6 +1181,30 @@ export default class ContactsView extends Vue {
       .then(() => (this.contactEdit = null));
   }
 
+  public async toggleShowContactAmounts() {
+    const newShowValue = !this.showGiveNumbers;
+    try {
+      await db.open();
+      db.settings.update(MASTER_SETTINGS_KEY, {
+        showContactGivesInline: newShowValue,
+      });
+    } catch (err) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Updating Contact Setting",
+          text: "The setting may not have saved. Try again, maybe after restarting the app.",
+        },
+        -1,
+      );
+      console.error(
+        "Telling user to try again after contact-amounts setting update because:",
+        err,
+      );
+    }
+    this.showGiveNumbers = newShowValue;
+  }
   public toggleShowGiveTotals() {
     if (this.showGiveTotals) {
       this.showGiveTotals = false;
@@ -1203,9 +1220,12 @@ export default class ContactsView extends Vue {
 
   public showGiveAmountsClassNames() {
     return {
-      "bg-slate-500": this.showGiveTotals,
-      "bg-green-600": !this.showGiveTotals && this.showGiveConfirmed,
-      "bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed,
+      "from-slate-400": this.showGiveTotals,
+      "to-slate-700": this.showGiveTotals,
+      "from-green-400": !this.showGiveTotals && this.showGiveConfirmed,
+      "to-green-700": !this.showGiveTotals && this.showGiveConfirmed,
+      "from-yellow-400": !this.showGiveTotals && !this.showGiveConfirmed,
+      "to-yellow-700": !this.showGiveTotals && !this.showGiveConfirmed,
     };
   }
 }