From 5d9b82934512fa3267ac4c00e6f365f1263acf6e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:51:43 +0000
Subject: [PATCH] fix(nc-gui): user logo bg color is not same in all the places

---
 packages/nc-gui/components/cell/User.vue           |  9 ++-------
 .../nc-gui/components/dlg/ReAssign/UserItem.vue    |  7 +------
 packages/nc-gui/components/general/UserIcon.vue    |  8 ++++++--
 .../nc-gui/components/project/AccessSettings.vue   |  2 +-
 .../smartsheet/expanded-form/Sidebar/Audits.vue    |  6 +++---
 .../components/smartsheet/form/LimitOptions.vue    |  7 +------
 packages/nc-gui/components/workspace/AuditLogs.vue | 14 ++++++++++++--
 .../components/workspace/CollaboratorsList.vue     |  2 +-
 .../workspace/integrations/ConnectionsTab.vue      |  2 ++
 9 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 93fc307cec..f748b1931c 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -353,7 +353,7 @@ const isCollaborator = (userIdOrEmail) => {
                 <div>
                   <GeneralUserIcon
                     size="auto"
-                    :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
+                    :name="op.display_name"
                     :email="op.email"
                     class="!text-[0.65rem]"
                     :disabled="!isCollaborator(op.id)"
@@ -498,12 +498,7 @@ const isCollaborator = (userIdOrEmail) => {
                 :class="{ 'text-sm': isKanban, 'text-small': !isKanban }"
               >
                 <div>
-                  <GeneralUserIcon
-                    size="auto"
-                    :name="op.display_name?.trim() ? op.display_name?.trim() : ''"
-                    :email="op.email"
-                    class="!text-[0.65rem]"
-                  />
+                  <GeneralUserIcon size="auto" :name="op.display_name" :email="op.email" class="!text-[0.65rem]" />
                 </div>
                 <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                   <template #title>
diff --git a/packages/nc-gui/components/dlg/ReAssign/UserItem.vue b/packages/nc-gui/components/dlg/ReAssign/UserItem.vue
index b2cf4838a8..206b0ec5dd 100644
--- a/packages/nc-gui/components/dlg/ReAssign/UserItem.vue
+++ b/packages/nc-gui/components/dlg/ReAssign/UserItem.vue
@@ -12,12 +12,7 @@ const displayName = computed(() => {
 
 <template>
   <div class="flex flex-row items-center gap-x-2 h-12.5 p-2">
-    <GeneralUserIcon
-      size="auto"
-      :name="user.display_name?.trim() ? user.display_name?.trim() : ''"
-      :email="user.email"
-      class="!text-[0.65rem]"
-    />
+    <GeneralUserIcon size="auto" :name="user.display_name" :email="user.email" class="!text-[0.65rem]" />
     <div class="flex flex-col justify-center flex-grow">
       <div class="flex flex-col">
         <span class="capitalize font-weight-medium">{{ displayName }}</span>
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index ffead704bf..b6984a4516 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -4,7 +4,7 @@ import { isColorDark, stringToColor } from '#imports'
 const props = withDefaults(
   defineProps<{
     size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge' | 'auto'
-    name?: string
+    name?: string | null
     email?: string
     disabled?: boolean
   }>(),
@@ -26,7 +26,11 @@ const backgroundColor = computed(() => {
   }
 
   // in comments we need to generate user icon from email
-  return displayName.value ? stringToColor(displayName.value) : email.value ? stringToColor(email.value) : '#FFFFFF'
+  return displayName.value?.trim()
+    ? stringToColor(displayName.value.trim())
+    : email.value?.trim()
+    ? stringToColor(email.value.trim())
+    : '#FFFFFF'
 })
 
 const usernameInitials = computed(() => {
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 3215ceba84..cb1cb1d293 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -349,7 +349,7 @@ const isDeleteOrUpdateAllowed = (user) => {
           </template>
 
           <div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
-            <GeneralUserIcon size="base" :email="record.email" class="flex-none" />
+            <GeneralUserIcon size="base" :email="record.email" :name="record.display_name" class="flex-none" />
             <div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
               <div class="flex gap-3">
                 <NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
index cd46ed9c45..88fe61e22e 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
@@ -83,7 +83,7 @@ watch(
         <div class="group gap-3 overflow-hidden px-3 py-2 hover:bg-gray-100">
           <div class="flex items-start justify-between">
             <div class="flex items-start gap-3 flex-1 w-full">
-              <GeneralUserIcon :email="audit.created_by_email" :name="audit.created_display_name" class="mt-0.5" size="medium" />
+              <GeneralUserIcon :email="audit?.created_by_email" :name="audit?.created_display_name" class="mt-0.5" size="medium" />
               <div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
                 <NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
                   <div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
@@ -95,8 +95,8 @@ watch(
                       <div class="flex items-center gap-4 py-3 px-2">
                         <GeneralUserIcon
                           class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
-                          :name="audit.created_display_name"
-                          :email="audit.created_by_email"
+                          :name="audit?.created_display_name"
+                          :email="audit?.created_by_email"
                         />
                         <div class="flex flex-col">
                           <div class="font-semibold text-gray-800">
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index 81c8cc3166..71b53a5a51 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -262,12 +262,7 @@ const showOrHideAll = (showAll: boolean) => {
               class="flex items-stretch gap-2"
             >
               <div>
-                <GeneralUserIcon
-                  size="auto"
-                  :name="element.display_name?.trim() ? element.display_name?.trim() : ''"
-                  :email="element.email"
-                  class="!text-[0.65rem]"
-                />
+                <GeneralUserIcon size="auto" :name="element.display_name" :email="element.email" class="!text-[0.65rem]" />
               </div>
               <NcTooltip class="truncate max-w-full" show-on-truncate-only>
                 <template #title>
diff --git a/packages/nc-gui/components/workspace/AuditLogs.vue b/packages/nc-gui/components/workspace/AuditLogs.vue
index 03c9920179..2a1ac62741 100644
--- a/packages/nc-gui/components/workspace/AuditLogs.vue
+++ b/packages/nc-gui/components/workspace/AuditLogs.vue
@@ -350,7 +350,12 @@ onKeyStroke('ArrowDown', onDown)
                     <td class="cell-user">
                       <div>
                         <div v-if="audit.user && collaboratorsMap.get(audit.user)?.email" class="w-full flex gap-3 items-center">
-                          <GeneralUserIcon :email="collaboratorsMap.get(audit.user)?.email" size="base" class="flex-none" />
+                          <GeneralUserIcon
+                            :email="collaboratorsMap.get(audit.user)?.email"
+                            :name="collaboratorsMap.get(audit.user)?.display_name"
+                            size="base"
+                            class="flex-none"
+                          />
                           <div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
                             <div class="w-full flex gap-3">
                               <NcTooltip
@@ -521,7 +526,12 @@ onKeyStroke('ArrowDown', onDown)
                     v-if="selectedAudit?.user && collaboratorsMap.get(selectedAudit.user)?.email"
                     class="w-full flex gap-3 items-center"
                   >
-                    <GeneralUserIcon :email="collaboratorsMap.get(selectedAudit.user)?.email" size="base" class="flex-none" />
+                    <GeneralUserIcon
+                      :email="collaboratorsMap.get(selectedAudit.user)?.email"
+                      :name="collaboratorsMap.get(selectedAudit.user)?.display_name"
+                      size="base"
+                      class="flex-none"
+                    />
                     <div class="flex-1 flex flex-col">
                       <div class="w-full flex gap-3">
                         <span class="text-sm text-gray-800 capitalize font-semibold">
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 0bc67167b9..9dbe85b144 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -229,7 +229,7 @@ const isDeleteOrUpdateAllowed = (user) => {
           </template>
 
           <div v-if="column.key === 'email'" class="w-full flex gap-3 items-center">
-            <GeneralUserIcon size="base" :email="record.email" class="flex-none" />
+            <GeneralUserIcon size="base" :email="record.email" :name="record.display_name" class="flex-none" />
             <div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
               <div class="flex gap-3">
                 <NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>
diff --git a/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue b/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
index 7f56b8f9e7..e219210d9e 100644
--- a/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
+++ b/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
@@ -463,6 +463,8 @@ onKeyStroke('ArrowDown', onDown)
                       >
                         <GeneralUserIcon
                           :email="collaboratorsMap.get(integration.created_by)?.email"
+                          :name="collaboratorsMap.get(integration.created_by)?.display_name"
+
                           size="base"
                           class="flex-none"
                           :class="{