From 3ac46747ed742d5892e1d4b83b67bc3a7f7bd310 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 24 Jan 2025 12:09:06 -0400
Subject: [PATCH] FOUR-20635: Ui update border of the table

---
 resources/jscomposition/base/table/BaseTable.vue  |  6 +++---
 resources/jscomposition/base/table/THeader.vue    |  6 +++---
 .../base/table/composables/columnComposable.js    |  4 ----
 .../cases/casesMain/CasesDataSection.vue          |  1 +
 .../system/table/cell/CaseTitleCell.vue           | 12 ++++--------
 .../jscomposition/system/table/cell/LinkCell.vue  | 13 +++++--------
 .../system/table/cell/ParticipantsCell.vue        |  2 +-
 .../system/table/cell/TruncatedColumn.vue         | 15 ++++++---------
 .../TruncatedGroupOptionsCell.vue                 |  2 +-
 .../table/filter/defaultFilter/FilterColumn.vue   | 14 ++++++++------
 10 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 224638f0ae..36d0677265 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/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"
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index 9689007640..6873144137 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/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>
diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js
index 1daf93c845..2955a83db0 100644
--- a/resources/jscomposition/base/table/composables/columnComposable.js
+++ b/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);
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index e59f6d178e..e64ef76429 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -8,6 +8,7 @@
       ref="table"
       :columns="columnsConfig"
       :data="data"
+      class="tw-text-gray-600"
       :placeholder="showPlaceholder"
       @changeFilter="onChangeFilter">
       <template #placeholder>
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index 928f7b202b..7af7e1d259 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/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>
diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
index fbe32a434e..32c28fc8f6 100644
--- a/resources/jscomposition/system/table/cell/LinkCell.vue
+++ b/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>
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index 78936bef24..b6c09c29ae 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/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"
diff --git a/resources/jscomposition/system/table/cell/TruncatedColumn.vue b/resources/jscomposition/system/table/cell/TruncatedColumn.vue
index 4983db1129..2fcd4d275f 100644
--- a/resources/jscomposition/system/table/cell/TruncatedColumn.vue
+++ b/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>
diff --git a/resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/TruncatedGroupOptionsCell.vue b/resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/TruncatedGroupOptionsCell.vue
index 98500babae..e9431fc22b 100644
--- a/resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/TruncatedGroupOptionsCell.vue
+++ b/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]) }}
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
index d99eeefe2e..6bb919016a 100644
--- a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
@@ -4,15 +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">
+        <i
+          :class="iconClass()"
+          @click.prevent="onClick" />
+      </div>
       <template #content>
         <div
           class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between
-            tw-font-normal tw-bg-white tw-text-gray-600tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
+            tw-font-normal tw-bg-white tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
           <SortingButtons
             @asc="onAsc"
             @desc="onDesc" />