From 95639b07f69305c5a97322c077f410f57277213a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 20 Sep 2023 18:08:38 +0530
Subject: [PATCH 1/3] fix: header with border bottom

---
 frontend/src/components/AppHeader.vue    | 2 +-
 frontend/src/components/CallUI.vue       | 2 +-
 frontend/src/components/LayoutHeader.vue | 2 +-
 frontend/src/pages/Deals.vue             | 2 +-
 frontend/src/pages/Leads.vue             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 67d69046..00a04369 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex border-b pr-5">
     <div id="app-header" class="flex-1"></div>
     <div class="flex items-center justify-center">
       <CallUI />
diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/CallUI.vue
index 777eb890..92f4ae87 100644
--- a/frontend/src/components/CallUI.vue
+++ b/frontend/src/components/CallUI.vue
@@ -107,7 +107,7 @@
   </div>
   <div
     v-show="showSmallCallWindow"
-    class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 -ml-3 mr-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
+    class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 ml-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
     @click="toggleCallWindow"
   >
     <div class="flex items-center gap-2">
diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
index d916dbe8..7a52cd39 100644
--- a/frontend/src/components/LayoutHeader.vue
+++ b/frontend/src/components/LayoutHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="#app-header" v-if="showHeader">
-    <header class="flex justify-between items-center px-5 py-3">
+    <header class="flex justify-between items-center pl-5 py-2.5 h-12">
       <div class="flex items-center gap-2">
         <slot name="left-header" />
       </div>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 5cb928fb..8b26c3ad 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pb-2.5">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index b2e21ee9..55ca8caa 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pb-2.5">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

From 78be1a809a289ae10ee1ae1975d3106f126cf954 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 20 Sep 2023 19:08:24 +0530
Subject: [PATCH 2/3] fix: listview layout

---
 frontend/src/components/ListView.vue | 129 ++++++++++++++-------------
 frontend/src/pages/CallLogs.vue      |   2 +-
 frontend/src/pages/Contacts.vue      |   2 +-
 frontend/src/pages/Deals.vue         |   2 +-
 frontend/src/pages/Leads.vue         |   2 +-
 5 files changed, 71 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 54288ab1..0aa205d5 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -3,7 +3,7 @@
     <div class="flex flex-col overflow-y-hidden w-max min-w-full">
       <div
         id="list-header"
-        class="flex space-x-4 items-center px-5 py-2 border-b"
+        class="flex space-x-4 items-center mx-5 mb-2 p-2 rounded bg-gray-100"
       >
         <Checkbox
           class="duration-300 cursor-pointer"
@@ -13,7 +13,7 @@
         <div
           v-for="column in columns"
           :key="column"
-          class="text-sm text-gray-600"
+          class="text-base text-gray-600"
           :class="[column.size, column.align]"
         >
           {{ column.label }}
@@ -24,74 +24,79 @@
           v-for="row in rows"
           :key="row[rowKey]"
           :to="$router.currentRoute.value.path + '/' + row[rowKey]"
-          class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-300 ease-in-out"
-          :class="
-            selections.has(row[rowKey])
-              ? 'bg-gray-100 hover:bg-gray-200'
-              : 'hover:bg-gray-50'
-          "
+          class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
         >
-          <Checkbox
-            :modelValue="selections.has(row[rowKey])"
-            @click.stop="toggleRow(row[rowKey])"
-            class="duration-300 cursor-pointer"
-          />
           <div
-            v-for="column in columns"
-            :key="column.key"
-            :class="[column.size, column.align]"
+            class="flex space-x-4 items-center px-2 py-2.5 rounded"
+            :class="
+              selections.has(row[rowKey])
+                ? 'bg-gray-100 hover:bg-gray-200'
+                : 'hover:bg-gray-50'
+            "
           >
-            <ListRowItem
-              :value="getValue(row[column.key]).label"
-              :type="column.type"
-              :align="column.align"
+            <Checkbox
+              :modelValue="selections.has(row[rowKey])"
+              @click.stop="toggleRow(row[rowKey])"
+              class="duration-300 cursor-pointer"
+            />
+            <div
+              v-for="column in columns"
+              :key="column.key"
+              :class="[column.size, column.align]"
             >
-              <template #prefix>
-                <div v-if="column.type === 'indicator'">
-                  <IndicatorIcon :class="getValue(row[column.key]).color" />
-                </div>
-                <div v-else-if="column.type === 'avatar'">
-                  <Avatar
-                    v-if="getValue(row[column.key]).label"
-                    class="flex items-center"
-                    :image="getValue(row[column.key]).image"
-                    :label="getValue(row[column.key]).image_label"
+              <ListRowItem
+                :value="getValue(row[column.key]).label"
+                :type="column.type"
+                :align="column.align"
+              >
+                <template #prefix>
+                  <div v-if="column.type === 'indicator'">
+                    <IndicatorIcon :class="getValue(row[column.key]).color" />
+                  </div>
+                  <div v-else-if="column.type === 'avatar'">
+                    <Avatar
+                      v-if="getValue(row[column.key]).label"
+                      class="flex items-center"
+                      :image="getValue(row[column.key]).image"
+                      :label="getValue(row[column.key]).image_label"
+                      size="md"
+                    />
+                  </div>
+                  <div v-else-if="column.type === 'logo'">
+                    <Avatar
+                      v-if="getValue(row[column.key]).label"
+                      class="flex items-center"
+                      :image="getValue(row[column.key]).logo"
+                      :label="getValue(row[column.key]).image_label"
+                      size="md"
+                      shape="square"
+                    />
+                  </div>
+                  <div v-else-if="column.type === 'icon'">
+                    <FeatherIcon
+                      :name="getValue(row[column.key]).icon"
+                      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" />
+                  </div>
+                </template>
+                <div v-if="column.type === 'badge'">
+                  <Badge
+                    :variant="'subtle'"
+                    :theme="row[column.key].color"
                     size="md"
+                    :label="row[column.key].label"
                   />
                 </div>
-                <div v-else-if="column.type === 'logo'">
-                  <Avatar
-                    v-if="getValue(row[column.key]).label"
-                    class="flex items-center"
-                    :image="getValue(row[column.key]).logo"
-                    :label="getValue(row[column.key]).image_label"
-                    size="md"
-                    shape="square"
-                  />
-                </div>
-                <div v-else-if="column.type === 'icon'">
-                  <FeatherIcon
-                    :name="getValue(row[column.key]).icon"
-                    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" />
-                </div>
-              </template>
-              <div v-if="column.type === 'badge'">
-                <Badge
-                  :variant="'subtle'"
-                  :theme="row[column.key].color"
-                  size="md"
-                  :label="row[column.key].label"
-                />
-              </div>
-            </ListRowItem>
+              </ListRowItem>
+            </div>
           </div>
+          <div class="mx-2 h-px border-t border-gray-200"></div>
         </router-link>
       </div>
       <transition
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 43f5499b..9832c288 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -4,7 +4,7 @@
       <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 29f395fa..62fd8b8f 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 8b26c3ad..3d4822bb 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 55ca8caa..0b651c40 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

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 3/3] 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',