From 4accb60a243ca8782519df3ef3f912c825536c4f Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 8 May 2023 12:34:33 +1000
Subject: [PATCH] use new format

---
 resources/js/views/EmailVerify.vue       | 48 +++++++++++++++---------
 resources/js/views/ResendEmailVerify.vue | 47 ++++++++++++++---------
 2 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/resources/js/views/EmailVerify.vue b/resources/js/views/EmailVerify.vue
index d8c4bda..c363a80 100644
--- a/resources/js/views/EmailVerify.vue
+++ b/resources/js/views/EmailVerify.vue
@@ -1,30 +1,42 @@
 <template>
-    <SMPage>
-        <SMRow>
-            <SMFormCard class="mt-5" narrow>
-                <template v-if="!formDone">
-                    <h1>Email Verify</h1>
-                    <p>
-                        Enter your verification code below. If you have not yet
-                        received one,
-                        <router-link to="/resend-verify-email"
-                            >request a new code</router-link
-                        >.
-                    </p>
-                    <SMForm v-model="form" @submit="handleSubmit">
+    <SMContainer :center="true">
+        <template v-if="!formDone">
+            <SMForm v-model="form" @submit="handleSubmit">
+                <SMFormCard class="mt-5" narrow>
+                    <template #header>
+                        <h1>Email Verify</h1>
+                    </template>
+                    <template #body>
+                        <p>
+                            Enter your verification code below. If you have not
+                            yet received one,
+                            <router-link to="/resend-verify-email"
+                                >request a new code</router-link
+                            >.
+                        </p>
                         <SMInput control="code" />
+                    </template>
+                    <template #footer>
                         <SMButtonRow>
                             <template #right>
                                 <SMButton type="submit" label="Verify Code" />
                             </template>
                         </SMButtonRow>
-                    </SMForm>
-                </template>
-                <template v-else>
+                    </template>
+                </SMFormCard>
+            </SMForm>
+        </template>
+        <template v-else>
+            <SMFormCard class="mt-5" narrow>
+                <template #header>
                     <h1>Email Verified!</h1>
+                </template>
+                <template #body>
                     <p class="text-center">
                         Hurrah, Your email has been verified!
                     </p>
+                </template>
+                <template #footer>
                     <SMButtonRow>
                         <SMButton
                             type="primary"
@@ -34,8 +46,8 @@
                     </SMButtonRow>
                 </template>
             </SMFormCard>
-        </SMRow>
-    </SMPage>
+        </template>
+    </SMContainer>
 </template>
 
 <script setup lang="ts">
diff --git a/resources/js/views/ResendEmailVerify.vue b/resources/js/views/ResendEmailVerify.vue
index 68ec9ad..6c86c06 100644
--- a/resources/js/views/ResendEmailVerify.vue
+++ b/resources/js/views/ResendEmailVerify.vue
@@ -1,36 +1,49 @@
 <template>
-    <SMPage>
-        <SMRow>
-            <SMFormCard class="mt-5" narrow>
-                <template v-if="!formDone">
-                    <h1>Resend Verify Email</h1>
-                    <SMForm v-model="form" @submit="handleSubmit">
+    <SMContainer :center="true">
+        <template v-if="!formDone">
+            <SMForm v-model="form" @submit="handleSubmit">
+                <SMFormCard class="mt-5" narrow>
+                    <template #header>
+                        <h1>Resend Email</h1>
+                        <p>
+                            If you have not received your verification email
+                            yet, we can send you another one.
+                        </p>
+                    </template>
+                    <template #body>
                         <SMInput control="email" />
+                    </template>
+                    <template #footer>
                         <SMButtonRow>
                             <template #left>
                                 <div class="small">
-                                    <span class="pr-1">Stuck?</span
+                                    <span>Stuck?</span
                                     ><router-link to="/contact"
                                         >Contact Us</router-link
                                     >
                                 </div>
                             </template>
                             <template #right>
-                                <SMButton
-                                    type="submit"
-                                    label="Send"
-                                    icon="arrow-forward-outline" />
+                                <SMButton type="submit" label="Send" />
                             </template>
                         </SMButtonRow>
-                    </SMForm>
-                </template>
-                <template v-else>
+                    </template>
+                </SMFormCard>
+            </SMForm>
+        </template>
+        <template v-else>
+            <SMFormCard>
+                <template #header>
                     <h1>Email Sent!</h1>
+                </template>
+                <template #body>
                     <p class="text-center">
                         If that email address has been registered, and you still
                         need to verify your email, you will receive an email
                         with a new verify code.
-                    </p>
+                    </p></template
+                >
+                <template #footer>
                     <SMButtonRow>
                         <template #right>
                             <SMButton :to="{ name: 'home' }" label="Home" />
@@ -38,8 +51,8 @@
                     </SMButtonRow>
                 </template>
             </SMFormCard>
-        </SMRow>
-    </SMPage>
+        </template>
+    </SMContainer>
 </template>
 
 <script setup lang="ts">