From 372da5bb1d0fe34a25136287db10a21ef229b264 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 21 Sep 2023 02:13:53 +0530
Subject: [PATCH] fix: added new user dropdown with crm logo

fixed bleeding sidebar links and other minor issues
---
 frontend/src/components/AppSidebar.vue    |  7 ++--
 frontend/src/components/Icons/CRMLogo.vue | 34 ++++++++++--------
 frontend/src/components/SidebarLink.vue   | 10 +++---
 frontend/src/components/UserDropdown.vue  | 42 ++++++++++++++++-------
 frontend/src/pages/Login.vue              |  4 +--
 5 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 321b22e3..a09cb3a4 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -4,9 +4,7 @@
     :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
   >
     <div>
-      <div class="flex p-2">
-        <UserDropdown :isCollapsed="isSidebarCollapsed" />
-      </div>
+      <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
       <div v-for="link in links">
         <SidebarLink
           :icon="link.icon"
@@ -25,8 +23,7 @@
     >
       <template #icon>
         <span class="grid h-5 w-6 place-items-center flex-shrink-0">
-          <component
-            :is="CollapseSidebar"
+          <CollapseSidebar
             class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
             :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
           />
diff --git a/frontend/src/components/Icons/CRMLogo.vue b/frontend/src/components/Icons/CRMLogo.vue
index da9605e4..124a43c2 100644
--- a/frontend/src/components/Icons/CRMLogo.vue
+++ b/frontend/src/components/Icons/CRMLogo.vue
@@ -1,25 +1,31 @@
 <template>
   <svg
-    viewBox="0 0 60 17"
+    width="118"
+    height="118"
+    viewBox="0 0 118 118"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M10.0776 1.04102H0V3.69184H10.0776V1.04102Z" fill="#0089FF" />
     <path
-      d="M0 7.80273V16.1116H3.21664V10.458H9.40933V7.80273H0Z"
-      fill="#0089FF"
+      d="M93.7101 0H23.8141C10.7986 0 0.247559 10.5511 0.247559 23.5665V93.4626C0.247559 106.478 10.7986 117.029 23.8141 117.029H93.7101C106.726 117.029 117.277 106.478 117.277 93.4626V23.5665C117.277 10.5511 106.726 0 93.7101 0Z"
+      fill="url(#paint0_angular_0_12)"
     />
     <path
-      d="M29.2321 6.22129H26.5094C26.4318 5.77479 26.2886 5.37926 26.0799 5.03468C25.8712 4.68524 25.6116 4.3892 25.301 4.14654C24.9904 3.90388 24.6361 3.72188 24.2381 3.60055C23.845 3.47437 23.4203 3.41127 22.9641 3.41127C22.1537 3.41127 21.4354 3.61511 20.8093 4.02278C20.1832 4.4256 19.6931 5.01769 19.3388 5.79906C18.9845 6.57557 18.8074 7.52438 18.8074 8.64547C18.8074 9.78598 18.9845 10.7469 19.3388 11.5283C19.6979 12.3048 20.1881 12.892 20.8093 13.29C21.4354 13.6831 22.1512 13.8797 22.9569 13.8797C23.4034 13.8797 23.8207 13.8214 24.209 13.705C24.6021 13.5836 24.954 13.4065 25.2646 13.1735C25.58 12.9406 25.8445 12.6542 26.0581 12.3145C26.2765 11.9748 26.4269 11.5865 26.5094 11.1497L29.2321 11.1643C29.1302 11.8729 28.9093 12.5378 28.5696 13.159C28.2347 13.7802 27.7955 14.3286 27.252 14.8042C26.7084 15.275 26.0726 15.6438 25.3446 15.9107C24.6167 16.1728 23.8086 16.3039 22.9205 16.3039C21.6101 16.3039 20.4405 16.0005 19.4116 15.3939C18.3827 14.7872 17.5722 13.9112 16.9801 12.7659C16.388 11.6205 16.092 10.247 16.092 8.64547C16.092 7.03906 16.3905 5.6656 16.9874 4.52509C17.5843 3.37973 18.3973 2.50372 19.4261 1.89707C20.455 1.29042 21.6198 0.987091 22.9205 0.987091C23.7504 0.987091 24.522 1.10357 25.2354 1.33652C25.9489 1.56948 26.5846 1.91163 27.1428 2.36298C27.7009 2.80948 28.1595 3.35789 28.5187 4.00822C28.8826 4.6537 29.1204 5.39139 29.2321 6.22129Z"
-      fill="black"
-    />
-    <path
-      d="M31.2954 16.1V1.19093H36.8863C38.0317 1.19093 38.9926 1.38991 39.7691 1.78787C40.5505 2.18584 41.1402 2.74396 41.5381 3.46223C41.9409 4.17566 42.1423 5.00798 42.1423 5.95921C42.1423 6.9153 41.9385 7.7452 41.5308 8.44892C41.128 9.14778 40.5335 9.68891 39.7473 10.0723C38.9611 10.4509 37.9953 10.6401 36.8499 10.6401H32.8678V8.39796H36.4859C37.1557 8.39796 37.7041 8.30575 38.1312 8.12132C38.5582 7.93205 38.8737 7.65784 39.0775 7.2987C39.2862 6.93471 39.3906 6.48822 39.3906 5.95921C39.3906 5.43021 39.2862 4.97886 39.0775 4.60517C38.8688 4.22662 38.551 3.94028 38.1239 3.74615C37.6968 3.54716 37.146 3.44767 36.4714 3.44767H33.9962V16.1H31.2954ZM38.9975 9.34434L42.6883 16.1H39.6745L36.0491 9.34434H38.9975Z"
-      fill="black"
-    />
-    <path
-      d="M44.2184 1.19093H47.5234L51.9496 11.9942H52.1243L56.5504 1.19093H59.8555V16.1H57.2639V5.8573H57.1255L53.0052 16.0563H51.0687L46.9483 5.83546H46.81V16.1H44.2184V1.19093Z"
-      fill="black"
+      d="M21.2487 27.5115V38.0121H85.7749V45.8876L62.5161 68.4638V80.7495L54.9556 83.3222V68.4638C54.9556 68.4638 41.1474 55.0756 36.3171 50.3503H21.3013L42.6174 71.089C43.825 72.2441 44.5076 73.8716 44.5076 75.5517V87.9424L73.0167 88.0474V75.5517C73.0167 73.8716 73.6992 72.2441 74.9068 71.089L96.2755 50.2978V27.5115H21.2487Z"
+      fill="#F1FCFF"
     />
