From d3a669484db8f3ee0a25dcafe0a75372d313bee6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 31 Oct 2024 15:34:59 +0530
Subject: [PATCH] fix: fixed mobile layout header size and menu icon

---
 frontend/src/components/Icons/DetailsIcon.vue | 20 ++++++++-----------
 frontend/src/components/Icons/MenuIcon.vue    | 16 +++++++++++++++
 frontend/src/components/LayoutHeader.vue      |  2 +-
 .../src/components/Mobile/MobileAppHeader.vue | 13 ++++++++----
 frontend/src/pages/MobileDeal.vue             |  2 +-
 frontend/src/pages/MobileLead.vue             |  2 +-
 6 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/Icons/MenuIcon.vue

diff --git a/frontend/src/components/Icons/DetailsIcon.vue b/frontend/src/components/Icons/DetailsIcon.vue
index afc0cb0a8..d66f7075c 100644
--- a/frontend/src/components/Icons/DetailsIcon.vue
+++ b/frontend/src/components/Icons/DetailsIcon.vue
@@ -1,20 +1,16 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
-    viewBox="0 0 24 24"
+    viewBox="0 0 16 16"
     fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="lucide lucide-list-collapse"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="m3 10 2.5-2.5L3 5" />
-    <path d="m3 19 2.5-2.5L3 14" />
-    <path d="M10 6h11" />
-    <path d="M10 12h11" />
-    <path d="M10 18h11" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.7499 2H4.24988C3.42145 2 2.74988 2.67157 2.74988 3.5V12.5C2.74988 13.3284 3.42145 14 4.24988 14H11.7499C12.5783 14 13.2499 13.3284 13.2499 12.5V3.5C13.2499 2.67157 12.5783 2 11.7499 2ZM4.24988 1C2.86917 1 1.74988 2.11929 1.74988 3.5V12.5C1.74988 13.8807 2.86917 15 4.24988 15H11.7499C13.1306 15 14.2499 13.8807 14.2499 12.5V3.5C14.2499 2.11929 13.1306 1 11.7499 1H4.24988ZM5.99997 8.125C5.99997 8.47018 5.72015 8.75 5.37497 8.75C5.02979 8.75 4.74997 8.47018 4.74997 8.125C4.74997 7.77982 5.02979 7.5 5.37497 7.5C5.72015 7.5 5.99997 7.77982 5.99997 8.125ZM5.37497 5.75C5.72015 5.75 5.99997 5.47018 5.99997 5.125C5.99997 4.77982 5.72015 4.5 5.37497 4.5C5.02979 4.5 4.74997 4.77982 4.74997 5.125C4.74997 5.47018 5.02979 5.75 5.37497 5.75ZM5.99997 11.125C5.99997 11.4702 5.72015 11.75 5.37497 11.75C5.02979 11.75 4.74997 11.4702 4.74997 11.125C4.74997 10.7798 5.02979 10.5 5.37497 10.5C5.72015 10.5 5.99997 10.7798 5.99997 11.125ZM7.24997 4.625C6.97383 4.625 6.74997 4.84886 6.74997 5.125C6.74997 5.40114 6.97383 5.625 7.24997 5.625H11.25C11.5261 5.625 11.75 5.40114 11.75 5.125C11.75 4.84886 11.5261 4.625 11.25 4.625H7.24997ZM6.74997 8.125C6.74997 7.84886 6.97383 7.625 7.24997 7.625H11.25C11.5261 7.625 11.75 7.84886 11.75 8.125C11.75 8.40114 11.5261 8.625 11.25 8.625H7.24997C6.97383 8.625 6.74997 8.40114 6.74997 8.125ZM7.24997 10.625C6.97383 10.625 6.74997 10.8489 6.74997 11.125C6.74997 11.4011 6.97383 11.625 7.24997 11.625H11.25C11.5261 11.625 11.75 11.4011 11.75 11.125C11.75 10.8489 11.5261 10.625 11.25 10.625H7.24997Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/src/components/Icons/MenuIcon.vue b/frontend/src/components/Icons/MenuIcon.vue
new file mode 100644
index 000000000..f194dcc43
--- /dev/null
+++ b/frontend/src/components/Icons/MenuIcon.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="M2.5 3.2002C2.5 2.92405 2.72386 2.7002 3 2.7002H13C13.2761 2.7002 13.5 2.92405 13.5 3.2002C13.5 3.47634 13.2761 3.7002 13 3.7002H3C2.72386 3.7002 2.5 3.47634 2.5 3.2002ZM2.5 8.00024C2.5 7.7241 2.72386 7.50024 3 7.50024H13C13.2761 7.50024 13.5 7.7241 13.5 8.00024C13.5 8.27639 13.2761 8.50024 13 8.50024H3C2.72386 8.50024 2.5 8.27639 2.5 8.00024ZM3 12.3003C2.72386 12.3003 2.5 12.5242 2.5 12.8003C2.5 13.0764 2.72386 13.3003 3 13.3003H13C13.2761 13.3003 13.5 13.0764 13.5 12.8003C13.5 12.5242 13.2761 12.3003 13 12.3003H3Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
index 141836807..cff6d5daa 100644
--- a/frontend/src/components/LayoutHeader.vue
+++ b/frontend/src/components/LayoutHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="#app-header" v-if="showHeader">
     <slot>
-      <header class="flex h-10.5 items-center justify-between py-[7px] pl-5">
+      <header class="flex h-10.5 items-center justify-between py-[7px] sm:pl-5 pl-2">
         <div class="flex items-center gap-2">
           <slot name="left-header" />
         </div>
diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
index c21049e01..b13202d98 100644
--- a/frontend/src/components/Mobile/MobileAppHeader.vue
+++ b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="flex border-b pr-3">
-    <div class="z-20 -mr-4 ml-1 flex items-center justify-center">
-      <Button variant="ghosted" @click="sidebarOpened = !sidebarOpened">
-        <FeatherIcon name="menu" class="size-4" />
+  <div class="flex pr-3">
+    <div class="z-20 ml-2 flex items-center justify-center">
+      <Button
+        class="size-7"
+        variant="ghosted"
+        @click="sidebarOpened = !sidebarOpened"
+      >
+        <MenuIcon class="h-4" />
       </Button>
     </div>
     <div id="app-header" class="flex-1" />
@@ -11,6 +15,7 @@
 </template>
 
 <script setup>
+import MenuIcon from '@/components/Icons/MenuIcon.vue'
 import CallUI from '@/components/CallUI.vue'
 import { mobileSidebarOpened as sidebarOpened } from '@/composables/settings'
 </script>
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index bb476125c..e4a694b43 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader v-if="deal.data">
     <header
-      class="relative flex h-12 items-center justify-between gap-2 py-2.5 pl-5"
+      class="relative flex h-10.5 items-center justify-between gap-2 py-2.5 pl-2"
     >
       <Breadcrumbs :items="breadcrumbs">
         <template #prefix="{ item }">
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 810ce07a0..27a20322f 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader v-if="lead.data">
     <header
-      class="relative flex h-12 items-center justify-between gap-2 py-2.5 pl-5"
+      class="relative flex h-10.5 items-center justify-between gap-2 py-2.5 pl-2"
     >
       <Breadcrumbs :items="breadcrumbs">
         <template #prefix="{ item }">