refactor: update buttons look, add link to source

Author: softbeehive

examples/CardElement.vue

@@ -15,7 +15,7 @@
       />
     </StripeElements>
     <button 
-      class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+      class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
     >
       Pay now
     </button>

examples/CardElementLegacy.vue

@@ -17,7 +17,7 @@
   <button
     type="button"
     @click="pay"
-    class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+    class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
   >
     Pay now
   </button>

examples/DemoApp.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-y-12 container p-10 max-w-2xl mx-auto">
+  <div class="flex flex-col gap-y-10 container p-10 max-w-2xl mx-auto">
     <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
-
+    
     <section>
       <h2 class="text-2xl font-semibold">Payment Element</h2>
       <p class="pt-1 pb-6">Deferred flow -
@@ -46,6 +46,12 @@
       </p>
       <ExpressCheckoutElement />
     </section>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Built with</h2>
+      <a class="text-blue-700 hover:underline"
+      href="https://github.com/ectoflow/vue-stripe-js">https://github.com/ectoflow/vue-stripe-js</a>
+    </section>
   </div>
 </template>
 

examples/PaymentElementDeferred.vue

@@ -16,7 +16,7 @@
     </StripeElements>
     <button
       type="submit"
-      class="rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-slate-500"
+      class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
     >
       Submit
     </button>