Button width changes

For buttons that are next to each other

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/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

@@ -160,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

@@ -105,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"
@@ -128,6 +129,7 @@
           Cancel
         </button>
       </div>
+    </div>
   </section>
 </template>
 

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>