fix: badge and selector design

packages/nc-gui/components/nc/Badge.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
-const props = defineProps<{
+const props = withDefaults(
-  color: string
+  defineProps<{
-}>()
+    color: string
+    border?: boolean
+  }>(),
+  {
+    border: true,
+  },
+)
 </script>
 
 <template>
   <div
-    class="border-1 h-6 rounded-md px-1"
+    class="h-6 rounded-md px-1"
     :class="{
       'border-purple-500 bg-purple-100': props.color === 'purple',
       'border-blue-500 bg-blue-100': props.color === 'blue',
@@ -15,6 +21,7 @@ const props = defineProps<{
       'border-yellow-500 bg-yellow-100': props.color === 'yellow',
       'border-red-500 bg-red-100': props.color === 'red',
       'border-gray-300': !props.color,
+      'border-1': props.border,
     }"
   >
     <slot />

packages/nc-gui/components/project/AccessSettings.vue

@@ -213,6 +213,7 @@ onMounted(async () => {
                         ? WorkspaceRolesToProjectRoles[collab.workspace_roles]
                         : null
                     "
+                    :description="false"
                     :on-role-change="(role: ProjectRoles) => updateCollaborator(collab, role)"
                   />
                 </template>

packages/nc-gui/components/project/InviteProjectCollabSection.vue

@@ -122,7 +122,7 @@ const copyUrl = async () => {
             :role="inviteData.roles"
             :roles="ProjectRoles"
             :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
-            :description="false"
+            :description="true"
           />
 
           <a-button

packages/nc-gui/components/roles/Badge.vue

@@ -1,25 +1,25 @@
 <script lang="ts" setup>
-import { RoleColors, RoleDescriptions, RoleIcons, RoleLabels } from 'nocodb-sdk'
+import { RoleColors, RoleIcons, RoleLabels } from 'nocodb-sdk'
 import { toRef } from '#imports'
 
 const props = withDefaults(
   defineProps<{
     role: keyof typeof RoleLabels
-    description?: boolean
     clickable?: boolean
     inherit?: boolean
+    border?: boolean
   }>(),
   {
-    description: true,
     clickable: false,
     inherit: false,
+    border: true,
   },
 )
 
 const roleRef = toRef(props, 'role')
-const descriptionRef = toRef(props, 'description')
 const clickableRef = toRef(props, 'clickable')
 const inheritRef = toRef(props, 'inherit')
+const borderRef = toRef(props, 'border')
 
 const roleProperties = computed(() => {
   const role = roleRef.value
@@ -27,13 +27,11 @@ const roleProperties = computed(() => {
   const color = RoleColors[role]
   const icon = RoleIcons[role]
   const label = RoleLabels[role]
-  const descriptionText = RoleDescriptions[role]
 
   return {
     color,
     icon,
     label,
-    descriptionText,
   }
 })
 
@@ -42,37 +40,34 @@ console.log('dummy')
 
 <template>
   <div
-    class="flex flex-col py-[3px] px-[8px] gap-[4px] rounded-md bg-gray-50"
+    class="flex items-center !border-0"
     :class="{
-      'cursor-pointer hover:bg-gray-100': clickableRef,
+      'cursor-pointer': clickableRef,
-      'w-[350px]': descriptionRef,
-      'w-[140px] items-center': !descriptionRef,
     }"
+    style="width: fit-content"
   >
-    <div class="flex items-center">
+    <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
-      <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color">
+      <div
-        <div
+        class="badge-text flex items-center gap-[4px]"
-          class="badge-text flex items-center gap-[4px]"
+        :class="{
-          :class="{
+          'text-purple-500': roleProperties.color === 'purple',
-            'text-purple-500': roleProperties.color === 'purple',
+          'text-blue-500': roleProperties.color === 'blue',
-            'text-blue-500': roleProperties.color === 'blue',
+          'text-green-500': roleProperties.color === 'green',
-            'text-green-500': roleProperties.color === 'green',
+          'text-orange-500': roleProperties.color === 'orange',
-            'text-orange-500': roleProperties.color === 'orange',
+          'text-yellow-500': roleProperties.color === 'yellow',
-            'text-yellow-500': roleProperties.color === 'yellow',
+          'text-red-500': roleProperties.color === 'red',
-            'text-red-500': roleProperties.color === 'red',
+          'text-gray-300': !roleProperties.color,
-            'text-gray-300': !roleProperties.color,
+        }"
-          }"
+      >
-        >
+        <GeneralIcon :icon="roleProperties.icon" />
-          <GeneralIcon :icon="roleProperties.icon" />
+        {{ roleProperties.label }}
-          {{ roleProperties.label }}
+        <GeneralIcon v-if="clickableRef" icon="arrowDown" />
-        </div>
+      </div>
-      </NcBadge>
+    </NcBadge>
-      <div class="flex-1"></div>
+    <div class="flex-1"></div>
-      <a-tooltip v-if="inheritRef" placement="bottom">
+    <a-tooltip v-if="inheritRef" placement="bottom">
-        <div class="text-gray-400 text-xs p-1 rounded-md">Current Workspace Role</div>
+      <div class="text-gray-400 text-xs p-1 rounded-md">Current Workspace Role</div>
-      </a-tooltip>
+    </a-tooltip>
-    </div>
-    <div v-if="descriptionRef" class="text-gray-500">{{ roleProperties.descriptionText }}</div>
   </div>
 </template>
 

packages/nc-gui/components/roles/Selector.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { RoleDescriptions } from 'nocodb-sdk'
 import type { RoleLabels } from 'nocodb-sdk'
 import { toRef } from '#imports'
 
@@ -22,25 +23,30 @@ const descriptionRef = toRef(props, 'description')
 
 <template>
   <NcDropdown>
-    <RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" :description="descriptionRef" />
+    <RolesBadge class="border-1" :role="roleRef" :inherit="inheritRef === role" clickable />
     <template #overlay>
       <div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
         <div class="flex flex-col gap-[4px]">
-          <div
+          <div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)">
-            v-for="rl in props.roles"
+            <div
-            :key="rl"
+              class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer"
-            class="cursor-pointer"
+              :class="{
-            :value="rl"
+                'w-[350px]': descriptionRef,
-            :selected="rl === roleRef"
+                'w-[200px]': !descriptionRef,
-            @click="props.onRoleChange(rl)"
+              }"
-          >
+            >
-            <RolesBadge
+              <div class="flex items-center justify-between">
-              class="!bg-white hover:!bg-gray-100"
+                <RolesBadge
-              :class="`nc-role-select-${rl}`"
+                  class="!bg-white hover:!bg-gray-100"
-              :role="rl"
+                  :class="`nc-role-select-${rl}`"
-              :inherit="inheritRef === rl"
+                  :role="rl"
-              :description="descriptionRef"
+                  :inherit="inheritRef === rl"
-            />
+                  :border="false"
+                />
+                <GeneralIcon v-if="rl === roleRef" icon="check" />
+              </div>
+              <div v-if="descriptionRef" class="text-gray-500">{{ RoleDescriptions[rl] }}</div>
+            </div>
           </div>
         </div>
       </div>

packages/nc-gui/components/workspace/CollaboratorsList.vue

@@ -87,6 +87,7 @@ onMounted(async () => {
                 <RolesSelector
                   :role="collab.roles"
                   :roles="accessibleRoles"
+                  :description="false"
                   :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
                 />
               </template>

packages/nc-gui/components/workspace/InviteSection.vue

@@ -57,7 +57,7 @@ onMounted(async () => {
           :role="inviteData.roles"
           :roles="allowedRoles"
           :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
-          :description="false"
+          :description="true"
         />
 
         <a-button