deps: npm audit fix to resolve vulnerabilities 1 low, 3 moderate, 1 high

There are still 9 moderate severity vulnerabilities, but I will work on those independentally because they may involve updating to library version that have breaking changes.

CHANGELOG.md

@@ -10,14 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nothing
 
 
-## [0.3.2] - 2024.03.17
+## [0.3.4] - 2024.03.21
 ### Added
-- Photo on gift record
+- Photo on gift records
 ### Fixed
 - Environment variable for BVC meetings project
+- Environment variables and build enhancements for test vs prod
 ### Changed in DB or environment
 - New environment variable for image API server
-- Test that a new browser session will get the right default API.
+- Test that a new browser session will get the right default APIs.
 - Test that a new browser session will send the right BVC meetings project.
 
 

README.md

@@ -42,7 +42,7 @@ npm run lint
 ```
 # (See .env.development for more details.)
 # The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
-APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VUE_APP_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
+TIME_SAFARI_APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VUE_APP_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
 ```
 
   * Production
@@ -51,7 +51,7 @@ APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorse
 npm run build
 ```
 
-* Get on the server and back up the DB and the time-safari folder.
+* Get on the server and back up 3 DBs and the time-safari folder.
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari",
-      "version": "0.3.2",
+      "version": "0.3.4",
       "dependencies": {
         "@dicebear/collection": "^5.3.5",
         "@dicebear/core": "^5.3.5",
@@ -16240,9 +16240,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -17449,9 +17449,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "optional": true,
       "peer": true
     },
@@ -18941,9 +18941,9 @@
       "peer": true
     },
     "node_modules/jose": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.4.tgz",
-      "integrity": "sha512-W+oqK4H+r5sITxfxpSU+MMdr/YSWGvgZMQDIsNoBDGGy4i7GBPTtvFKibQzW06n3U3TqHjhvBJsirShsEJ6eeQ==",
+      "version": "4.15.5",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.5.tgz",
+      "integrity": "sha512-jc7BFxgKPKi94uOvEmzlSWFFe2+vASyXaKUpdQKatWAESU2MWjDfFf0fdfc83CDKcA5QecabZeNLyfhe3yKNkg==",
       "optional": true,
       "funding": {
         "url": "https://github.com/sponsors/panva"
@@ -27295,9 +27295,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.26.3",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.3.tgz",
-      "integrity": "sha512-H7n2zmKEWgOllKkIUkLvFmsJQj062lSm3uA4EYApG8gLuiOM0/go9bIoC3HVaSnfg4xunowDE2i9p8drkXuvDw==",
+      "version": "5.28.3",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.3.tgz",
+      "integrity": "sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==",
       "optional": true,
       "dependencies": {
         "@fastify/busboy": "^2.0.0"
@@ -28018,9 +28018,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "dependencies": {
         "colorette": "^2.0.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

project.task.yaml

@@ -1,15 +1,24 @@
 
 tasks :
 
+- bug - landscape doesn't show full camera
+- bug - got blank screen and errors on iPhone with no bottom tabs
+- add to readme - check version, close tabs & restart phone if necessary
 - bug maybe - a new give remembers the previous project
 - alert & stop if give amount < 0
+- add warning that all data (except ID) is public
 - onboarding video
+- .2 when adding a claim on home screen, push that claim to the top of the list
+
+- 24 allow a person record with interests, including location; purpose? contact methods? enhance other connections the same? (suggestion from Philippines) assignee-group:ui
 
 - .1 on feed, don't show "to someone anonymous" if it's to a project
-- .1 on ideas, put an "x" to close it
+- .1 on ideas, put an "x" to close it assignee-group:ui
+- 16 save data backups in Google
+- 16 generate and use passkeys for identities
 
 - .2 fix give dialog from "more contacts" off home page to allow giving to this user
-- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page
+- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page assignee-group:ui
 - .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
 - .2 don't show a warning on a totally new project when the authorized agent is set
 - .2 anchor hash into BTC
@@ -27,9 +36,9 @@ tasks :
 
 - 24 compelling UI for statistics (eg. World?)
 
-- 01 in the feed, group by project or contact or topic or time/$ (via BC)
+- 01 in the feed, group by project or contact or topic or time/$ (via BC); new projects, offers, search area, etc assignee-group:ui
 - 01 separate not-on-platform vs totally anonymous; terminology "unidentified"?
-- .2 add links between projects
+- .2 add links between projects assignee-group:ui
 - 24 make the contact browsing on the front page something that invites more action
 
 - .5 change server plan & project endpoints to use jwtId as identifier rather than rowid
@@ -55,7 +64,7 @@ tasks :
 - .1 hide project-create button on project page if not registered
 - .1 hide offer & give buttons on project list page if not registered
 - .1 add cursor-pointer on the icons for giving on the project page, and on the list of projects on the discover page
-- .2 record when InfiniteScroll hits the end of the list and don't trigger any more loads
+- .2 record when InfiniteScroll hits the end of the list and don't trigger any more loads (feed, project list, give & offer lists)
 
 - bug - turning notifications on from the help screen did not stay, though account screen toggle did stay (From Jason on iPhone.)
 - refactor - supply the projectId to the OfferDialog just like we do with the GiftedDialog offerId (in the "open" method, maybe as well as an attribute)
@@ -68,11 +77,9 @@ tasks :
 - 01 show my VCs - most interesting, or via search
 - 04 allow user to download & prove chains of VCs, mine + ones I can see about me from others
 
-- show feed of offers, new projects, etc -- maybe limited to my search area
-
 - revenue to support server operation
 
-- copy button for seed
+- .1 copy button for seed
 - .5 If notifications are not enabled, add message to front page with link/button to enable
 - make server endpoint for full English description of limits
 - create a help-desk document & add screenshots
@@ -119,6 +126,7 @@ tasks :
 - .5 show seed phrase in a QR code for transfer to another device
 - .5 on DiscoverView, switch to a filter UI (eg. just from friend
 - .5 don't show "Offer" on project screen if they aren't registered
+- 01 especially for iOS, check for new version & update, eg. https://stackoverflow.com/questions/52221805/any-way-yet-to-auto-update-or-just-clear-the-cache-on-a-pwa-on-ios
 
 - 24 Move to Vite
 - 32 accept images for projects

src/components/GiftedDialog.vue

@@ -61,13 +61,13 @@
         Sign & Send to publish to the world
       </p>
       <button
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
         @click="confirm"
       >
         Sign &amp; Send
       </button>
       <button
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
         @click="cancel"
       >
         Cancel

src/components/GiftedPhotoDialog.vue

@@ -1,18 +1,15 @@
 <template>
   <div v-if="visible" class="dialog-overlay z-[60]">
-    <!-- Breadcrumb -->
     <div class="dialog relative">
-      <!-- Back -->
       <div class="text-lg text-center font-light relative z-50">
-        <!-- Heading -->
-        <h1
+        <div
           id="ViewHeading"
           class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
         >
           <span v-if="uploading"> Uploading... </span>
           <span v-else-if="blob"> Look Good? </span>
           <span v-else> Say "Cheese"! </span>
-        </h1>
+        </div>
 
         <div
           class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
@@ -31,18 +28,20 @@
         >
           <button
             @click="uploadImage"
-            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md"
           >
             <span>Upload</span>
           </button>
           <button
             @click="retryImage"
-            class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded-full"
+            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md"
           >
             <span>Retry</span>
           </button>
         </div>
-        <img :src="URL.createObjectURL(blob)" class="mt-2 w-full" />
+        <div class="flex justify-center">
+          <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
+        </div>
       </div>
       <div v-else>
         <!--
@@ -53,7 +52,6 @@
           <div
             class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4"
           >
-            <!-- Button -->
             <button
               @click="takeImage"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
@@ -85,6 +83,9 @@ export default class GiftedPhotoDialog extends Vue {
   activeDid = "";
   blob: Blob | null = null;
   setImage: (arg: string) => void = () => {};
+  imageHeight?: number = window.innerHeight / 2;
+  imageWidth?: number = window.innerWidth / 2;
+  imageWarning = ".";
   uploading = false;
   visible = false;
 
@@ -112,17 +113,64 @@ export default class GiftedPhotoDialog extends Vue {
 
   open(setImageFn: (arg: string) => void) {
     this.visible = true;
+    const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
+    if (bottomNav) {
+      bottomNav.style.display = "none";
+    }
     this.setImage = setImageFn;
   }
 
   close() {
     this.visible = false;
+    const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
+    if (bottomNav) {
+      bottomNav.style.display = "";
+    }
     this.blob = null;
   }
 
   async takeImage(/* payload: MouseEvent */) {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    this.blob = await cameraComponent?.snapshot(); // png is default; if that changes, change extension in formData.append
+
+    /**
+     * This logic to set the image height & width correctly.
+     * Without it, the portrait orientation ends up with an image that is stretched horizontally.
+     * Note that it's the same with raw browser Javascript; see the "drawImage" example below.
+     * Now that I've done it, I can't explain why it works.
+     */
+    let imageHeight = cameraComponent?.resolution?.height;
+    let imageWidth = cameraComponent?.resolution?.width;
+    const initialImageRatio = imageWidth / imageHeight;
+    const windowRatio = window.innerWidth / window.innerHeight;
+    if (initialImageRatio > 1 && windowRatio < 1) {
+      // the image is wider than it is tall, and the window is taller than it is wide
+      // For some reason, mobile in portrait orientation renders a horizontally-stretched image.
+      // We're gonna force it opposite.
+      imageHeight = cameraComponent?.resolution?.width;
+      imageWidth = cameraComponent?.resolution?.height;
+    } else if (initialImageRatio < 1 && windowRatio > 1) {
+      // the image is taller than it is wide, and the window is wider than it is tall
+      // Haven't seen this happen, but we'll do it just in case.
+      imageHeight = cameraComponent?.resolution?.width;
+      imageWidth = cameraComponent?.resolution?.height;
+    }
+    const newImageRatio = imageWidth / imageHeight;
+    if (newImageRatio < windowRatio) {
+      // the image is a taller ratio than the window, so fit the height first
+      imageHeight = window.innerHeight / 2;
+      imageWidth = imageHeight * newImageRatio;
+    } else {
+      // the image is a wider ratio than the window, so fit the width first
+      imageWidth = window.innerWidth / 2;
+      imageHeight = imageWidth / newImageRatio;
+    }
+
+    // The resolution is only necessary because of that mobile portrait-orientation case.
+    // The mobile emulation in a browser shows something stretched vertically, but real devices work fine.
+    this.blob = await cameraComponent?.snapshot({
+      height: imageHeight,
+      width: imageWidth,
+    }); // png is default; if that changes, change extension in formData.append
     if (!this.blob) {
       this.$notify(
         {
@@ -141,6 +189,54 @@ export default class GiftedPhotoDialog extends Vue {
     this.blob = null;
   }
 
+  /****
+
+   Here's an approach to photo capture without a library. It has similar quirks.
+   Now that we've fixed styling for simple-vue-camera, it's not critical to refactor. Maybe someday.
+
+   <button id="start-camera" @click="cameraClicked">Start Camera</button>
+   <video id="video" width="320" height="240" autoplay></video>
+   <button id="snap-photo" @click="photoSnapped">Snap Photo</button>
+   <canvas id="canvas" width="320" height="240"></canvas>
+
+  async cameraClicked() {
+    console.log("camera_button clicked");
+    const video = document.querySelector("#video");
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: false,
+    });
+    if (video instanceof HTMLVideoElement) {
+      video.srcObject = stream;
+    }
+  }
+  photoSnapped() {
+    console.log("snap_photo clicked");
+    const video = document.querySelector("#video");
+    const canvas = document.querySelector("#canvas");
+    if (
+      canvas instanceof HTMLCanvasElement &&
+      video instanceof HTMLVideoElement
+    ) {
+      canvas
+        ?.getContext("2d")
+        ?.drawImage(video, 0, 0, canvas.width, canvas.height);
+      // ... or set the blob:
+      // canvas?.toBlob(
+      //   (blob) => {
+      //     this.blob = blob;
+      //   },
+      //   "image/jpeg",
+      //   1,
+      // );
+
+      // data url of the image
+      const image_data_url = canvas?.toDataURL("image/jpeg");
+      console.log(image_data_url);
+    }
+  }
+  ****/
+
   async uploadImage() {
     this.uploading = true;
     const identifier = await getIdentity(this.activeDid);

src/components/GiftedPrompts.vue

@@ -33,7 +33,7 @@
                 <span class="flex justify-between">
                   <span />
                   <button
-                    class="text-center bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4"
+                    class="text-center 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-md mt-4"
                     @click="nextIdeaPastContacts()"
                   >
                     Skip Contacts <fa icon="forward" />
@@ -52,7 +52,7 @@
         </span>
       </span>
       <button
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4"
+        class="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-md mt-4"
         @click="cancel"
       >
         That's it!

src/components/OfferDialog.vue

@@ -51,13 +51,13 @@
         Sign & Send to publish to the world
       </p>
       <button
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
         @click="confirm"
       >
         Sign &amp; Send
       </button>
       <button
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
         @click="cancel"
       >
         Cancel

src/views/AccountViewView.vue

@@ -37,7 +37,7 @@
       <span>
         <router-link
           :to="{ name: 'help' }"
-          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
+          class="text-xs 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-1.5 py-1 rounded-md ml-1"
         >
           Help
         </router-link>
@@ -55,7 +55,7 @@
       </p>
       <router-link
         :to="{ name: 'start' }"
-        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
+        class="inline-block text-md uppercase bg-gradient-to-b from-amber-400 to-amber-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
       >
         Create An Identifier
       </router-link>
@@ -105,7 +105,7 @@
       </p>
       <router-link
         :to="{ name: 'contact-qr' }"
-        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
+        class="inline-block text-md uppercase bg-gradient-to-b from-amber-400 to-amber-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
       >
         Share Your Info
       </router-link>
@@ -192,7 +192,7 @@
         </p>
       </div>
       <button
-        class="block float-right w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
+        class="block float-right w-fit 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-4 py-2 rounded-md mt-2"
         @click="checkLimits()"
       >
         Recheck Limits
@@ -204,14 +204,14 @@
       <router-link
         :to="{ name: 'seed-backup' }"
         v-if="activeDid"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2 mt-2"
+        class="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-md mb-2 mt-2"
       >
         Backup Identifier Seed
       </router-link>
 
       <button
         v-bind:class="computedStartDownloadLinkClassNames()"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+        class="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-md mb-6"
         @click="exportDatabase()"
       >
         Download Settings & Contacts
@@ -221,7 +221,7 @@
       <a
         ref="downloadLink"
         v-bind:class="computedDownloadLinkClassNames()"
-        class="block w-full text-center text-md uppercase bg-green-600 text-white px-1.5 py-2 rounded-md"
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
       >
         If no download happened yet, click again here to download now.
       </a>
@@ -302,7 +302,7 @@
       <router-link
         id="switch-identity-link"
         :to="{ name: 'identity-switcher' }"
-        class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-fit 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-4 py-2 rounded-md mb-2"
       >
         Switch Identifier
       </router-link>
@@ -450,9 +450,15 @@
         {{ DEFAULT_PUSH_SERVER }}
       </span>
 
+      <div class="mt-2">
+        <span class="text-slate-500 text-sm font-bold">Image Server URL</span>
+        &nbsp;
+        <span class="text-sm">{{ DEFAULT_IMAGE_API_SERVER }}</span>
+      </div>
+
       <label
         for="toggleShowShortcutBvc"
-        class="flex items-center justify-between cursor-pointer my-4"
+        class="flex items-center justify-between cursor-pointer mt-4"
         @click="toggleShowShortcutBvc"
       >
         <!-- label -->
@@ -482,7 +488,7 @@
           <input type="file" @change="uploadFile" class="ml-2" />
           <div v-if="showContactImport()">
             <button
-              class="block text-center text-md uppercase bg-blue-500 text-white px-1.5 py-2 rounded-md mb-6"
+              class="block text-center text-md 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-1.5 py-2 rounded-md mb-6"
               @click="submitFile()"
             >
               Import Settings & Contacts
@@ -497,7 +503,7 @@
         <button>
           <router-link
             :to="{ name: 'statistics' }"
-            class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+            class="block w-fit 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-md mb-2"
           >
             See Global Animated History of Giving
           </router-link>
@@ -546,12 +552,15 @@ interface IAccount {
 
 const inputFileNameRef = ref<Blob>();
 
-@Component({ components: { QuickNav, TopMessage } })
+@Component({
+  components: { QuickNav, TopMessage },
+})
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   AppConstants = AppString;
   DEFAULT_PUSH_SERVER = DEFAULT_PUSH_SERVER;
+  DEFAULT_IMAGE_API_SERVER = DEFAULT_IMAGE_API_SERVER;
 
   activeDid = "";
   apiServer = "";

src/views/ClaimView.vue

@@ -123,7 +123,7 @@
 
     <div class="columns-3">
       <button
-        class="col-span-1 bg-blue-600 text-white px-4 py-2 rounded-md"
+        class="col-span-1 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-4 py-2 rounded-md"
         v-if="
           libsUtil.isGiveRecordTheUserCanConfirm(
             veriClaim,
@@ -140,7 +140,7 @@
       <button
         v-if="libsUtil.canFulfillOffer(veriClaim)"
         @click="openFulfillGiftDialog()"
-        class="col-span-1 block w-fit text-center text-md bg-blue-600 text-white px-1.5 py-2 rounded-md"
+        class="col-span-1 block w-fit text-center text-md 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-1.5 py-2 rounded-md"
       >
         Affirm Delivery
         <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
@@ -377,7 +377,7 @@
       </p>
       <button
         v-else
-        class="block w-full text-center text-md uppercase bg-blue-600 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md 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-1.5 py-2 rounded-md mb-2"
         @click="showFullClaim(veriClaim.id as string)"
       >
         Load Full Claim Details
@@ -390,7 +390,7 @@
     <a
       :href="apiServer + '/api/claim/' + veriClaim.id"
       target="_blank"
-      class="block w-full text-center text-md uppercase bg-blue-600 text-white px-1.5 py-2 rounded-md mb-2"
+      class="block w-full text-center text-md 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-1.5 py-2 rounded-md mb-2"
     >
       View on the Public Server
     </a>

src/views/ConfirmContactView.vue

@@ -32,12 +32,12 @@
     <div class="mt-8">
       <input
         type="submit"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
         value="Add Contact"
       />
       <button
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
       >
         Cancel
       </button>

src/views/ContactGiftingView.vue

@@ -32,7 +32,7 @@
             <button
               type="button"
               @click="openDialog()"
-              class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"
+              class="block w-full text-center text-sm 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-1.5 rounded-md"
             >
               <fa icon="gift" class="fa-fw"></fa>
             </button>
@@ -57,7 +57,7 @@
             <button
               type="button"
               @click="openDialog(contact)"
-              class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"
+              class="block w-full text-center text-sm 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-1.5 rounded-md"
             >
               <fa icon="gift" class="fa-fw"></fa>
             </button>

src/views/ContactQRScanShowView.vue

@@ -26,7 +26,7 @@
         You aren't sharing your name, so quickly
         <router-link
           :to="{ name: 'new-edit-account' }"
-          class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
+          class="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-1.5 py-1 rounded-md"
         >
           click here to set it for them.
         </router-link>

src/views/ContactScanView.vue

@@ -67,12 +67,12 @@
     <div class="mt-8">
       <input
         type="submit"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
         value="Look Up Contact"
       />
       <button
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
       >
         Cancel
       </button>

src/views/ContactsView.vue

@@ -11,7 +11,7 @@
       <span>
         <a
           @click="showHintsForOnboarding()"
-          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
+          class="text-xs 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-1.5 py-1 rounded-md ml-1"
         >
           Onboarding Guide
         </a>
@@ -22,7 +22,7 @@
     <div class="mt-4 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"
+        class="flex items-center 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-1 mr-1 rounded-md"
       >
         <fa icon="qrcode" class="fa-fw text-2xl" />
       </router-link>
@@ -75,7 +75,7 @@
         <br />
         (Only most recent hours included. To see more, click
         <span
-          class="text-sm uppercase bg-slate-500 text-white px-1 py-1 rounded-md"
+          class="text-sm 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 py-1 rounded-md"
         >
           <fa icon="file-lines" class="fa-fw" />
         </span>
@@ -100,7 +100,7 @@
             ></EntityIcon>
             {{ contact.name || AppString.NO_CONTACT_NAME }}
             <button
-              class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md"
+              class="text-sm 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 rounded-md"
               @click="
                 contactEdit = contact;
                 contactNewName = contact.name;
@@ -137,7 +137,7 @@
             <div v-if="activeDid">
               <button
                 v-if="contact.seesMe"
-                class="text-sm uppercase bg-slate-500 text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
+                class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
                 @click="setVisibility(contact, false, true)"
                 title="They can see you"
               >
@@ -145,14 +145,14 @@
               </button>
               <button
                 v-else
-                class="text-sm uppercase bg-slate-500 text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
+                class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
                 @click="setVisibility(contact, true, true)"
                 title="They cannot see you"
               >
                 <fa icon="eye-slash" class="fa-fw" />
               </button>
               <button
-                class="text-sm uppercase bg-slate-500 text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
+                class="text-sm 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 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
                 @click="checkVisibility(contact)"
                 title="Check Visibility"
                 v-if="activeDid"
@@ -161,7 +161,7 @@
               </button>
               <button
                 @click="register(contact)"
-                class="text-sm uppercase bg-slate-500 text-white ml-6 px-2 py-1.5 rounded-md"
+                class="text-sm 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 ml-6 px-2 py-1.5 rounded-md"
                 v-if="activeDid"
                 title="Registration"
               >
@@ -176,7 +176,7 @@
 
             <button
               @click="deleteContact(contact)"
-              class="text-sm uppercase bg-red-600 text-white ml-24 px-2 py-1.5 rounded-md"
+              class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-24 px-2 py-1.5 rounded-md"
               title="Delete"
             >
               <fa icon="trash-can" class="fa-fw" />
@@ -187,7 +187,7 @@
               class="ml-auto flex gap-1.5"
             >
               <button
-                class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-l-md"
+                class="text-sm 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-2 py-1.5 rounded-l-md"
                 @click="onClickAddGive(activeDid, contact.did)"
                 :title="givenByMeDescriptions[contact.did] || ''"
               >
@@ -229,7 +229,7 @@
                   name: 'contact-amounts',
                   query: { contactDid: contact.did },
                 }"
-                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                class="text-sm 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-2 py-1.5 rounded-md"
                 title="See more given activity"
               >
                 <fa icon="file-lines" class="fa-fw" />

src/views/GiftedDetails.vue

@@ -65,7 +65,7 @@
       <span v-else>
         <fa
           icon="camera"
-          class="bg-blue-500 text-white px-2 py-2 rounded-md"
+          class="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-2 py-2 rounded-md"
           @click="openPhotoDialog"
         />
       </span>
@@ -94,13 +94,13 @@
       Sign & Send to publish to the world
     </p>
     <button
-      class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+      class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
       @click="confirm"
     >
       Sign &amp; Send
     </button>
     <button
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+      class="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-md"
       @click="cancel"
     >
       Cancel

src/views/HelpNotificationsView.vue

@@ -31,7 +31,7 @@
           If this works then you're all set.
           <button
             @click="sendTestWebPushMessage(true)"
-            class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+            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-md mb-2"
           >
             Send Yourself a Test Web Push Message (Through Push Server but
             Skipping Client Filter)
@@ -233,7 +233,7 @@
       <h2 class="text-xl font-semibold mt-4">Tests</h2>
       <button
         @click="showTestNotification()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
+        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-md mt-4 mb-2"
       >
         Send Test Notification Directly to Device (Not Through Push Server)
       </button>
@@ -246,7 +246,7 @@
 
       <button
         @click="alertWebPushSubscription()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
+        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-md mt-4 mb-2"
       >
         Show Web Push Subscription Info
       </button>
@@ -259,7 +259,7 @@
 
       <button
         @click="sendTestWebPushMessage(true)"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
+        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-md mt-4 mb-2"
       >
         Send Yourself a Test Web Push Message (Through Push Server but Skipping
         Client Filter)
@@ -272,7 +272,7 @@
 
       <button
         @click="sendTestWebPushMessage()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
+        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-md mt-4 mb-2"
       >
         Send Yourself a Test Web Push Message (Through Push Server and Client
         Filter)

src/views/HelpView.vue

@@ -310,8 +310,9 @@
         </li>
       </ul>
       <p>
-        If you still have problems, you can clear the cache and even uninstall
-        and reinstall the app, but be sure to have your backups ready or be
+        If you still have problems, you can clear the cache (see "erase my data" above)
+        and even uninstall and reinstall the app
+        -- just be sure to have your backups ready or be
         prepared to restart with a new identity and recreate your network.
         Nobody else has access to your identity or contact information because
         this app is designed to give you full control over your data.

src/views/HomeView.vue

@@ -62,7 +62,7 @@
     <div v-if="showShortcutBvc" class="mb-4">
       <router-link
         :to="{ name: 'quick-action-bvc' }"
-        class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+        class="block text-center text-md font-bold 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 mt-2 px-2 py-3 rounded-md"
       >
         Bountiful Voluntaryist Community Actions</router-link
       >
@@ -85,7 +85,7 @@
         </p>
         <router-link
           :to="{ name: 'start' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+          class="block text-center text-md font-bold 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 mt-2 px-2 py-3 rounded-md"
         >
           Create An Identifier</router-link
         >
@@ -99,7 +99,7 @@
         giving.
         <router-link
           :to="{ name: 'contact-qr' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+          class="block text-center text-md font-bold 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 mt-2 px-2 py-3 rounded-md"
         >
           Show Them Your Identifier Info</router-link
         >
@@ -152,13 +152,13 @@
           <router-link
             v-if="allContacts.length >= 7"
             :to="{ name: 'contact-gives' }"
-            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-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
           >
             Choose From All Contacts
           </router-link>
           <button
             @click="openGiftedPrompts()"
-            class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md"
+            class="block text-center text-md font-bold 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-2 py-3 rounded-md"
           >
             Ideas...
           </button>

src/views/IdentitySwitcherView.vue

@@ -65,13 +65,13 @@
     <router-link
       id="start-link"
       :to="{ name: 'start' }"
-      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+      class="block text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
     >
       Add Another Identity&hellip;
     </router-link>
     <a
       href="#"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
+      class="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-md mb-8"
       @click="switchAccount('0')"
     >
       No Identity

src/views/ImportAccountView.vue

@@ -58,14 +58,14 @@
     <div class="mt-8">
       <button
         @click="fromMnemonic()"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
       >
         Import
       </button>
       <button
         @click="onCancelClick()"
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
       >
         Cancel
       </button>

src/views/ImportDerivedAccountView.vue

@@ -51,14 +51,14 @@
     <div class="mt-8">
       <button
         @click="incrementDerivation()"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
       >
         Increment and Import
       </button>
       <button
         @click="onCancelClick()"
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
       >
         Cancel
       </button>

src/views/NewEditAccountView.vue

@@ -24,7 +24,7 @@
     <div class="mt-8">
       <button
         type="button"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
         @click="onClickSaveChanges()"
       >
         Save Changes
@@ -32,7 +32,7 @@
       <!-- SHOW ME instead while processing saving changes -->
       <button
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
         @click="onClickCancel()"
       >
         Cancel

src/views/NewEditProjectView.vue

@@ -106,7 +106,7 @@
     <div class="mt-8">
       <button
         :disabled="isHiddenSave"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
         @click="onSaveProjectClick()"
       >
         <!-- SHOW if in idle state -->
@@ -121,7 +121,7 @@
       </button>
       <button
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
         @click="onCancelClick()"
       >
         Cancel

src/views/ProjectViewView.vue

@@ -105,7 +105,7 @@
       <button
         v-if="activeDid === issuer || activeDid === agentDid"
         type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        class="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-md"
         @click="onEditClick()"
       >
         Edit
@@ -116,7 +116,7 @@
       <div class="text-center">
         <button
           @click="openOfferDialog()"
-          class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
+          class="block w-full text-lg font-bold 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-2 py-3 rounded-md"
         >
           Offer (maybe with conditions)...
         </button>
@@ -176,7 +176,7 @@
       <a
         v-if="allContacts.length >= 7"
         @click="onClickAllContactsGifting()"
-        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-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
       >
         Show More Contacts&hellip;
       </a>

src/views/QuickActionBvcBeginView.vue

@@ -49,14 +49,14 @@
     >
       <button
         @click="record()"
-        class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md w-56"
+        class="block text-center text-md font-bold 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-2 py-3 rounded-md w-56"
       >
         Sign & Send
       </button>
     </div>
     <div v-else class="flex justify-center mt-4">
       <button
-        class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md w-56"
+        class="block text-center text-md font-bold 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-2 py-3 rounded-md w-56"
       >
         Select Your Actions
       </button>

src/views/QuickActionBvcEndView.vue

@@ -109,14 +109,14 @@
     >
       <button
         @click="record()"
-        class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md w-56"
+        class="block text-center text-md font-bold 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-2 py-3 rounded-md w-56"
       >
         Sign & Send
       </button>
     </div>
     <div v-else class="flex justify-center mt-4">
       <button
-        class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md w-56"
+        class="block text-center text-md font-bold 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-2 py-3 rounded-md w-56"
       >
         Choose What To Confirm
       </button>

src/views/QuickActionBvcView.vue

@@ -22,13 +22,13 @@
     <div>
       <router-link
         :to="{ name: 'quick-action-bvc-begin' }"
-        class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+        class="block text-center text-md font-bold 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 mt-2 px-2 py-3 rounded-md"
       >
         Beginning of Meeting
       </router-link>
       <router-link
         :to="{ name: 'quick-action-bvc-end' }"
-        class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+        class="block text-center text-md font-bold 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 mt-2 px-2 py-3 rounded-md"
       >
         End of Meeting
       </router-link>

src/views/SeedBackupView.vue

@@ -22,7 +22,7 @@
       <span>
         <router-link
           :to="{ name: 'help' }"
-          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
+          class="text-xs 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-1.5 py-1 rounded-md ml-1"
         >
           Help
         </router-link>
@@ -48,7 +48,7 @@
 
       <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
         <button
-          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+          class="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-md"
           @click="showSeedPhrase"
         >
           Reveal my Seed Phrase

src/views/StartView.vue

@@ -36,20 +36,20 @@
       </p>
       <a
         @click="onClickYes()"
-        class="block w-full text-center text-lg uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
+        class="block w-full 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-2 py-3 rounded-md"
       >
         Yes, generate one
       </a>
       <a
         @click="onClickNo()"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
+        class="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-md mt-2"
       >
         No, I have a seed
       </a>
       <a
         v-if="numAccounts > 0"
         @click="onClickDerive()"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
+        class="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-md mt-2"
       >
         Derive new address from existing seed
       </a>