From 4b71ee0419c9b23f32a61b166f3c39f3dcff3cb3 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH] fix: badge size ds

---
 packages/nc-gui/components/nc/Badge.vue              |  7 ++++++-
 packages/nc-gui/components/roles/Badge.vue           | 12 +++++++++---
 packages/nc-gui/components/roles/Selector.vue        |  7 +++++--
 .../nc-gui/components/workspace/InviteSection.vue    |  6 +++---
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/nc/Badge.vue b/packages/nc-gui/components/nc/Badge.vue
index f9c5d345df..4a85d84919 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -3,16 +3,18 @@ const props = withDefaults(
   defineProps<{
     color: string
     border?: boolean
+    size?: 'sm' | 'md' | 'lg'
   }>(),
   {
     border: true,
+    size: 'sm',
   },
 )
 </script>
 
 <template>
   <div
-    class="rounded-md px-1"
+    class="rounded-md px-1 flex items-center"
     :class="{
       'border-purple-500 bg-purple-100': props.color === 'purple',
       'border-blue-500 bg-blue-100': props.color === 'blue',
@@ -22,6 +24,9 @@ const props = withDefaults(
       'border-red-500 bg-red-100': props.color === 'red',
       'border-gray-300': !props.color,
       'border-1': props.border,
+      '!h-6': props.size === 'sm',
+      '!h-8': props.size === 'md',
+      '!h-10': props.size === 'lg',
     }"
   >
     <slot />
diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
index 8fa5b3839a..c64cf8ec58 100644
--- a/packages/nc-gui/components/roles/Badge.vue
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -8,16 +8,21 @@ const props = withDefaults(
     clickable?: boolean
     inherit?: boolean
     border?: boolean
+    size?: 'sm' | 'md'
   }>(),
   {
     clickable: false,
     inherit: false,
     border: true,
+    size: 'sm',
   },
 )
 
 const roleRef = toRef(props, 'role')
 const clickableRef = toRef(props, 'clickable')
+const borderRef = toRef(props, 'border')
+
+const sizeSelect = computed(() => props.size)
 
 const roleProperties = computed(() => {
   const role = roleRef.value
@@ -36,14 +41,14 @@ const roleProperties = computed(() => {
 
 <template>
   <div
-    class="flex items-center"
+    class="flex items-start"
     :class="{
       'cursor-pointer': clickableRef,
     }"
   >
-    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef">
+    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef" :size="sizeSelect">
       <div
-        class="badge-text flex items-center gap-2 !h-7"
+        class="badge-text flex items-center gap-2"
         :class="{
           'text-purple-500': roleProperties.color === 'purple',
           'text-blue-500': roleProperties.color === 'blue',
@@ -52,6 +57,7 @@ const roleProperties = computed(() => {
           'text-yellow-500': roleProperties.color === 'yellow',
           'text-red-500': roleProperties.color === 'red',
           'text-gray-300': !roleProperties.color,
+          sizeSelect,
         }"
       >
         <GeneralIcon :icon="roleProperties.icon" />
diff --git a/packages/nc-gui/components/roles/Selector.vue b/packages/nc-gui/components/roles/Selector.vue
index 95683f74a6..e872b38c7c 100644
--- a/packages/nc-gui/components/roles/Selector.vue
+++ b/packages/nc-gui/components/roles/Selector.vue
@@ -10,20 +10,23 @@ const props = withDefaults(
     description?: boolean
     inherit?: string
     onRoleChange: (role: keyof typeof RoleLabels) => void
+    size: 'sm' | 'md'
   }>(),
   {
     description: true,
+    size: 'sm',
   },
 )
 
 const roleRef = toRef(props, 'role')
 const inheritRef = toRef(props, 'inherit')
 const descriptionRef = toRef(props, 'description')
+const sizeRef = toRef(props, 'size')
 </script>
 
 <template>
-  <NcDropdown>
-    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
+  <NcDropdown size="lg" class="nc-roles-selector">
+    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable :size="sizeRef" />
     <template #overlay>
       <div class="nc-role-select-dropdown flex flex-col gap-1 p-2">
         <div class="flex flex-col gap-1">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 99def98aa4..6d0baa8bca 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
-import { OrderedWorkspaceRoles, RoleColors, RoleLabels, WorkspaceUserRoles } from 'nocodb-sdk'
+import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
 
 const inviteData = reactive({
@@ -213,6 +213,7 @@ const onPaste = (e: ClipboardEvent) => {
         <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
       </div>
       <RolesSelector
+        size="md"
         class="px-1"
         :role="inviteData.roles"
         :roles="allowedRoles"
@@ -222,9 +223,8 @@ const onPaste = (e: ClipboardEvent) => {
 
       <NcButton
         type="primary"
-        :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         size="small"
-        class="mt-0.5"
+        :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         :loading="isInvitingCollaborators"
         @click="inviteCollaborator"
       >