fix(UX): added description to which says press enter to add email

frontend/src/components/Controls/MultiValueInput.vue

@@ -11,7 +11,7 @@
         :label="value"
         theme="gray"
         variant="subtle"
-        class="rounded bg-surface-gray-3 group-hover:bg-surface-gray-4 focus-visible:ring-outline-gray-4"
+        class="rounded bg-surface-white hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4"
         @keydown.delete.capture.stop="removeLastValue"
       >
         <template #suffix>
@@ -35,6 +35,9 @@
       </div>
     </div>
     <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
+    <p v-if="description" class="text-xs text-ink-gray-5 mt-1.5">
+      {{ description }}
+    </p>
   </div>
 </template>
 
@@ -46,6 +49,10 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  description: {
+    type: String,
+    default: '',
+  },
   errorMessage: {
     type: Function,
     default: (value) => `${value} is an Invalid value`,

frontend/src/components/Settings/InviteMemberPage.vue

@@ -14,6 +14,7 @@
           :error-message="
             (value) => __('{0} is an invalid email address', [value])
           "
+          :description="__('Press enter to add email')"
         />
         <FormControl
           type="select"
@@ -26,7 +27,6 @@
           ]"
           :description="description"
         />
-        <ErrorMessage class="mt-2" v-if="error" :message="error" />
       </div>
       <template v-if="pendingInvitations.data?.length && !invitees.length">
         <div class="flex flex-col gap-4">
@@ -67,7 +67,8 @@
         </div>
       </template>
     </div>
-    <div class="flex flex-row-reverse">
+    <div class="flex justify-between items-center gap-2">
+      <div><ErrorMessage v-if="error" :message="error" /></div>
       <Button
         :label="__('Send Invites')"
         variant="solid"
@@ -120,8 +121,8 @@ const inviteByEmail = createResource({
     error.value = null
     pendingInvitations.reload()
   },
-  onError(error) {
+  onError(err) {
-    error.value = error
+    error.value = err?.messages?.[0]
   },
 })