From 61e53cce721551a6ee62967867dca3ece6c02002 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 20 Nov 2023 18:20:38 +0530
Subject: [PATCH] fix: added icons on contact detail dialog

---
 frontend/src/components/Icons/AddressIcon.vue | 16 ++++++++++
 .../src/components/Icons/CertificateIcon.vue  | 16 ++++++++++
 frontend/src/components/Icons/ContactIcon.vue | 18 +++++++++++
 frontend/src/components/Icons/GenderIcon.vue  | 16 ++++++++++
 .../src/components/Modals/ContactModal.vue    | 30 +++++++++++--------
 5 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/Icons/AddressIcon.vue
 create mode 100644 frontend/src/components/Icons/CertificateIcon.vue
 create mode 100644 frontend/src/components/Icons/ContactIcon.vue
 create mode 100644 frontend/src/components/Icons/GenderIcon.vue

diff --git a/frontend/src/components/Icons/AddressIcon.vue b/frontend/src/components/Icons/AddressIcon.vue
new file mode 100644
index 00000000..108536ea
--- /dev/null
+++ b/frontend/src/components/Icons/AddressIcon.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="M4.15969 11.0123L4.17279 11.0253C4.17276 11.0253 4.17484 11.0272 4.17897 11.031C4.21695 11.0655 4.42864 11.2579 4.77688 11.5727C5.14213 11.9029 5.62149 12.3355 6.10132 12.7685C6.16929 12.8299 6.23758 12.8915 6.30581 12.9531C7.02952 13.6061 7.74656 14.2532 8.00622 14.4912C8.15155 14.3604 8.43754 14.1068 8.78577 13.7981C9.13708 13.4865 9.55174 13.1189 9.94918 12.7645C10.4342 12.3321 10.9128 11.9027 11.2691 11.5768C11.3745 11.4803 11.4673 11.3947 11.5452 11.3218V11.2964L11.8648 10.9997C12.95 9.99193 13.5109 8.58334 13.5109 7.05226V7.03944L13.5112 7.02663C13.5901 3.95314 11.1555 1.5 8.05226 1.5C4.954 1.5 2.5 3.954 2.5 7.05226C2.5 8.58334 3.06088 9.99193 4.14613 10.9997L4.15969 11.0123ZM7.90678 14.5823C7.91104 14.578 7.91527 14.574 7.91946 14.5701C7.91386 14.5754 7.90961 14.5795 7.90678 14.5823ZM7.39704 15.2894C7.35023 15.2426 6.39086 14.3768 5.43146 13.511C4.47199 12.6451 3.51248 11.7793 3.46568 11.7324C2.15523 10.5156 1.5 8.83073 1.5 7.05226C1.5 3.40172 4.40172 0.5 8.05226 0.5C11.7028 0.5 14.6045 3.40172 14.5109 7.05226C14.5109 8.83073 13.8557 10.5156 12.5452 11.7324C12.5452 11.8024 10.399 13.7046 9.27744 14.6986C8.89921 15.0338 8.63749 15.2658 8.61388 15.2894C8.33307 15.5702 7.77145 15.5702 7.39704 15.2894ZM8.05226 9.92434C6.47034 9.92434 5.18019 8.63419 5.18019 7.05226C5.18019 5.47034 6.47034 4.18019 8.05226 4.18019C9.63419 4.18019 10.9243 5.47034 10.9243 7.05226C10.9243 8.63419 9.63419 9.92434 8.05226 9.92434ZM6.18019 7.05226C6.18019 8.0819 7.02262 8.92434 8.05226 8.92434C9.0819 8.92434 9.92434 8.0819 9.92434 7.05226C9.92434 6.02262 9.0819 5.18019 8.05226 5.18019C7.02262 5.18019 6.18019 6.02262 6.18019 7.05226Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/CertificateIcon.vue b/frontend/src/components/Icons/CertificateIcon.vue
new file mode 100644
index 00000000..00a25bb6
--- /dev/null
+++ b/frontend/src/components/Icons/CertificateIcon.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="M3 2C2.17157 2 1.5 2.67157 1.5 3.5V10.8333C1.5 11.6618 2.17157 12.3333 3 12.3333H8C8.27614 12.3333 8.5 12.5572 8.5 12.8333C8.5 13.1095 8.27614 13.3333 8 13.3333H3C1.61929 13.3333 0.5 12.214 0.5 10.8333V3.5C0.5 2.11929 1.61929 1 3 1H11.6C12.9807 1 14.1 2.11929 14.1 3.5V3.96127C14.1 4.23741 13.8761 4.46127 13.6 4.46127C13.3239 4.46127 13.1 4.23741 13.1 3.96127V3.5C13.1 2.67157 12.4284 2 11.6 2H3ZM11.3003 10.5825V12.891L12.4434 12.3194L12.6693 12.2065L12.8943 12.3213L14.0336 12.9029V10.5824C13.6283 10.806 13.1624 10.9333 12.6668 10.9333C12.1713 10.9333 11.7055 10.8061 11.3003 10.5825ZM15.0336 9.65809V13.7196V14.5362L14.3063 14.1649L12.6646 13.3268L11.0239 14.1472L10.3003 14.509V13.7V9.65848C10.0052 9.21137 9.8335 8.67571 9.8335 8.09994C9.8335 6.53513 11.102 5.2666 12.6668 5.2666C14.2316 5.2666 15.5002 6.53513 15.5002 8.09994C15.5002 8.67554 15.3285 9.21105 15.0336 9.65809ZM10.8335 8.09994C10.8335 7.08741 11.6543 6.2666 12.6668 6.2666C13.6794 6.2666 14.5002 7.08741 14.5002 8.09994C14.5002 9.11246 13.6794 9.93327 12.6668 9.93327C11.6543 9.93327 10.8335 9.11246 10.8335 8.09994ZM3.2998 5.7666C3.2998 5.49046 3.52366 5.2666 3.7998 5.2666H8.46647C8.74261 5.2666 8.96647 5.49046 8.96647 5.7666C8.96647 6.04274 8.74261 6.2666 8.46647 6.2666H3.7998C3.52366 6.2666 3.2998 6.04274 3.2998 5.7666ZM3.7998 8.06665C3.52366 8.06665 3.2998 8.29051 3.2998 8.56665C3.2998 8.84279 3.52366 9.06665 3.7998 9.06665H6.5998C6.87595 9.06665 7.0998 8.84279 7.0998 8.56665C7.0998 8.29051 6.87595 8.06665 6.5998 8.06665H3.7998Z"
+      fill="#383838"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/ContactIcon.vue b/frontend/src/components/Icons/ContactIcon.vue
new file mode 100644
index 00000000..85442922
--- /dev/null
+++ b/frontend/src/components/Icons/ContactIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9.62476 4.49023C9.62476 5.3877 8.89722 6.11523 7.99976 6.11523C7.10229 6.11523 6.37476 5.3877 6.37476 4.49023C6.37476 3.59277 7.10229 2.86523 7.99976 2.86523C8.89722 2.86523 9.62476 3.59277 9.62476 4.49023ZM10.6248 4.49023C10.6248 5.93998 9.4495 7.11523 7.99976 7.11523C6.55001 7.11523 5.37476 5.93998 5.37476 4.49023C5.37476 3.04049 6.55001 1.86523 7.99976 1.86523C9.4495 1.86523 10.6248 3.04049 10.6248 4.49023ZM3.33049 11.4862C3.67081 9.95482 5.0291 8.86523 6.59788 8.86523H9.40237C10.9711 8.86523 12.3294 9.95482 12.6698 11.4862L12.7625 11.9035C12.96 12.7925 12.2836 13.6359 11.3728 13.6359H4.62741C3.7167 13.6359 3.0402 12.7925 3.23776 11.9035L3.33049 11.4862ZM6.59788 7.86523C4.5604 7.86523 2.7963 9.28035 2.3543 11.2693L2.26158 11.6866C1.92523 13.2001 3.07695 14.6359 4.62741 14.6359H11.3728C12.9233 14.6359 14.075 13.2001 13.7387 11.6866L13.6459 11.2693C13.204 9.28035 11.4398 7.86523 9.40237 7.86523H6.59788Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/GenderIcon.vue b/frontend/src/components/Icons/GenderIcon.vue
new file mode 100644
index 00000000..cc9bb200
--- /dev/null
+++ b/frontend/src/components/Icons/GenderIcon.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="M12.9289 0.557617H10.4294C10.1533 0.557617 9.92944 0.781475 9.92944 1.05762C9.92944 1.33376 10.1533 1.55762 10.4294 1.55762H11.7218L9.4363 3.84316C8.78027 3.37245 7.97597 3.09532 7.10693 3.09532C4.89779 3.09532 3.10693 4.88618 3.10693 7.09532C3.10693 9.13513 4.63378 10.8183 6.60693 11.0644V12.6762H5.35693C5.08079 12.6762 4.85693 12.9001 4.85693 13.1762C4.85693 13.4523 5.08079 13.6762 5.35693 13.6762H6.60693V14.9427C6.60693 15.2188 6.83079 15.4427 7.10693 15.4427C7.38308 15.4427 7.60693 15.2188 7.60693 14.9427V13.6762H8.85693C9.13308 13.6762 9.35693 13.4523 9.35693 13.1762C9.35693 12.9001 9.13308 12.6762 8.85693 12.6762H7.60693V11.0644C9.58009 10.8183 11.1069 9.13513 11.1069 7.09532C11.1069 6.11586 10.7549 5.21862 10.1704 4.52323L12.4294 2.26424V3.55762C12.4294 3.83376 12.6533 4.05762 12.9294 4.05762C13.2056 4.05762 13.4294 3.83376 13.4294 3.55762V1.05762C13.4294 0.781475 13.2056 0.557617 12.9294 0.557617H12.9289ZM7.10693 4.09532C5.45008 4.09532 4.10693 5.43846 4.10693 7.09532C4.10693 8.75217 5.45008 10.0953 7.10693 10.0953C8.76379 10.0953 10.1069 8.75217 10.1069 7.09532C10.1069 5.43846 8.76379 4.09532 7.10693 4.09532Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index da29a0fd..f49a5a24 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -27,19 +27,19 @@
             <div
               v-for="field in detailFields"
               :key="field.name"
