From 220fad975bfa799d47f1e759df639e85427ee2d6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 20 Sep 2023 19:23:24 +0530
Subject: [PATCH] fix: icon,icon shape/size changes in listview

---
 .../src/components/Icons/IndicatorIcon.vue     | 14 ++++++++++----
 frontend/src/components/ListView.vue           | 18 +++++++++---------
 frontend/src/pages/Leads.vue                   |  2 +-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Icons/IndicatorIcon.vue b/frontend/src/components/Icons/IndicatorIcon.vue
index 545c9f76..1f2d36c4 100644
--- a/frontend/src/components/Icons/IndicatorIcon.vue
+++ b/frontend/src/components/Icons/IndicatorIcon.vue
@@ -1,12 +1,18 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
     viewBox="0 0 16 16"
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="16" height="16" rx="4.5" class="fill-current currentColor" />
-    <circle cx="8" cy="8" r="3" fill="white" />
+    <circle
+      cx="8"
+      cy="8"
+      r="4.5"
+      fill="white"
+      stroke="currentColor"
+      stroke-width="3"
+    />
   </svg>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 0aa205d5..4ece62e0 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -21,7 +21,7 @@
       </div>
       <div id="list-rows" class="h-full overflow-y-auto">
         <router-link
-          v-for="row in rows"
+          v-for="(row, i) in rows"
           :key="row[rowKey]"
           :to="$router.currentRoute.value.path + '/' + row[rowKey]"
           class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
@@ -59,7 +59,7 @@
                       class="flex items-center"
                       :image="getValue(row[column.key]).image"
                       :label="getValue(row[column.key]).image_label"
-                      size="md"
+                      size="sm"
                     />
                   </div>
                   <div v-else-if="column.type === 'logo'">
@@ -68,8 +68,7 @@
                       class="flex items-center"
                       :image="getValue(row[column.key]).logo"
                       :label="getValue(row[column.key]).image_label"
-                      size="md"
-                      shape="square"
+                      size="sm"
                     />
                   </div>
                   <div v-else-if="column.type === 'icon'">
@@ -78,11 +77,8 @@
                       class="h-3 w-3"
                     />
                   </div>
-                  <div v-else-if="column.type === 'email'">
-                    <FeatherIcon name="mail" class="h-3 w-3" />
-                  </div>
                   <div v-else-if="column.type === 'phone'">
-                    <FeatherIcon name="phone" class="h-3 w-3" />
+                    <PhoneIcon class="h-4 w-4" />
                   </div>
                 </template>
                 <div v-if="column.type === 'badge'">
@@ -96,7 +92,10 @@
               </ListRowItem>
             </div>
           </div>
-          <div class="mx-2 h-px border-t border-gray-200"></div>
+          <div
+            v-if="i < rows.length - 1"
+            class="mx-2 h-px border-t border-gray-200"
+          />
         </router-link>
       </div>
       <transition
@@ -144,6 +143,7 @@
 </template>
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import ListRowItem from '@/components/ListRowItem.vue'
 import { Checkbox, Avatar, Badge, FeatherIcon } from 'frappe-ui'
 import { reactive, computed } from 'vue'
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 0b651c40..8c7e2a6a 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -159,7 +159,7 @@ const columns = [
     label: 'Status',
     key: 'status',
     type: 'indicator',
-    size: 'w-32',
+    size: 'w-28',
   },
   {
     label: 'Email',