fix: update table input field dropdown border color and pagination dropdown

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

@@ -226,7 +226,7 @@ const clickHandler = () => {
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-date  children:border-1 children:border-gray-200  ${open ? 'active' : ''} `"
     :open="isOpen"
     @click="clickHandler"
     @update:open="updateOpen"

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

@@ -273,7 +273,7 @@ const isColDisabled = computed(() => {
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-datetime children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     :open="isOpen"
     @click="clickHandler"
     @ok="open = !open"

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

@@ -100,7 +100,7 @@ const openInOSM = () => {
     </div>
     <div v-else data-testid="nc-geo-data-lat-long-set">{{ latLongStr }}</div>
     <template #overlay>
-      <a-form :model="formState" class="flex flex-col w-max-64" @finish="handleFinish">
+      <a-form :model="formState" class="flex flex-col w-max-64 border-1 border-gray-200" @finish="handleFinish">
         <a-form-item>
           <div class="flex mt-4 items-center mx-2">
             <div class="mr-2">{{ $t('labels.lat') }}:</div>

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 ${isOpen ? 'active' : ''}`"
+      :dropdown-class-name="`nc-dropdown-multi-select-cell border-1 border-gray-200 ${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 ${isOpen && active ? 'active' : ''}`"
+      :dropdown-class-name="`nc-dropdown-single-select-cell border-1 border-gray-200 ${isOpen && active ? 'active' : ''}`"
       :show-search="!isMobileMode && isOpen && active"
       @select="onSelect"
       @keydown="onKeydown($event)"

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

@@ -136,7 +136,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :open="isOpen"
-    :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
+    :popup-class-name="`${randomClass} nc-picker-time children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     @click="open = (active || editable) && !open"
     @ok="open = !open"
   >

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

@@ -121,7 +121,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
     :input-read-only="true"
     :open="isOpen"
-    :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-year children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     @click="open = (active || editable) && !open"
     @change="open = (active || editable) && !open"
     @ok="open = !open"

packages/nc-gui/components/dashboard/settings/BaseAudit.vue

@@ -136,12 +136,13 @@ const columns = [
         :total="+totalRows"
         show-less-items
         @change="loadAudits"
+        class="pagination"
       />
     </div>
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .nc-audit-table pre {
   display: table;
   table-layout: fixed;
@@ -150,4 +151,9 @@ const columns = [
   font-size: unset;
   font-family: unset;
 }
+.pagination {
+  .ant-select-dropdown {
+    @apply !border-1 !border-gray-200;
+  }
+}
 </style>

packages/nc-gui/components/general/language/index.vue

@@ -9,7 +9,7 @@
     </div>
 
     <template #overlay>
-      <a-menu class="nc-scrollbar-dark-md min-w-50 max-h-90vh overflow-auto !p-1 m-1 rounded-md">
+      <a-menu class="nc-scrollbar-dark-md min-w-50 max-h-90vh overflow-auto !p-1 m-1 rounded-md border-1 border-gray-200">
         <GeneralLanguageMenu />
       </a-menu>
     </template>

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

@@ -90,7 +90,12 @@ const pagesList = computed(() => {
     </component>
 
     <div v-if="!isMobileMode" class="text-gray-600">
-      <a-select v-model:value="current" class="!mr-[2px]" :options="pagesList">
+      <a-select
+        v-model:value="current"
+        class="!mr-[2px]"
+        dropdown-class-name="border-1 border-gray-200"
+        :options="pagesList"
+      >
         <template #suffixIcon>
           <GeneralIcon icon="arrowDown" class="text-gray-500 nc-select-expand-btn" />
         </template>

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

@@ -15,7 +15,13 @@ const emits = defineEmits(['update:value', 'change'])
 
 const placeholder = computed(() => props.placeholder)
 
-const dropdownClassName = computed(() => props.dropdownClassName)
+const dropdownClassName = computed(() => {
+  let className = 'nc-select-dropdown border-1 border-gray-200'
+  if (props.dropdownClassName) {
+    className += ` ${props.dropdownClassName}`
+  }
+  return className
+})
 
 const showSearch = computed(() => props.showSearch)
 
@@ -37,7 +43,7 @@ const onChange = (value: string) => {
     v-model:value="vModel"
     :placeholder="placeholder"
     class="nc-select"
-    :dropdown-class-name="dropdownClassName ? `nc-select-dropdown  ${dropdownClassName}` : 'nc-select-dropdown'"
+    :dropdown-class-name="dropdownClassName"
     :show-search="showSearch"
     :filter-option="filterOption"
     :dropdown-match-select-width="dropdownMatchSelectWidth"

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">
+    <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format border-1 border-gray-200">
       <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">
+    <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-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">
+    <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-option v-for="(format, i) of timeFormats" :key="i" :value="format">
         {{ format }}
       </a-select-option>

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">
+        <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-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
             {{ duration.title }}
           </a-select-option>

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

@@ -271,7 +271,7 @@ if (props.fromTableExplorer) {
               show-search
               class="nc-column-type-input !rounded"
               :disabled="isKanban || readOnly"
-              dropdown-class-name="nc-dropdown-column-type "
+              dropdown-class-name="nc-dropdown-column-type border-1 border-gray-200"
               @change="onUidtOrIdTypeChange"
               @dblclick="showDeprecated = !showDeprecated"
             >

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

@@ -339,7 +339,7 @@ const loadListData = async ($state: any) => {
               <a-dropdown
                 v-model:visible="colorMenus[index]"
                 :trigger="['click']"
-                overlay-class-name="nc-dropdown-select-color-options"
+                overlay-class-name="nc-dropdown-select-color-options rounded-md overflow-hidden border-1 border-gray-200 "
               >
                 <template #overlay>
                   <LazyGeneralColorPicker

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1804,7 +1804,7 @@ onKeyStroke('ArrowDown', onDown)
             <template #overlay>
               <div class="relative overflow-visible min-h-17 w-10">
                 <div
-                  class="absolute -top-19 flex flex-col h-34.5 w-70 bg-white rounded-lg justify-start overflow-hidden"
+                  class="absolute -top-19 flex flex-col h-34.5 w-70 bg-white rounded-lg border-1 border-gray-200 justify-start overflow-hidden"
                   style="box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px -12px 16px -4px rgba(0, 0, 0, 0.1)"
                   :class="{
                     '-left-44': !isAddNewRecordGridMode,

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -291,7 +291,7 @@ const onInsertAfter = () => {
       <GeneralIcon icon="arrowDown" class="text-grey h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2" />
     </div>
     <template #overlay>
-      <a-menu class="shadow bg-white nc-column-options">
+      <a-menu class="shadow bg-white border-1 border-gray-200 nc-column-options">
         <a-menu-item @click="onEditPress">
           <div class="nc-column-edit nc-header-menu-item">
             <component :is="iconMap.edit" class="text-gray-700 mx-0.65 my-0.75" />

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

@@ -65,7 +65,7 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="w-full bg-white shadow-lg menu-filter-dropdown border-1 border-gray-50 rounded-md overflow-hidden"
+        class="w-full bg-white shadow-lg menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
         data-testid="nc-height-menu"
       >
         <div class="flex flex-col w-full text-sm" @click.stop>

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"
+                      dropdown-class-name="nc-dropdown-template-uidt  border-1 border-gray-200"
                       @change="handleUIDTChange(record, table)"
                     >
                       <a-select-option v-for="(option, i) of uiTypeOptions" :key="i" :value="option.value">