Merge pull request 'ui-fixes-2024-03' (#111) from ui-fixes-2024-03 into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/pulls/111

src/components/GiftedDialog.vue

@@ -65,8 +65,9 @@
           @click="explainData()"
         />
       </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
-        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"
+          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"
           @click="confirm"
         >
           Sign &amp; Send
@@ -79,6 +80,7 @@
         </button>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">

src/components/GiftedPrompts.vue

@@ -1,7 +1,15 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">Here's one:</h1>
+      <h1 class="text-xl font-bold text-center mb-4 relative">
+        Here's one:
+        <div
+          class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
+          @click="cancel"
+        >
+          <fa icon="xmark" class="w-[1em]"></fa>
+        </div>
+      </h1>
       <span class="flex justify-between">
         <span
           class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"

src/components/OfferDialog.vue

@@ -50,8 +50,9 @@
       <p class="text-center mt-6 mb-2 italic">
         Sign & Send to publish to the world
       </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
-        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"
+          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"
           @click="confirm"
         >
           Sign &amp; Send
@@ -64,6 +65,7 @@
         </button>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">

src/views/AccountViewView.vue

@@ -503,7 +503,7 @@
         <button>
           <router-link
             :to="{ name: 'statistics' }"
-            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"
+            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"
           >
             See Global Animated History of Giving
           </router-link>

src/views/ConfirmContactView.vue

@@ -30,9 +30,10 @@
     </div>
 
     <div class="mt-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <input
           type="submit"
-        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"
+          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"
           value="Add Contact"
         />
         <button
@@ -42,6 +43,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

src/views/ContactScanView.vue

@@ -65,9 +65,10 @@
     />
 
     <div class="mt-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <input
           type="submit"
-        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"
+          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"
           value="Look Up Contact"
         />
         <button
@@ -77,6 +78,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

src/views/GiftedDetails.vue

@@ -98,8 +98,9 @@
         @click="explainData()"
       />
     </p>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
       <button
-      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"
+        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"
         @click="confirm"
       >
         Sign &amp; Send
@@ -110,6 +111,7 @@
       >
         Cancel
       </button>
+    </div>
   </section>
 </template>
 

src/views/HomeView.vue

@@ -118,7 +118,9 @@
           <h2 class="text-xl font-bold">Record Something Given By:</h2>
         </div>
 
-        <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+        <ul
+          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+        >
           <li @click="openDialog()">
             <img
               src="../assets/blank-square.svg"
@@ -158,7 +160,7 @@
           </router-link>
           <button
             @click="openGiftedPrompts()"
-            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"
+            class="block 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"
           >
             Ideas...
           </button>

src/views/ImportAccountView.vue

@@ -56,9 +56,10 @@
     </div>
 
     <div class="mt-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
           @click="fromMnemonic()"
-        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"
+          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"
         >
           Import
         </button>
@@ -70,6 +71,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

src/views/ImportDerivedAccountView.vue

@@ -49,9 +49,10 @@
       </ul>
     </div>
     <div class="mt-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
           @click="incrementDerivation()"
-        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"
+          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"
         >
           Increment and Import
         </button>
@@ -63,6 +64,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

src/views/NewEditAccountView.vue

@@ -22,6 +22,7 @@
     />
 
     <div class="mt-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
           type="button"
           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"
@@ -38,6 +39,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

src/views/NewEditProjectView.vue

@@ -73,16 +73,17 @@
       />
       <label for="includeLocation">Include Location</label>
     </div>
-    <div v-if="includeLocation" style="height: 600px; width: 800px">
-      <div class="px-2 py-2">
+    <div v-if="includeLocation" class="mb-4 aspect-video">
+      <p class="text-sm mb-2 text-slate-500">
         For your security, choose a location nearby but not exactly at the
         place.
-      </div>
+      </p>
 
       <l-map
         ref="map"
         v-model:zoom="zoom"
         :center="[0, 0]"
+        class="!z-40 rounded-md"
         @click="
           (event) => {
             latitude = event.latlng.lat;
@@ -104,6 +105,7 @@
     </div>
 
     <div class="mt-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
           :disabled="isHiddenSave"
           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"
@@ -127,6 +129,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

src/views/ProjectViewView.vue

@@ -134,7 +134,9 @@
       <div class="text-center">
         <p class="mt-2 mb-4 text-center">Record a contribution from:</p>
       </div>
-      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+      <ul
+        class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+      >
         <li @click="openGiftDialog({ name: 'you', did: activeDid })">
           <fa icon="hand" class="fa-fw text-slate-400 text-5xl" />
           <h3

src/views/SearchAreaView.vue

@@ -64,10 +64,11 @@
       </div>
     </div>
 
-    <div style="height: 600px; width: 800px">
+    <div class="mb-4 aspect-video">
       <l-map
         ref="map"
         :center="[localCenterLat, localCenterLong]"
+        class="!z-40 rounded-md"
         v-model:zoom="localZoom"
         @click="setMapPoint"
       >

src/views/StartView.vue

@@ -23,6 +23,7 @@
 
     <!-- id used by puppeteer test script -->
     <div id="start-question" class="mt-8">
+      <div class="max-w-3xl mx-auto">
         <p class="text-center text-xl font-light">
           Do you want a new identifier of your own?
         </p>
@@ -36,24 +37,27 @@
         </p>
         <a
           @click="onClickYes()"
-        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"
+          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 mb-2"
         >
           Yes, generate one
         </a>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
           <a
             @click="onClickNo()"
-        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"
+            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"
           >
             No, I have a seed
           </a>
           <a
             v-if="numAccounts > 0"
             @click="onClickDerive()"
-        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"
+            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"
           >
             Derive new address from existing seed
           </a>
         </div>
+      </div>
+    </div>
   </section>
 </template>