FOUR-20635: Ui update border of the table

resources/jscomposition/base/table/BaseTable.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
-      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto tw-overflow-y-auto">
+    class="tw-w-full tw-relative tw-text-sm
+      tw-border tw-rounded-xl tw-border-gray-200 tw-overflow-hidden tw-overflow-x-auto tw-overflow-y-auto">
     <table
       class="tw-w-full tw-border-collapse"
       :class="{
         'tw-table-fixed':getDefaultConfig(config).tableFixed
       }">
-      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-[9] tw-bg-gray-100">
+      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-[9] tw-bg-gray-50">
         <tr>
           <THeader
             v-for="(column, index) in columns"

resources/jscomposition/base/table/THeader.vue

@@ -10,13 +10,13 @@
       </slot>
     </div>
 
-    <div class="tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-5 tw-flex tw-items-center">
+    <div class="tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-5 tw-flex tw-items-center tw-mr-1">
       <slot name="filter" />
     </div>
 
     <div
-      class="tw-absolute tw-right-0 tw-top-0 tw-w-1 tw-border-r
-        tw-h-full tw-cursor-col-resize tw-select-none tw-border-gray-400"
+      class="tw-absolute tw-right-0 tw-top-0 tw-w-1.5 tw-border-r hover:tw-border-blue-400 hover:tw-border-r-2
+        tw-h-full tw-cursor-col-resize tw-select-none tw-border-gray-300"
       @mousedown="column.resizable ? columnResize.startResize($event) : null" />
   </th>
 </template>

resources/jscomposition/base/table/composables/columnComposable.js

@@ -20,9 +20,6 @@ export const columnResizeComposable = (column) => {
       const diff = event.pageX - startX.value;
       const min = minWidth;
       const currentWidth = Math.max(min, startWidth.value + diff);
-
-      console.log("doResize", currentWidth);
-
       column.width = currentWidth;
     }
   };
@@ -40,7 +37,6 @@ export const columnResizeComposable = (column) => {
     isResizing.value = true;
     startX.value = event.pageX;
     startWidth.value = column.width || minWidth;
-    console.log("startResize", startWidth.value);
 
     document.addEventListener("mousemove", doResize);
     document.addEventListener("mouseup", stopResize);

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -20,6 +20,7 @@
       ref="table"
       :columns="columnsConfig"
       :data="data"
+      class="tw-text-gray-600"
       :placeholder="showPlaceholder"
       @changeFilter="onChangeFilter"
       @resetFilters="onChangeFilter">

resources/jscomposition/system/table/cell/CaseTitleCell.vue

@@ -3,22 +3,18 @@
     <a
       v-if="href !== null"
       class="hover:tw-text-blue-400 tw-text-gray-500"
-      :href="href(row)"
-    >
+      :href="href(row)">
       <case-title
         :title="row.case_title_formatted"
-        :default-value="getValue()"
-      />
+        :default-value="getValue()" />
     </a>
     <span
       v-else
       class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
-      @click.prevent="onClick"
-    >
+      @click.prevent="onClick">
       <case-title
         :title="row.case_title_formatted"
-        :default-value="getValue()"
-      />
+        :default-value="getValue()" />
     </span>
   </div>
 </template>

resources/jscomposition/system/table/cell/LinkCell.vue

@@ -1,19 +1,16 @@
 <template>
   <div
-    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-p-3"
-  >
+    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-p-3">
     <a
       v-if="href !== null"
-      class="hover:tw-text-blue-400 tw-text-gray-500"
-      :href="href(row)"
-    >
+      class="hover:tw-text-blue-400 tw-text-gray-600"
+      :href="href(row)">
       {{ getValue() }}
     </a>
     <span
       v-else
-      class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
-      @click.prevent="onClick"
-    >
+      class="hover:tw-text-blue-400 tw-text-gray-600 hover:tw-cursor-pointer"
+      @click.prevent="onClick">
       {{ getValue() }}
     </span>
   </div>

resources/jscomposition/system/table/cell/ParticipantsCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-left">
+  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-left tw-px-1 tw-text-gray-500">
     <div
       v-for="(participant, index) in participants"
       :key="index"

resources/jscomposition/system/table/cell/TruncatedColumn.vue

@@ -11,26 +11,23 @@
       v-model="show"
       :hover="false"
       position="bottom"
-      class="!tw-absolute tw-right-0 tw-top-0  tw-h-full tw-flex tw-items-center"
-    >
+      class="!tw-absolute tw-right-0 tw-top-0  tw-h-full tw-flex tw-items-center">
       <div
-        class="tw-self-center tw-px-2 tw-rounded-md hover:tw-cursor-pointer hover:tw-bg-gray-200 tw-bg-white "
-        @click.prevent="onClick"
-      >
+        class="tw-text-xs tw-py-1 tw-px-1 hover:tw-cursor-pointer
+        hover:tw-bg-gray-200 tw-rounded"
+        @click.prevent="onClick">
         <i class="fas fa-ellipsis-v" />
       </div>
 
       <template #content>
         <ul
           class="tw-bg-white tw-list-none tw-text-gray-600
-            tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300"
-        >
+            tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
           <template v-for="(option, index) in optionsModel">
             <li
               v-if="index > 0"
               :key="index"
-              class="hover:tw-bg-gray-100"
-            >
+              class="hover:tw-bg-gray-100">
               <span class="tw-flex tw-py-2 tw-px-4 transition duration-300">
                 {{ getValueOption(option, index) }}
               </span>

resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/TruncatedGroupOptionsCell.vue

@@ -11,7 +11,7 @@
       </a>
       <span
         v-else
-        class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
+        class="hover:tw-text-blue-400 hover:tw-cursor-pointer"
         href="#"
         @click.prevent.stop="onClickOption(optionsModel[0].options[0])">
         {{ getValueOption(optionsModel[0].options[0]) }}

resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue

@@ -4,13 +4,17 @@
       v-model="show"
       :hover="false"
       position="bottom">
-      <i
-        class="hover:tw-cursor-pointer hover:hover:tw-text-blue-500"
-        :class="iconClass()"
-        @click.prevent="onClick" />
-
+      <div
+        class="tw-text-xs tw-py-1 tw-px-1 hover:tw-cursor-pointer
+        hover:tw-bg-gray-200 tw-rounded"
+        @click.prevent="onClick">
+        <i :class="iconClass()" />
+      </div>
       <template #content>
         <div
+          :class="{
+            'tw-h-60': filter.operators,
+          }"
           class="tw-shadow-md tw-text-xs tw-space-y-2 tw-flex tw-flex-col tw-justify-between
             tw-font-normal tw-bg-white tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
           <div