fix: changed email box design

frontend/src/components/CommunicationArea.vue

@@ -1,57 +1,52 @@
 <template>
-  <div class="flex gap-3 px-10 pb-6 pt-2">
-    <UserAvatar
-      :user="getUser().name"
-      size="xl"
-      :class="showCommunicationBox ? 'mt-3' : ''"
-    />
+  <div class="flex gap-1.5 border-t px-10 py-2.5">
     <Button
       ref="sendEmailRef"
-      variant="outline"
-      size="md"
-      class="inline-flex h-8.5 w-full justify-between"
-      @click="showCommunicationBox = true"
-      v-show="!showCommunicationBox"
+      variant="ghost"
+      :class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+      label="Reply"
+      @click="showCommunicationBox = !showCommunicationBox"
     >
-      <div class="text-base text-gray-600">Add a reply...</div>
-      <template #suffix>
-        <div class="flex gap-3">
-          <!-- <FeatherIcon name="paperclip" class="h-4" /> -->
-        </div>
+      <template #prefix>
+        <EmailIcon class="h-4" />
       </template>
     </Button>
-    <div
-      v-show="showCommunicationBox"
-      class="w-full rounded-lg border bg-white p-4 focus-within:border-gray-400"
-      @keydown.ctrl.enter.capture.stop="submitComment"
-      @keydown.meta.enter.capture.stop="submitComment"
-    >
-      <EmailEditor
-        ref="newEmailEditor"
-        :value="newEmail"
-        @change="onNewEmailChange"
-        :submitButtonProps="{
-          variant: 'solid',
-          onClick: submitComment,
-          disabled: emailEmpty,
-        }"
-        :discardButtonProps="{
-          onClick: () => {
-            showCommunicationBox = false
-            newEmail = ''
-          },
-        }"
-        :editable="showCommunicationBox"
-        v-model="doc.data"
-        placeholder="Add a reply..."
-      />
-    </div>
+    <!-- <Button variant="ghost" label="Comment">
+      <template #prefix>
+        <CommentIcon class="h-4" />
+      </template>
+    </Button> -->
+  </div>
+  <div
+    v-show="showCommunicationBox"
+    @keydown.ctrl.enter.capture.stop="submitComment"
+    @keydown.meta.enter.capture.stop="submitComment"
+  >
+    <EmailEditor
+      ref="newEmailEditor"
+      :value="newEmail"
+      @change="onNewEmailChange"
+      :submitButtonProps="{
+        variant: 'solid',
+        onClick: submitComment,
+        disabled: emailEmpty,
+      }"
+      :discardButtonProps="{
+        onClick: () => {
+          showCommunicationBox = false
+          newEmail = ''
+        },
+      }"
+      :editable="showCommunicationBox"
+      v-model="doc.data"
+      placeholder="Add a reply..."
+    />
   </div>
 </template>
 
 <script setup>
-import UserAvatar from '@/components/UserAvatar.vue'
 import EmailEditor from '@/components/EmailEditor.vue'
+import EmailIcon from '@/components/icons/EmailIcon.vue'
 import { usersStore } from '@/stores/users'
 import { call } from 'frappe-ui'
 import { ref, watch, computed, defineModel } from 'vue'

frontend/src/components/EmailEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <TextEditor
     ref="textEditor"
-    :editor-class="['prose-sm max-w-none', editable && 'min-h-[4rem]']"
+    :editor-class="['prose-sm max-w-none', editable && 'min-h-[7rem]']"
     :content="value"
     @change="editable ? $emit('change', $event) : null"
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
@@ -9,26 +9,24 @@
     :editable="editable"
   >
     <template #top>
-      <div class="mb-2">
-        <span class="text-base text-gray-600">To:</span>
+      <div class="mx-10 border-t border-b py-2.5">
+        <span class="text-xs text-gray-500">TO:</span>
         <span
           v-if="modelValue.email"
-          class="ml-2 bg-gray-100 px-2 py-1 rounded-md text-sm text-gray-800 cursor-pointer"
-          >{{ modelValue.email }}</span
+          class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
         >
+          {{ modelValue.email }}
+        </span>
       </div>
     </template>
     <template v-slot:editor="{ editor }">
       <EditorContent
-        :class="[editable && 'max-h-[50vh] overflow-y-auto']"
+        :class="[editable && 'mx-10 py-3 max-h-[50vh] overflow-y-auto']"
         :editor="editor"
       />
     </template>
     <template v-slot:bottom>
-      <div
-        v-if="editable"
-        class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center"
-      >
+      <div v-if="editable" class="flex justify-between border-t px-10 py-2.5">
         <TextEditorFixedMenu
           class="-ml-1 overflow-x-auto"
           :buttons="textEditorMenuButtons"