FOUR-20628: Update the size font and color

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"

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`" />

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">

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

@@ -2,15 +2,15 @@
   <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"
         :default-value="getValue()" />
     </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"

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

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>

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"

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"

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

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>