From 5b998639747261d139d1643ae9aefc8c3490de87 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 16:59:55 +0530
Subject: [PATCH] fix(UX): added description to which says press enter to add
 email

---
 frontend/src/components/Controls/MultiValueInput.vue  | 9 ++++++++-
 frontend/src/components/Settings/InviteMemberPage.vue | 9 +++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Controls/MultiValueInput.vue b/frontend/src/components/Controls/MultiValueInput.vue
index 43e3e11a..0ba39a11 100644
--- a/frontend/src/components/Controls/MultiValueInput.vue
+++ b/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`,
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index 5ce5d2bb..01925234 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/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) {
-    error.value = error
+  onError(err) {
+    error.value = err?.messages?.[0]
   },
 })