fix(ui): agent portal editor: bottom section: icons and button (#1203)

desk/src/pages/desk/ticket/editor/BottomSection.vue

@@ -19,39 +19,43 @@
  <TextEditorFixedMenu :buttons="menuButtons" />
  </div>
  <div class="flex justify-between px-3.5 py-2">
- <div class="flex flex-row items-center space-x-2">
- <CustomIcons
+ <div class="flex items-center gap-1">
+ <div
+ class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg"
  :class="{
  'bg-gray-200': isTextFormattingVisible,
  }"
- name="text-formatting"
- class="h-7 w-7 rounded p-1"
- role="button"
- @click="isTextFormattingVisible = !isTextFormattingVisible"
- />
+ >
+ <IconTextT
+ class="h-5 w-5 text-gray-900"
+ @click="isTextFormattingVisible = !isTextFormattingVisible"
+ />
+ </div>
+ <div class="flex h-7 w-7 items-center justify-center">
+ <IconChat
+ class="h-5 w-5 cursor-pointer text-gray-900"
+ @click="showCannedResponses = true"
+ />
+ </div>
+ <div class="flex h-7 w-7 items-center justify-center">
+ <IconKnowledgeBase
+ class="h-5 w-5 cursor-pointer text-gray-900"
+ @click="showArticleResponse = true"
+ />
+ </div>
  <FileUploader @success="(file) => editor.attachments.push(file)">
  <template #default="{ uploading, openFileSelector }">
- <FeatherIcon
- name="paperclip"
- class="h-5 w-5"
- role="button"
- :disabled="uploading"
- @click="openFileSelector"
- />
+ <div class="flex h-7 w-7 items-center justify-center">
+ <IconAttachment
+ class="h-5 w-5 cursor-pointer text-gray-900"
+ :class="{
+ 'text-gray-600': uploading,
+ }"
+ @click="!uploading && openFileSelector()"
+ />
+ </div>
  </template>
  </FileUploader>
- <CustomIcons
- name="add-response"
- class="h-7 w-7 rounded p-1"
- role="button"
- @click="showCannedResponses = true"
- />
- <CustomIcons
- name="article-reply"
- class="h-7 w-7 rounded p-1"
- role="button"
- @click="showArticleResponse = true"
- />
  </div>
  <div class="flex items-center gap-4">
  <IconDelete
@@ -62,15 +66,16 @@
  <Button
  label="Reply"
  appearance="primary"
- class="rounded-r-none"
+ class="rounded-r-none bg-gray-900 text-white hover:bg-gray-800"
  @click="newCommunication"
  />
  <Dropdown
  :options="dropdownOptions"
  :button="{
  icon: 'chevron-down',
  appearance: 'primary',
- class: 'rounded-l-none',
+ class:
+ 'rounded-l-none bg-gray-900 text-white hover:bg-gray-800',
  }"
  />
  </div>
@@ -95,7 +100,6 @@ import {
  createResource,
  Button,
  Dropdown,
- FeatherIcon,
  FileUploader,
  TextEditorFixedMenu,
 } from "frappe-ui";
@@ -105,9 +109,12 @@ import { TextEditorMenuButtons as menuButtons } from "../../consts";
 import CannedResponses from "./CannedResponses.vue";
 import ArticleResponses from "./ArticleResponses.vue";
 import AttachmentItem from "@/components/AttachmentItem.vue";
-import CustomIcons from "@/components/desk/global/CustomIcons.vue";
 import IconDelete from "~icons/espresso/delete";
+import IconKnowledgeBase from "~icons/espresso/knowledge-base";
 import IconX from "~icons/ph/x";
+import IconTextT from "~icons/ph/text-t";
+import IconAttachment from "~icons/espresso/attachment";
+import IconChat from "~icons/espresso/chat";
 
 const authStore = useAuthStore();
 const showArticleResponse = ref(false);