chore: wip

Author: chrisbbreuer

app/Models/SubscriberEmail.ts

@@ -28,7 +28,7 @@ export default {
       validation: {
         rule: schema.string().email(),
         message: {
-          email: 'Email must be valid',
+          email: 'Email address must be of valid format',
           required: 'Email is required',
         },
       },

public/images/screenshots/dashboard.png

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 const props = defineProps<{
   loading: boolean
-  buttonText: boolean
+  buttonText: string
   classString: string
 }>()
 
 const fullClass = computed(() => {
-  let cls = ' duration-150 ease-in-out transition'
+  let cls = ' duration-150 ease-in-out transition focus:ring-2 focus:ring-inset focus:ring-blue-600'
 
   if (props.loading) {
     cls += ` opacity-75 disabled:cursor-not-allowed `
@@ -39,6 +39,7 @@ const fullClass = computed(() => {
             />
         </svg>
 
-        {{ props.buttonText }}
+        <span v-if="!props.loading">{{ props.buttonText }}</span>
+        <span v-else>One moment...</span>
     </button>
-</template>
+</template>

resources/components/Buttons/BaseButton.vue

@@ -89,16 +89,16 @@ async function submitEmail() {
         <div class="mt-10 flex items-center gap-x-6">
           <!-- <a href="#" class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Get started</a> -->
           <div>
-            <div class="flex rounded-md shadow-sm">
+            <div class="flex rounded-md shadow-sm w-380px">
               <div class="relative flex flex-grow items-stretch focus-within:z-10">
                 <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                   <div class="i-heroicons-envelope h-5 w-5 text-gray-400" />
                 </div>
 
-                <input id="email" v-model="email" type="email" name="email" class="block w-full rounded-none rounded-l-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" placeholder="enter-your@email.com">
+                <input id="email" v-model="email" type="email" name="email" class="block w-full rounded-none rounded-l-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" placeholder="may-we-ask-your@email.org">
               </div>
 
-              <BaseButton buttonText="Submit" classString="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50" :loading="loading" @click.native="submitEmail" />
+              <BaseButton buttonText="Stay in Touch" classString="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 w-120px" :loading="loading" @click.native="submitEmail" />
             </div>
           </div>
 
@@ -116,7 +116,7 @@ async function submitEmail() {
       <div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
         <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
           <div class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
-            <img src="https://tailwindui.com/img/component-images/project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10">
+            <img src="images/screenshots/dashboard.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10">
           </div>
         </div>
       </div>