Fix: Small UI fixes for auth screens (#3775)

packages/frontend-2/components/auth/PasswordResetPanel.vue

@@ -1,6 +1,8 @@
 <template>
   <form class="mx-auto w-full px-2" @submit="onSubmit">
-    <h1 class="text-heading-xl text-center inline-block mb-4">Reset your password</h1>
+    <h1 class="text-heading-xl text-center inline-block mb-4 w-full">
+      Reset your password
+    </h1>
     <div class="flex flex-col space-y-4 text-body-xs">
       <div>
         Type in the email address you used, so we can verify your account. We will send
@@ -20,10 +22,10 @@
 
     <div class="flex flex-col gap-y-2 mt-4">
       <FormButton submit full-width size="lg" :disabled="loading">
-        Send password reset email
+        Send reset email
       </FormButton>
       <FormButton color="outline" size="lg" full-width :to="homeRoute">
-        Go home
+        Back to login
       </FormButton>
     </div>
   </form>

packages/frontend-2/components/auth/RegisterPanel.vue

@@ -8,13 +8,13 @@
       </div>
       <AuthWorkspaceInviteHeader v-else :invite="workspaceInvite" />
       <template v-if="isInviteOnly && !inviteToken">
-        <div class="flex space-x-2 items-center">
-          <ExclamationTriangleIcon class="h-8 w-8 text-warning" />
-          <div>
-            This server is invite only. If you have received an invitation email, please
-            follow the instructions in it.
-          </div>
-        </div>
+        <CommonAlert color="warning">
+          <template #title>This server is invite only</template>
+          <template #description>
+            If you have received an invitation email, please follow the instructions in
+            it.
+          </template>
+        </CommonAlert>
         <div
           v-if="!inviteEmail"
           class="flex gap-1 text-foregound-3 text-body-xs items-center justify-center"
@@ -56,7 +56,6 @@ import { useQuery } from '@vue/apollo-composable'
 import { AuthStrategy } from '~~/lib/auth/helpers/strategies'
 import { useLoginOrRegisterUtils } from '~~/lib/auth/composables/auth'
 import { graphql } from '~~/lib/common/generated/gql'
-import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
 import { loginRoute } from '~~/lib/common/helpers/route'
 import { authRegisterPanelQuery } from '~/lib/auth/graphql/queries'
 

packages/frontend-2/pages/authn/forgotten-password.vue

@@ -2,5 +2,5 @@
   <AuthPasswordResetPanel />
 </template>
 <script setup lang="ts">
-useHead({ title: 'Forgotten password' })
+useHead({ title: 'Reset your password' })
 </script>