Merge pull request #10 from shariquerik/listview-layout-change

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

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">

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
-    <circle cx="8" cy="8" r="3" fill="white" />
+      cx="8"
+      cy="8"
+      r="4.5"
+      fill="white"
+      stroke="currentColor"
+      stroke-width="3"
+    />
   </svg>
 </template>

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>

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 }}
@@ -21,10 +21,13 @@
       </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 space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-300 ease-in-out"
+          class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
+        >
+          <div
+            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'
@@ -56,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'">
@@ -65,8 +68,7 @@
                       class="flex items-center"
                       :image="getValue(row[column.key]).logo"
                       :label="getValue(row[column.key]).image_label"
-                    size="md"
+                      size="sm"
-                    shape="square"
                     />
                   </div>
                   <div v-else-if="column.type === 'icon'">
@@ -75,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'">
@@ -92,6 +91,11 @@
                 </div>
               </ListRowItem>
             </div>
+          </div>
+          <div
+            v-if="i < rows.length - 1"
+            class="mx-2 h-px border-t border-gray-200"
+          />
         </router-link>
       </div>
       <transition
@@ -139,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/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>

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 }">

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 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

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 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
@@ -159,7 +159,7 @@ const columns = [
     label: 'Status',
     key: 'status',
     type: 'indicator',
-    size: 'w-32',
+    size: 'w-28',
   },
   {
     label: 'Email',