From 5a1f853b9fde1573ffb6d783192db45fcddac983 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 26 Sep 2023 15:55:59 +0530
Subject: [PATCH] fix: added icons instead of feature icons

minor spacing/color fixes
---
 frontend/src/components/Activities.vue        | 80 ++++++++++++-------
 frontend/src/components/Icons/DealsIcon.vue   | 16 ++--
 frontend/src/components/Icons/DotIcon.vue     | 11 +++
 frontend/src/components/Icons/EmailAtIcon.vue | 16 ++++
 .../{InboundCall.vue => InboundCallIcon.vue}  |  1 -
 ...{OutboundCall.vue => OutboundCallIcon.vue} |  1 -
 6 files changed, 88 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/Icons/DotIcon.vue
 create mode 100644 frontend/src/components/Icons/EmailAtIcon.vue
 rename frontend/src/components/Icons/{InboundCall.vue => InboundCallIcon.vue} (97%)
 rename frontend/src/components/Icons/{OutboundCall.vue => OutboundCallIcon.vue} (97%)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index e64ec633..05c0293f 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -18,7 +18,7 @@
     <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0">
       <div
         v-for="note in activities"
-        class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md px-4 py-3 bg-gray-50 hover:bg-gray-100"
+        class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
         @click="emit('makeNote', note)"
       >
         <div class="flex items-center justify-between">
@@ -75,11 +75,11 @@
             <div
               class="z-10 mt-[15px] flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
             >
-              <FeatherIcon
-                :name="
-                  call.type == 'Incoming' ? 'phone-incoming' : 'phone-outgoing'
+              <component
+                :is="
+                  call.type == 'Incoming' ? InboundCallIcon : OutboundCallIcon
                 "
-                class="h-4 w-4 text-gray-800"
+                class="text-gray-800"
               />
             </div>
           </div>
@@ -176,14 +176,24 @@
           <div
             class="z-10 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
             :class="{
-              'mt-[15px]': [
+              'mt-3': [
                 'communication',
                 'incoming_call',
                 'outgoing_call',
               ].includes(activity.activity_type),
+              'bg-white': ['added', 'removed', 'changed'].includes(
+                activity.activity_type
+              ),
             }"
           >
-            <FeatherIcon :name="activity.icon" class="h-4 w-4 text-gray-800" />
+            <component
+              :is="activity.icon"
+              :class="
+                ['added', 'removed', 'changed'].includes(activity.activity_type)
+                  ? 'text-gray-600'
+                  : 'text-gray-800'
+              "
+            />
           </div>
         </div>
         <div v-if="activity.activity_type == 'communication'" class="pb-6">
@@ -298,30 +308,30 @@
             </div>
           </div>
         </div>
-        <div v-else class="flex flex-col gap-3 pb-6">
-          <div
-            class="flex items-start justify-stretch gap-2 text-base leading-6"
-          >
+        <div v-else class="mb-4 flex flex-col gap-3 py-1.5">
+          <div class="flex items-start justify-stretch gap-2 text-base">
             <div class="inline-flex flex-wrap gap-1 text-gray-600">
-              <span class="text-gray-900">{{ activity.owner_name }}</span>
+              <span class="font-medium text-gray-800">{{
+                activity.owner_name
+              }}</span>
               <span v-if="activity.type">{{ activity.type }}</span>
               <span
                 v-if="activity.data.field_label"
-                class="max-w-xs truncate text-gray-900"
+                class="max-w-xs truncate font-medium text-gray-800"
               >
                 {{ activity.data.field_label }}
               </span>
               <span v-if="activity.value">{{ activity.value }}</span>
               <span
                 v-if="activity.data.old_value"
-                class="max-w-xs truncate text-gray-900"
+                class="max-w-xs truncate font-medium text-gray-800"
               >
                 {{ activity.data.old_value }}
               </span>
               <span v-if="activity.to">to</span>
               <span
                 v-if="activity.data.value"
-                class="max-w-xs truncate text-gray-900"
+                class="max-w-xs truncate font-medium text-gray-800"
               >
                 {{ activity.data.value }}
               </span>
