From 98bfc9c8f36e1b47921765eea8cd8bcf8d50d33a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:12 +0000
Subject: [PATCH] fix(nc-gui): update workspace icon issue from admin panel

---
 packages/nc-gui/components/dlg/InviteDlg.vue      |  6 +++---
 .../nc-gui/components/general/EmojiPicker.vue     |  6 +-----
 .../nc-gui/components/general/WorkspaceIcon.vue   | 15 ++++++++++++---
 packages/nc-gui/components/workspace/View.vue     |  7 +------
 packages/nc-gui/utils/commonUtils.ts              |  4 ++++
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/dlg/InviteDlg.vue b/packages/nc-gui/components/dlg/InviteDlg.vue
index 325dd32a36..9edce22026 100644
--- a/packages/nc-gui/components/dlg/InviteDlg.vue
+++ b/packages/nc-gui/components/dlg/InviteDlg.vue
@@ -417,15 +417,15 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
                   </a-input>
                 </div>
 
-                <div class="flex flex-col max-h-64 overflow-y-auto nc-scrollbar-md mt-2">
+                <div class="flex flex-col max-h-64 overflow-y-auto nc-scrollbar-md mt-2 px-2">
                   <div
                     v-for="ws in workSpaceSelectList"
                     :key="ws.id"
-                    class="px-4 cursor-pointer hover:bg-gray-100 rounded-lg h-9.5 py-2 w-full flex gap-2"
+                    class="px-2 cursor-pointer hover:bg-gray-100 rounded-lg h-9.5 py-2 w-full flex gap-2"
                     @click="checked[ws.id!] = !checked[ws.id!]"
                   >
                     <div class="flex gap-2 capitalize items-center">
-                      <GeneralWorkspaceIcon :hide-label="true" :workspace="ws" size="small" />
+                      <GeneralWorkspaceIcon :workspace="ws" size="medium" />
                       {{ ws.title }}
                     </div>
                     <div class="flex-1" />
diff --git a/packages/nc-gui/components/general/EmojiPicker.vue b/packages/nc-gui/components/general/EmojiPicker.vue
index e99ba070cd..3c61bf3cef 100644
--- a/packages/nc-gui/components/general/EmojiPicker.vue
+++ b/packages/nc-gui/components/general/EmojiPicker.vue
@@ -39,10 +39,6 @@ function selectEmoji(_emoji: any) {
   isOpen.value = false
 }
 
-const isUnicodeEmoji = computed(() => {
-  return emojiRef.value?.match(/\p{Extended_Pictographic}/gu)
-})
-
 const onClick = (e: Event) => {
   if (readonly) return
 
@@ -95,7 +91,7 @@ const showClearButton = computed(() => {
       <template v-if="!emojiRef">
         <slot name="default" />
       </template>
-      <template v-else-if="isUnicodeEmoji">
+      <template v-else-if="isUnicodeEmoji(emojiRef)">
         {{ emojiRef }}
       </template>
       <template v-else>
diff --git a/packages/nc-gui/components/general/WorkspaceIcon.vue b/packages/nc-gui/components/general/WorkspaceIcon.vue
index 282d38623f..01a8f5bfd0 100644
--- a/packages/nc-gui/components/general/WorkspaceIcon.vue
+++ b/packages/nc-gui/components/general/WorkspaceIcon.vue
@@ -39,7 +39,6 @@ const workspaceIcon = computed(() => {
   return {
     icon: iconType === WorkspaceIconType.IMAGE && ncIsObject(icon) ? getPossibleAttachmentSrc(icon) || '' : icon,
     iconType: iconType,
-    isUnicodeEmoji: iconType === WorkspaceIconType.EMOJI && icon ? icon?.match(/\p{Extended_Pictographic}/gu) : false,
   }
 })
 
@@ -103,11 +102,21 @@ const size = computed(() => props.size || 'medium')
           'text-4xl': size === 'xlarge',
         }"
       >
-        <template v-if="workspaceIcon.isUnicodeEmoji">
+        <template v-if="isUnicodeEmoji(workspaceIcon.icon)">
           {{ workspaceIcon.icon }}
         </template>
         <template v-else>
-          <Icon :data-testid="`nc-icon-${workspaceIcon.icon}`" class="!text-inherit flex-none" :icon="workspaceIcon.icon"></Icon>
+          <Icon
+            :data-testid="`nc-icon-${workspaceIcon.icon}`"
+            class="!text-inherit flex-none"
+            :class="{
+              'w-3 h-3': size === 'small',
+              'w-4 h-4': size === 'medium',
+              'w-6 h-6': size === 'large',
+              'w-10 h-10': size === 'xlarge',
+            }"
+            :icon="workspaceIcon.icon"
+          ></Icon>
         </template>
       </div>
       <GeneralIcon
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index c086eb569e..d6ab102eb3 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -109,7 +109,7 @@ onMounted(() => {
       <NcPageHeader>
         <template #icon>
           <div class="flex justify-center items-center h-6 w-6">
-            <GeneralWorkspaceIcon :workspace="currentWorkspace" hide-label size="small" />
+            <GeneralWorkspaceIcon :workspace="currentWorkspace" size="medium" />
           </div>
         </template>
         <template #title>
@@ -166,11 +166,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.nc-workspace-avatar {
-  @apply min-w-5 h-5 w-5 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase;
-  font-size: 0.7rem;
-}
-
 .tab {
   @apply flex flex-row items-center gap-x-2;
 }
diff --git a/packages/nc-gui/utils/commonUtils.ts b/packages/nc-gui/utils/commonUtils.ts
index 222b45bfce..563e7199ab 100644
--- a/packages/nc-gui/utils/commonUtils.ts
+++ b/packages/nc-gui/utils/commonUtils.ts
@@ -55,3 +55,7 @@ export const ncArrayFrom = <T>(
 ): T[] => {
   return Array.from({ length }, (_, i) => contentCallback(i))
 }
+
+export const isUnicodeEmoji = (emoji: string) => {
+  return !!emoji?.match(/(\p{Emoji}|\p{Extended_Pictographic})/gu)
+}