style: Apply global style for select dropdown border insted of applying component level

packages/nc-gui/assets/style.scss

@@ -225,6 +225,10 @@ a {
     @apply !rounded-md;
   }
 }
+// select dropdown border style
+.ant-select-dropdown {
+  @apply border-1 border-gray-200
+}
 
 // menu item styling
 .nc-menu-item {
@@ -427,6 +431,9 @@ a {
 .ant-dropdown-menu-submenu {
   @apply !py-0;
   
+  &.ant-dropdown-menu-submenu-popup{
+    @apply border-1 border-gray-200
+  }
   .ant-dropdown-menu,
   .ant-menu {
     @apply m-0 p-0;

packages/nc-gui/components/account/UsersModal.vue

@@ -193,7 +193,7 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role border-1 border-gray-200">
+                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
                       <a-select-option
                         class="nc-role-option"
                         :value="OrgUserRoles.CREATOR"

packages/nc-gui/components/cell/MultiSelect.vue

@@ -387,7 +387,7 @@ const selectedOpts = computed(() => {
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
       :class="{ 'caret-transparent': !hasEditRoles }"
-      :dropdown-class-name="`nc-dropdown-multi-select-cell border-1 border-gray-200 ${isOpen ? 'active' : ''}`"
+      :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
       @search="search"
       @keydown.stop
     >

packages/nc-gui/components/cell/SingleSelect.vue

@@ -291,7 +291,7 @@ const selectedOpt = computed(() => {
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
       :show-arrow="hasEditRoles && !readOnly && active && vModel === null"
-      :dropdown-class-name="`nc-dropdown-single-select-cell border-1 border-gray-200 ${isOpen && active ? 'active' : ''}`"
+      :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
       :show-search="!isMobileMode && isOpen && active"
       @select="onSelect"
       @keydown="onKeydown($event)"

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -451,7 +451,7 @@ const toggleModal = (val: boolean) => {
               <a-select
                 v-model:value="formState.dataSource.client"
                 class="nc-extdb-db-type"
-                dropdown-class-name="nc-dropdown-ext-db-type border-1 border-gray-200"
+                dropdown-class-name="nc-dropdown-ext-db-type"
                 @change="onClientChange"
               >
                 <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
@@ -532,7 +532,7 @@ const toggleModal = (val: boolean) => {
                   <a-form-item label="SSL mode">
                     <a-select
                       v-model:value="formState.sslUse"
-                      dropdown-class-name="nc-dropdown-ssl-mode border-1 border-gray-200"
+                      dropdown-class-name="nc-dropdown-ssl-mode"
                       @select="onSSLModeChange"
                     >
                       <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
@@ -617,7 +617,7 @@ const toggleModal = (val: boolean) => {
                   <a-form-item :label="$t('labels.inflection.tableName')">
                     <a-select
                       v-model:value="formState.inflection.inflectionTable"
-                      dropdown-class-name="nc-dropdown-inflection-table-name border-1 border-gray-200"
+                      dropdown-class-name="nc-dropdown-inflection-table-name"
                     >
                       <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }} </a-select-option>
                     </a-select>
@@ -626,7 +626,7 @@ const toggleModal = (val: boolean) => {
                   <a-form-item :label="$t('labels.inflection.columnName')">
                     <a-select
                       v-model:value="formState.inflection.inflectionColumn"
-                      dropdown-class-name="nc-dropdown-inflection-column-name border-1 border-gray-200"
+                      dropdown-class-name="nc-dropdown-inflection-column-name"
                     >
                       <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }} </a-select-option>
                     </a-select>

packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue

@@ -441,7 +441,7 @@ onMounted(async () => {
                 </div>
               </template>
               <a-form-item label="SSL mode">
-                <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode border-1 border-gray-200" @select="onSSLModeChange">
+                <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
                   <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
                 </a-select>
               </a-form-item>

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

@@ -93,7 +93,6 @@ const pagesList = computed(() => {
       <a-select
         v-model:value="current"
         class="!mr-[2px]"
-        dropdown-class-name="border-1 border-gray-200"
         :options="pagesList"
       >
         <template #suffixIcon>

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

@@ -16,7 +16,7 @@ const emits = defineEmits(['update:value', 'change'])
 const placeholder = computed(() => props.placeholder)
 
 const dropdownClassName = computed(() => {
-  let className = 'nc-select-dropdown border-1 border-gray-200'
+  let className = 'nc-select-dropdown'
   if (props.dropdownClassName) {
     className += ` ${props.dropdownClassName}`
   }

packages/nc-gui/components/smartsheet/ApiSnippet.vue

@@ -186,7 +186,7 @@ watch(activeLang, (newLang) => {
           />
 
           <div v-if="activeLang?.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
-            <a-select v-model:value="selectedClient" style="width: 6rem" dropdown-class-name="nc-dropdown-snippet-active-lang border-1 border-gray-200">
+            <a-select v-model:value="selectedClient" style="width: 6rem" dropdown-class-name="nc-dropdown-snippet-active-lang">
               <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
                 {{ client }}
               </a-select-option>

packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue

@@ -73,7 +73,7 @@ vModel.value.au = !!vModel.value.au */
       </div>
 
       <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
-        <a-select v-model:value="vModel.dt" dropdown-class-name="nc-dropdown-db-type border-1 border-gray-200" @change="onDataTypeChange">
+        <a-select v-model:value="vModel.dt" dropdown-class-name="nc-dropdown-db-type " @change="onDataTypeChange">
           <a-select-option v-for="type in dataTypes" :key="type" :value="type">
             {{ type }}
           </a-select-option>

packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue

@@ -85,7 +85,6 @@ const showBarcodeValueColumnInfoIcon = computed(() => !columnsAllowedAsBarcodeVa
             :options="columnsAllowedAsBarcodeValue"
             :placeholder="$t('placeholder.barcodeColumn')"
             :not-found-content="$t('placeholder.notFoundContent')"
-            dropdown-class-name="border-1 border-gray-200"
             @click.stop
           />
           <div v-if="showBarcodeValueColumnInfoIcon" class="pl-2">
@@ -109,7 +108,6 @@ const showBarcodeValueColumnInfoIcon = computed(() => !columnsAllowedAsBarcodeVa
           v-model:value="vModel.meta.barcodeFormat"
           :options="supportedBarcodeFormats"
           :placeholder="$t('placeholder.selectBarcodeFormat')"
-          dropdown-class-name="border-1 border-gray-200"
           @click.stop
         />
       </a-form-item>

packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue

@@ -78,7 +78,7 @@ watch(
   <a-row>
     <a-col :span="24">
       <a-form-item label="Icon">
-        <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-checkbox-icon border-1 border-gray-200">
+        <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-checkbox-icon">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <div class="flex items-center">
               <component

packages/nc-gui/components/smartsheet/column/DateOptions.vue

@@ -17,7 +17,7 @@ if (!vModel.value.meta?.date_format) {
 
 <template>
   <a-form-item :label="$t('labels.dateFormat')">
-    <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format border-1 border-gray-200">
+    <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
         <div class="flex flex-row items-center">
           <div class="text-xs">

packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue

@@ -22,14 +22,14 @@ if (!vModel.value.meta?.time_format) {
 
 <template>
   <a-form-item :label="$t('labels.dateFormat')">
-    <a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format border-1 border-gray-200">
+    <a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
         {{ format }}
       </a-select-option>
     </a-select>
   </a-form-item>
   <a-form-item :label="$t('labels.timeFormat')">
-    <a-select v-model:value="vModel.meta.time_format" class="nc-time-select" dropdown-class-name="nc-dropdown-time-format border-1 border-gray-200">
+    <a-select v-model:value="vModel.meta.time_format" class="nc-time-select" dropdown-class-name="nc-dropdown-time-format">
       <a-select-option v-for="(format, i) of timeFormats" :key="i" :value="format">
         {{ format }}
       </a-select-option>

packages/nc-gui/components/smartsheet/column/DecimalOptions.vue

@@ -37,7 +37,7 @@ onMounted(() => {
     <a-select
       v-if="vModel.meta?.precision"
       v-model:value="vModel.meta.precision"
-      dropdown-class-name="nc-dropdown-decimal-format border-1 border-gray-200"
+      dropdown-class-name="nc-dropdown-decimal-format"
     >
       <a-select-option v-for="(format, i) of precisionFormats" :key="i" :value="format">
         <div class="flex flex-row items-center">

packages/nc-gui/components/smartsheet/column/DurationOptions.vue

@@ -31,7 +31,7 @@ vModel.value.meta = {
 
     <a-col :span="24">
       <a-form-item :label="$t('labels.durationFormat')">
-        <a-select v-model:value="vModel.meta.duration" class="w-52" dropdown-class-name="nc-dropdown-duration-option border-1 border-gray-200">
+        <a-select v-model:value="vModel.meta.duration" class="w-52" dropdown-class-name="nc-dropdown-duration-option">
           <a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
             {{ duration.title }}
           </a-select-option>

packages/nc-gui/components/smartsheet/column/PercentOptions.vue

@@ -21,7 +21,7 @@ if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].i
   <div class="flex flex-col mt-2 gap-2">
     <div class="flex flex-row space-x-2">
       <a-form-item class="flex w-1/2" :label="$t('placeholder.precision')">
-        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision border-1 border-gray-200">
+        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision">
           <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
             <div class="flex flex-row items-center">
               <div class="text-xs">

packages/nc-gui/components/smartsheet/column/PgBinaryOptions.vue

@@ -28,7 +28,6 @@ vModel.value.meta = {
           v-model:value="vModel.meta.format"
           :placeholder="$t('labels.binaryEncodingFormat')"
           class="!w-full nc-link-singular"
-          dropdown-class-name="border-1 border-gray-200"
         >
           <a-select-option value="escape">{{ $t('general.escape') }}</a-select-option>
           <a-select-option value="hex">{{ $t('general.hex') }}</a-select-option>

packages/nc-gui/components/smartsheet/column/RatingOptions.vue

@@ -72,7 +72,7 @@ watch(
   <a-row :gutter="8">
     <a-col :span="12">
       <a-form-item :label="$t('labels.icon')">
-        <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-rating-icon border-1 border-gray-200">
+        <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-rating-icon">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <div class="flex items-center">
               <component
@@ -96,7 +96,7 @@ watch(
     </a-col>
     <a-col :span="12">
       <a-form-item :label="$t('labels.max')">
-        <a-select v-model:value="vModel.meta.max" class="w-52" dropdown-class-name="nc-dropdown-rating-color border-1 border-gray-200">
+        <a-select v-model:value="vModel.meta.max" class="w-52" dropdown-class-name="nc-dropdown-rating-color">
           <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
             {{ v }}
           </a-select-option>

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -107,7 +107,7 @@ watch(columns, () => {
         :open="isDropdownOpen"
         size="small"
         :dropdown-match-select-width="false"
-        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option w-48 border-1 border-gray-200"
+        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option w-48"
         class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
         @change="onPressEnter"
       >

packages/nc-gui/components/template/Editor.vue

@@ -913,7 +913,7 @@ watch(modelRef, async () => {
                       class="w-52"
                       show-search
                       :filter-option="filterOption"
-                      dropdown-class-name="nc-dropdown-template-uidt  border-1 border-gray-200"
+                      dropdown-class-name="nc-dropdown-template-uidt"
                       @change="handleUIDTChange(record, table)"
                     >
                       <a-select-option v-for="(option, i) of uiTypeOptions" :key="i" :value="option.value">

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

@@ -214,7 +214,7 @@ const emailInput = ref((el) => {
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role border-1 border-gray-200">
+                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
                       <a-select-option
                         class="nc-role-option"
                         :value="WorkspaceUserRoles.CREATOR"

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

@@ -56,7 +56,7 @@ const ownedWorkspaces = computed(() => {
       <div class="prose-xl font-bold self-center my-4">{{ $t('activity.moveProject') }}</div>
 
       <div class="mb-2">{{ $t('objects.workspace') }}</div>
-      <a-select v-model:value="workspaceId" class="w-full" dropdown-class-name="border-1 border-gray-200" show-search>
+      <a-select v-model:value="workspaceId" class="w-full" show-search>
         <a-select-option v-for="workspace of ownedWorkspaces" :key="workspace.id" :value="workspace.id">
           {{ workspace.title }}
         </a-select-option>