@@ -330,7 +340,7 @@
             <div class="ml-auto whitespace-nowrap">
               <Tooltip
                 :text="dateFormat(activity.creation, dateTooltipFormat)"
-                class="text-sm leading-6 text-gray-600"
+                class="text-gray-600"
               >
                 {{ timeAgo(activity.creation) }}
               </Tooltip>
@@ -383,6 +393,11 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import PlayIcon from '@/components/Icons/PlayIcon.vue'
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import DotIcon from '@/components/Icons/DotIcon.vue'
+import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
+import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
+import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
@@ -394,7 +409,7 @@ import {
   TextEditor,
   Avatar,
 } from 'frappe-ui'
-import { computed, h, defineModel } from 'vue'
+import { computed, h, defineModel, markRaw } from 'vue'
 
 const { getUser } = usersStore()
 
@@ -473,20 +488,25 @@ const emptyTextIcon = computed(() => {
 })
 
 function timelineIcon(activity_type) {
-  if (activity_type == 'creation') {
-    return 'plus'
-  } else if (activity_type == 'removed') {
-    return 'trash-2'
-  } else if (activity_type == 'communication') {
-    return 'at-sign'
-  } else if (activity_type == 'comment') {
-    return 'file-text'
-  } else if (activity_type == 'incoming_call') {
-    return 'phone-incoming'
-  } else if (activity_type == 'outgoing_call') {
-    return 'phone-outgoing'
+  let icon
+  switch (activity_type) {
+    case 'creation':
+      icon = DealsIcon
+      break
+    case 'communication':
+      icon = EmailAtIcon
+      break
+    case 'incoming_call':
+      icon = InboundCallIcon
+      break
+    case 'outgoing_call':
+      icon = OutboundCallIcon
+      break
+    default:
+      icon = DotIcon
   }
-  return 'edit'
+
+  return markRaw(icon)
 }
 </script>
 
diff --git a/frontend/src/components/Icons/DealsIcon.vue b/frontend/src/components/Icons/DealsIcon.vue
index bde7139f..d8d75b8c 100644
--- a/frontend/src/components/Icons/DealsIcon.vue
+++ b/frontend/src/components/Icons/DealsIcon.vue
@@ -1,10 +1,16 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M9.23906 2.91049c.12084-.14098.35185-.05552.35185.13016v4.18662h5.47429c.1708 0 .263.20043.1518.33016L8.76094 15.0895c-.12084.141-.35185.0555-.35185-.1302v-4.1866H2.93484c-.17087 0-.26305-.2004-.15185-.3301l6.45607-7.53211Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.51246 2.15214C8.0454 1.5782 8.99073 2.10255 8.78598 2.85854L8.06251 5.52981L14.3198 6.41225C14.5042 6.43825 14.6589 6.56458 14.7212 6.74006C14.7835 6.91555 14.7431 7.11112 14.6164 7.24758L8.48756 13.8479C7.95462 14.4218 7.00929 13.8975 7.21404 13.1415L7.93751 10.4702L1.68019 9.58777C1.4958 9.56176 1.34113 9.43544 1.27883 9.25995C1.21652 9.08447 1.2569 8.8889 1.38361 8.75244L7.51246 2.15214ZM7.55592 3.57495L2.76791 8.73127L8.63801 9.5591C8.78003 9.57913 8.9066 9.65918 8.98557 9.7789C9.06454 9.89862 9.0883 10.0465 9.05081 10.1849L8.4441 12.4251L13.2321 7.26875L7.36201 6.44091C7.21999 6.42089 7.09342 6.34084 7.01445 6.22112C6.93548 6.1014 6.91172 5.95354 6.94922 5.8151L7.55592 3.57495Z"
+      fill="currentColor"
     />
   </svg>
 </template>
diff --git a/frontend/src/components/Icons/DotIcon.vue b/frontend/src/components/Icons/DotIcon.vue
new file mode 100644
index 00000000..1c3b0d9a
--- /dev/null
+++ b/frontend/src/components/Icons/DotIcon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="3.5" fill="currentColor" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/EmailAtIcon.vue b/frontend/src/components/Icons/EmailAtIcon.vue
new file mode 100644
index 00000000..754db46b
--- /dev/null
+++ b/frontend/src/components/Icons/EmailAtIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.00915 1.67113C6.43756 0.996093 8.0523 0.824124 9.59083 1.18318L9.47719 1.67009L9.59083 1.18318C11.1294 1.54222 12.5012 2.41118 13.4833 3.64873L13.4833 3.64875C14.4653 4.8863 14.9999 6.41969 15 7.99959V7.99961V8.64961C15 9.29937 14.7419 9.92256 14.2824 10.382C13.8229 10.8415 13.1998 11.0996 12.55 11.0996C11.9002 11.0996 11.2771 10.8415 10.8176 10.382C10.6732 10.2376 10.5487 10.077 10.4458 9.90455C9.87852 10.6319 8.99387 11.0996 8.00001 11.0996C6.28792 11.0996 4.90001 9.71167 4.90001 7.99961C4.90001 6.28752 6.28792 4.8996 8.00001 4.8996C8.81015 4.8996 9.54773 5.21039 10.1 5.71924V5.3996C10.1 5.12346 10.3239 4.8996 10.6 4.8996C10.8761 4.8996 11.1 5.12346 11.1 5.3996V7.99961V8.64961C11.1 9.03414 11.2528 9.40298 11.5247 9.67491C11.7966 9.94684 12.1654 10.0996 12.55 10.0996C12.9345 10.0996 13.3034 9.94684 13.5753 9.67491C13.8472 9.40298 14 9.03414 14 8.64961V7.99964C14 7.99963 14 7.99962 14 7.99961C13.9999 6.64545 13.5417 5.33113 12.7 4.27036C11.8582 3.20959 10.6823 2.46476 9.36356 2.15701L9.477 1.67093L9.36356 2.15701C8.04482 1.84925 6.66077 1.99665 5.43641 2.57525L5.24134 2.16246L5.43641 2.57525C4.21207 3.15384 3.21944 4.12961 2.61996 5.34387C2.02048 6.55813 1.84939 7.93946 2.13451 9.26331C2.41962 10.5871 3.14418 11.7756 4.19038 12.6354C5.23657 13.4952 6.54286 13.9758 7.89687 13.9991C9.25083 14.0224 10.5729 13.587 11.648 12.7636C11.8673 12.5958 12.1811 12.6374 12.349 12.8566C12.5169 13.0759 12.4752 13.3897 12.256 13.5576C11.0017 14.5181 9.45929 15.0261 7.87968 14.999C6.30002 14.9718 4.77601 14.4111 3.55545 13.408L3.55543 13.408C2.33489 12.4048 1.48956 11.0183 1.15692 9.47385C0.824284 7.92937 1.02389 6.31782 1.72329 4.90118L2.16883 5.12114L1.72329 4.90117C2.42268 3.48454 3.58074 2.34615 5.00915 1.67113ZM10.1 7.99961C10.1 6.83981 9.15978 5.8996 8.00001 5.8996C6.84021 5.8996 5.90001 6.8398 5.90001 7.99961C5.90001 9.15939 6.84021 10.0996 8.00001 10.0996C9.15978 10.0996 10.1 9.15939 10.1 7.99961Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/InboundCall.vue b/frontend/src/components/Icons/InboundCallIcon.vue
similarity index 97%
rename from frontend/src/components/Icons/InboundCall.vue
rename to frontend/src/components/Icons/InboundCallIcon.vue
index 16e56984..cf7f92d3 100644
--- a/frontend/src/components/Icons/InboundCall.vue
+++ b/frontend/src/components/Icons/InboundCallIcon.vue
@@ -6,7 +6,6 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="16" height="16" fill="white" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/frontend/src/components/Icons/OutboundCall.vue b/frontend/src/components/Icons/OutboundCallIcon.vue
similarity index 97%
rename from frontend/src/components/Icons/OutboundCall.vue
rename to frontend/src/components/Icons/OutboundCallIcon.vue
index 38b16256..063a00f2 100644
--- a/frontend/src/components/Icons/OutboundCall.vue
+++ b/frontend/src/components/Icons/OutboundCallIcon.vue
@@ -6,7 +6,6 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="16" height="16" fill="white" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"