+    <defs>
+      <radialGradient
+        id="paint0_angular_0_12"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(81.5001 -21.5) rotate(67.4893) scale(262.5 101.567)"
+      >
+        <stop offset="0.494792" stop-color="#E953E6" />
+        <stop offset="1" stop-color="#BA27D1" />
+      </radialGradient>
+    </defs>
   </svg>
 </template>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index 76af1e36..d7157286 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -1,20 +1,22 @@
 <template>
   <div
-    class="flex items-center rounded text-gray-800 cursor-pointer transition-all duration-300 ease-in-out"
+    class="flex h-7 items-center rounded text-gray-800 cursor-pointer transition-all duration-300 ease-in-out"
     :class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
     @click="handleClick"
   >
     <div class="flex items-center p-1">
-      <component :is="isCollapsed ? Tooltip : 'div'" :text="label" placement="right">
+      <Tooltip :text="label" placement="right">
         <slot name="icon">
           <span class="grid h-5 w-6 place-items-center flex-shrink-0">
             <component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
           </span>
         </slot>
-      </component>
+      </Tooltip>
       <span
         class="flex-shrink-0 text-base duration-300 ease-in-out"
-        :class="isCollapsed ? 'opacity-0 ml-0' : 'opacity-100 ml-2'"
+        :class="
+          isCollapsed ? 'opacity-0 ml-0 w-0 overflow-hidden' : 'opacity-100 ml-2 w-auto'
+        "
       >
         {{ label }}
       </span>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 7a5f34f6..1e815bd9 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -2,21 +2,39 @@
   <Dropdown :options="userDropdownOptions">
     <template v-slot="{ open }">
       <button
-        class="flex w-full items-center rounded-md px-1 py-2 text-left"
-        :class="open ? 'bg-gray-300' : 'hover:bg-gray-200'"
-        v-if="user"
+        class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
+        :class="
+          isCollapsed
+            ? 'px-0 w-auto'
+            : open
+            ? 'bg-white shadow-sm px-2 w-52'
+            : 'hover:bg-gray-200 px-2 w-52'
+        "
       >
-        <UserAvatar class="flex-shrink-0" :user="user.name" size="md" />
-        <span
-          class="hidden text-base font-medium text-gray-900 sm:inline duration-300 ease-in-out"
-          :class="isCollapsed ? 'opacity-0 ml-0' : 'opacity-100 ml-2'"
+        <CRMLogo class="w-8 h-8 rounded flex-shrink-0" />
+        <div
+          class="flex flex-1 flex-col text-left duration-300 ease-in-out"
+          :class="
+            isCollapsed
+              ? 'opacity-0 ml-0 w-0 overflow-hidden'
+              : 'opacity-100 ml-2 w-auto'
+          "
         >
-          {{ user.full_name }}
-        </span>
+          <div class="text-base font-medium text-gray-900 leading-none">
+            CRM
+          </div>
+          <div class="mt-1 text-sm text-gray-700 leading-none">
+            {{ user.full_name }}
+          </div>
+        </div>
         <FeatherIcon
           name="chevron-down"
-          class="h-4 w-4 sm:inline duration-300 ease-in-out"
-          :class="isCollapsed ? 'opacity-0 ml-0' : 'opacity-100 ml-2'"
+          class="h-4 w-4 duration-300 ease-in-out"
+          :class="
+            isCollapsed
+              ? 'opacity-0 ml-0 w-0 overflow-hidden'
+              : 'opacity-100 ml-2 w-auto'
+          "
           aria-hidden="true"
         />
       </button>
@@ -25,7 +43,7 @@
 </template>
 
 <script setup>
-import UserAvatar from '@/components/UserAvatar.vue'
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { Dropdown, FeatherIcon } from 'frappe-ui'
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 6f4955ab..05c39768 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex h-screen w-screen justify-center bg-gray-100">
     <div class="mt-32 w-full px-4">
-      <CRMLogo class="mx-auto h-6" />
+      <CRMLogo class="mx-auto h-10" />
       <div class="mt-6 flex items-center justify-center space-x-1.5">
-        <span class="text-3xl font-semibold text-gray-900">Login</span>
+        <span class="text-3xl font-semibold text-gray-900">Login to CRM</span>
       </div>
       <div class="mx-auto mt-6 w-full px-4 sm:w-96">
         <form