From df546ecc874cb85acf18c086f73dded7915d6e80 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Tue, 28 Jan 2025 14:46:18 -0400
Subject: [PATCH] FOUR-20628: Update the size font and color

---
 .../jscomposition/base/table/BaseTable.vue    |  2 +-
 resources/jscomposition/base/table/TRow.vue   |  2 +-
 .../cases/casesMain/CasesDataSection.vue      |  2 +-
 .../system/table/cell/CaseTitleCell.vue       |  4 +--
 .../system/table/cell/CollapseFormCell.vue    |  2 +-
 .../system/table/cell/LinkCell.vue            |  4 +--
 .../system/table/cell/ParticipantCell.vue     |  1 -
 .../system/table/cell/ParticipantsCell.vue    |  2 +-
 .../system/table/cell/TruncatedColumn.vue     |  4 +--
 .../table/cell/TruncatedOptionsCell.vue       | 36 ++++++++-----------
 10 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 36d0677265..94f9ae2bdc 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -7,7 +7,7 @@
       :class="{
         'tw-table-fixed':getDefaultConfig(config).tableFixed
       }">
-      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-[9] tw-bg-gray-50">
+      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-[9] tw-bg-gray-50 tw-text-[#5C6066] tw-border-[#EBEDEF]">
         <tr>
           <THeader
             v-for="(column, index) in columns"
diff --git a/resources/jscomposition/base/table/TRow.vue b/resources/jscomposition/base/table/TRow.vue
index 4f6e5bfe42..7d6ccfe7c7 100644
--- a/resources/jscomposition/base/table/TRow.vue
+++ b/resources/jscomposition/base/table/TRow.vue
@@ -1,6 +1,6 @@
 <template>
   <tr
-    class="tw-border-b tw-relative"
+    class="tw-border-b tw-relative tw-border-[#EBEDEF]"
     @mouseover="menu = true"
     @mouseleave="menu = false">
     <slot :name="`cell`" />
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index aeb3b60164..998e1efa89 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -20,7 +20,7 @@
       ref="table"
       :columns="columnsConfig"
       :data="data"
-      class="tw-text-gray-600"
+      class="tw-text-[#4F5154]"
       :placeholder="showPlaceholder"
       @changeFilter="onChangeFilter"
       @resetFilters="onChangeFilter">
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index 7af7e1d259..046028f769 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -2,7 +2,7 @@
   <div class="tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <a
       v-if="href !== null"
-      class="hover:tw-text-blue-400 tw-text-gray-500"
+      class="hover:tw-text-blue-400 tw-text-inherit tw-no-underline"
       :href="href(row)">
       <case-title
         :title="row.case_title_formatted"
@@ -10,7 +10,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 text-inherit no-underline hover:tw-cursor-pointer"
       @click.prevent="onClick">
       <case-title
         :title="row.case_title_formatted"
diff --git a/resources/jscomposition/system/table/cell/CollapseFormCell.vue b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
index 93d670285b..b2e7b1919c 100644
--- a/resources/jscomposition/system/table/cell/CollapseFormCell.vue
+++ b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
@@ -3,7 +3,7 @@
     <button
       v-if="show(row, column, columns)"
       type="button"
-      class="tw-rounded-lg tw-bg-white tw-px-2.5 tw-py-1 tw-text-sm tw-font-semibold tw-text-gray-900
+      class="tw-rounded-lg tw-bg-white tw-px-2.5 tw-py-1 tw-text-sm tw-font-semibold
         tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50"
       @click="showScreen">
       <i
diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
index 32c28fc8f6..74f92b0198 100644
--- a/resources/jscomposition/system/table/cell/LinkCell.vue
+++ b/resources/jscomposition/system/table/cell/LinkCell.vue
@@ -3,13 +3,13 @@
     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-600"
+      class="hover:tw-text-blue-400 tw-text-inherit tw-no-underline"
       :href="href(row)">
       {{ getValue() }}
     </a>
     <span
       v-else
-      class="hover:tw-text-blue-400 tw-text-gray-600 hover:tw-cursor-pointer"
+      class="hover:tw-text-blue-400 tw-text-inherit tw-no-underline hover:tw-cursor-pointer"
       @click.prevent="onClick">
       {{ getValue() }}
     </span>
diff --git a/resources/jscomposition/system/table/cell/ParticipantCell.vue b/resources/jscomposition/system/table/cell/ParticipantCell.vue
index dcd80aacdf..f5d6fea848 100644
--- a/resources/jscomposition/system/table/cell/ParticipantCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantCell.vue
@@ -4,7 +4,6 @@
       position="bottom"
       :hover="true">
       <AppAvatar
-        :class="`tw-bg-gray-500`"
         :initials="initials(row, column, columns) || ''"
         :src="src(row, column, columns)"
         class="tw-cursor-pointer"
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index b6c09c29ae..09ac95f371 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 tw-px-1 tw-text-gray-500">
+  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-left tw-px-1">
     <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 2fcd4d275f..cb192d60dc 100644
--- a/resources/jscomposition/system/table/cell/TruncatedColumn.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedColumn.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <div class="tw-overflow-hidden tw-text-ellipsis ">
-      <span class="tw-text-gray-500">
+      <span>
         {{ getValue() }}
       </span>
     </div>
@@ -21,7 +21,7 @@
 
       <template #content>
         <ul
-          class="tw-bg-white tw-list-none tw-text-gray-600
+          class="tw-bg-white tw-list-none
             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
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
index 74b25a3c12..c2ffa9cedb 100644
--- a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -2,21 +2,18 @@
   <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <div
       v-if="optionsModel.length"
-      class="tw-overflow-hidden tw-text-ellipsis"
-    >
+      class="tw-overflow-hidden tw-text-ellipsis">
       <a
         v-if="href !== null"
-        class="hover:tw-text-blue-400 tw-text-gray-500"
-        :href="href(optionsModel[0])"
-      >
+        class="hover:tw-text-blue-400 tw-text-inherit tw-no-underline"
+        :href="href(optionsModel[0])">
         {{ getValueOption(optionsModel[0], 0) }}
       </a>
       <span
         v-else
-        class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
+        class="hover:tw-text-blue-400 tw-text-inherit tw-no-underline hover:tw-cursor-pointer"
         href="#"
-        @click.prevent.stop="onClickOption(optionsModel[0], 0)"
-      >
+        @click.prevent.stop="onClickOption(optionsModel[0], 0)">
         {{ getValueOption(optionsModel[0], 0) }}
       </span>
     </div>
@@ -25,37 +22,32 @@
       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"
-      >
+        @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"
-        >
+          class="tw-bg-white tw-list-none
+            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">
               <a
                 v-if="href !== null"
-                class="tw-flex tw-py-2 tw-px-4 transition duration-300 tw-text-gray-500 hover:tw-bg-gray-200 hover:tw-text-blue-400"
-                :href="href(option)"
-              >
+                class="tw-flex tw-py-2 tw-px-4 transition duration-300
+                  hover:tw-bg-gray-200 hover:tw-text-blue-400"
+                :href="href(option)">
                 {{ getValueOption(option, index) }}
               </a>
               <span
                 v-else
                 class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer"
-                @click.prevent.stop="onClickOption(option, index)"
-              >
+                @click.prevent.stop="onClickOption(option, index)">
                 {{ getValueOption(option, index) }}
               </span>
             </li>