Merge pull request #332 from shariquerik/ui-fixes-1

fix: UI/UX improvements & minor bug fixes

frontend/src/components/Activities/EmailArea.vue

@@ -51,7 +51,8 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-col gap-1 text-base text-gray-800">
+    <div class="flex flex-col gap-1 text-base leading-5 text-gray-800">
+      <div>{{ activity.data.subject }}</div>
       <div>
         <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
         <span>{{ activity.data.recipients }}</span>
@@ -66,12 +67,8 @@
         </span>
         <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
       </div>
-      <div>
-        <span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
-        <span>{{ activity.data.subject }}</span>
-      </div>
     </div>
-    <div class="border-0 border-t my-3.5 border-gray-200" />
+    <div class="border-0 border-t mt-3 mb-1 border-gray-200" />
     <EmailContent :content="activity.data.content" />
     <div v-if="activity.data?.attachments?.length" class="flex flex-wrap gap-2">
       <AttachmentItem
@@ -108,6 +105,8 @@ function reply(email, reply_all = false) {
 
   if (!email.subject.startsWith('Re:')) {
     editor.subject = `Re: ${email.subject}`
+  } else {
+    editor.subject = email.subject
   }
 
   if (reply_all) {

frontend/src/components/Settings/InviteMemberPage.vue

@@ -4,6 +4,9 @@
       {{ __('Send Invites To') }}
     </h2>
     <div class="flex-1 overflow-y-auto">
+      <label class="block text-xs text-gray-600 mb-1.5">
+        {{ __('Invite by email') }}
+      </label>
       <MultiValueInput
         v-model="invitees"
         :validate="validateEmail"
@@ -26,17 +29,17 @@
       <ErrorMessage class="mt-2" v-if="error" :message="error" />
       <template v-if="pendingInvitations.data?.length && !invitees.length">
         <div
-          class="mt-4 flex items-center justify-between border-b py-2 text-base text-gray-600"
+          class="mt-6 flex items-center justify-between py-4 text-base font-semibold"
         >
-          <div class="w-4/5">{{ __('Pending Invites') }}</div>
+          <div>{{ __('Pending Invites') }}</div>
         </div>
-        <ul class="divide-y overflow-auto">
+        <ul class="flex flex-col gap-1">
           <li
-            class="flex items-center justify-between py-2"
+            class="flex items-center justify-between px-2 py-1 rounded-lg bg-gray-50"
             v-for="user in pendingInvitations.data"
             :key="user.name"
           >
-            <div class="w-4/5 text-base">
+            <div class="text-base">
               <span class="text-gray-900">
                 {{ user.email }}
               </span>
@@ -46,6 +49,7 @@
               <Tooltip text="Delete Invitation">
                 <Button
                   icon="x"
+                  variant="ghost"
                   :loading="
                     pendingInvitations.delete.loading &&
                     pendingInvitations.delete.params.name === user.name

frontend/src/pages/Deal.vue

@@ -214,7 +214,7 @@
                             />
                           </div>
                           <div class="flex items-center">
-                            <Dropdown :options="contactOptions(contact.name)">
+                            <Dropdown :options="contactOptions(contact)">
                               <Button
                                 icon="more-horizontal"
                                 class="text-gray-600"
@@ -572,9 +572,9 @@ const _contact = ref({})
 function contactOptions(contact) {
   let options = [
     {
-      label: __('Delete'),
+      label: __('Remove'),
       icon: 'trash-2',
-      onClick: () => removeContact(contact),
+      onClick: () => removeContact(contact.name),
     },
   ]