-              class="flex h-7 items-center gap-2"
+              class="flex h-7 items-center gap-2 text-gray-800 text-base"
             >
-              <component class="mx-1" :is="field.icon" />
+              <div class="w-7 grid place-content-center"><component class="" :is="field.icon" /></div>
               <div v-if="field.type == 'dropdown'">
                 <Dropdown
                   :options="field.options"
-                  class="form-control w-full flex-1 -ml-2 mr-2"
+                  class="form-control -ml-2 mr-2 w-full flex-1"
                 >
                   <template #default="{ open }">
                     <Button
                       variant="ghost"
                       :label="contact[field.name]"
-                      class="dropdown-button w-full justify-between truncate"
+                      class="dropdown-button w-full justify-between truncate hover:bg-white"
                     >
                       <div class="truncate">{{ contact[field.name] }}</div>
                       <template #suffix>
@@ -145,7 +145,13 @@
 
 <script setup>
 import DropdownItem from '@/components/DropdownItem.vue'
-import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import ContactIcon from '@/components/Icons/ContactIcon.vue'
+import GenderIcon from '@/components/Icons/GenderIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
+import AddressIcon from '@/components/Icons/AddressIcon.vue'
+import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import Dropdown from '@/components/frappe-ui/Dropdown.vue'
@@ -256,41 +262,41 @@ const dialogOptions = computed(() => {
 const detailFields = computed(() => {
   let details = [
     {
-      icon: ContactsIcon,
+      icon: ContactIcon,
       name: 'full_name',
       value:
         (_contact.value.salutation ? _contact.value.salutation + '. ' : '') +
         _contact.value.full_name,
     },
     {
-      icon: ContactsIcon,
+      icon: GenderIcon,
       name: 'gender',
       value: _contact.value.gender,
     },
     {
-      icon: ContactsIcon,
+      icon: EmailIcon,
       name: 'email_id',
       value: _contact.value.email_id,
       ...sections.value[2].fields[0],
     },
     {
-      icon: ContactsIcon,
+      icon: PhoneIcon,
       name: 'mobile_no',
       value: _contact.value.mobile_no,
       ...sections.value[2].fields[1],
     },
     {
-      icon: ContactsIcon,
+      icon: OrganizationsIcon,
       name: 'company_name',
       value: _contact.value.company_name,
     },
     {
-      icon: ContactsIcon,
+      icon: CertificateIcon,
       name: 'designation',
       value: _contact.value.designation,
     },
     {
-      icon: ContactsIcon,
+      icon: AddressIcon,
       name: 'address',
       value: _contact.value.address,
     },