fix: icon,icon shape/size changes in listview

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>
+</template>

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'

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',