Merge pull request #7042 from aignatov-bio/ai-sci-data-tables-css-fixes

Data table small css fixes

app/assets/stylesheets/shared/ag_table.scss

@@ -1,30 +1,30 @@
 .ag-root-wrapper {
   --agg-row-border-color: var(--sn-light-grey);
   --ag-odd-row-background-color: var(--sn-white);
-  --ag-header-background-color: transparent;
+  --ag-header-background-color: var(--sn-light-grey);
   --ag-selected-row-background-color: var(--sn-super-light-blue);
   --ag-range-selection-border: var(--sn-science-blue);
   --ag-grid-size: .5rem;
-  --ag-cell-horizontal-padding: calc(var(--ag-grid-size) * 2);
   --ag-row-hover-color: var(--sn-super-light-grey);
-  --ag-header-column-resize-handle-height: 100%;
-  --ag-header-column-resize-handle-color: var(--sn-sleepy-grey);
+  --ag-header-column-resize-handle-height: 1rem;
+  --ag-header-column-resize-handle-color: var(--sn-grey);
   --ag-header-column-resize-handle-width: 1px;
-  --ag-row-border-width: 0px;
+  --ag-row-border-width: 1px;
   --ag-icon-font-code-checkbox-unchecked: asset-url("checkbox/default.svg");
   --ag-icon-font-code-checkbox-checked: asset-url("checkbox/checked.svg");
   --ag-icon-font-code-checkbox-indeterminate: asset-url("checkbox/indeterminate.svg");
   --ag-input-focus-box-shadow: none;
+  --ag-cell-horizontal-padding: .75rem;
 
   border: 0;
 
-  .ag-header {
-    border-bottom: 0;
+  .ag-cell {
+    border: 0;
   }
 
-  .ag-pinned-left-header,
-  .ag-header-container {
-    background-color: var(--sn-light-grey);
+  .ag-header {
+    border-bottom: 0;
+    border-radius: .25rem .25rem 0 0;
   }
 
   .ag-input-field-input {

app/javascript/vue/my_modules/renderers/designated_users.vue

@@ -1,7 +1,7 @@
 <template>
   <GeneralDropdown @open="loadUsers" @close="closeFlyout">
     <template v-slot:field>
-      <div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-10" @click="openAccessModal">
+      <div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-9" @click="openAccessModal">
         <div v-for="(user, i) in visibleUsers" :key="i" :title="user.full_name">
           <img :src="user.avatar" class="w-7 h-7" />
         </div>

app/javascript/vue/my_modules/renderers/due_date.vue

@@ -62,7 +62,7 @@ export default {
           due_date: this.formatDate(value)
         }
       }).then(() => {
-        this.params.dtComponent.loadData();
+        this.params.dtComponent.updateTable();
       });
     },
     formatDate(date) {

app/javascript/vue/projects/renderers/users.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-10" @click="openAccessModal">
+  <div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-9" @click="openAccessModal">
     <div v-for="(user, i) in visibleUsers" :key="i" :title="user.full_name">
       <img :src="user.avatar" class="w-7 h-7" />
     </div>

app/javascript/vue/shared/datatable/table.vue

@@ -198,7 +198,9 @@ export default {
     },
     gridOptions() {
       return {
-        suppressCellFocus: true
+        suppressCellFocus: true,
+        rowHeight: 40,
+        headerHeight: 40
       };
     },
     extendedColumnDefs() {
@@ -218,9 +220,9 @@ export default {
           headerCheckboxSelectionFilteredOnly: true,
           checkboxSelection: true,
           suppressMovable: true,
-          width: 48,
-          minWidth: 48,
-          maxWidth: 48,
+          width: 40,
+          minWidth: 40,
+          maxWidth: 40,
           resizable: true,
           pinned: 'left',
           lockPosition: 'left'
@@ -332,7 +334,7 @@ export default {
     },
     getRowClass() {
       if (this.currentViewMode === 'archived') {
-        return '!bg-sn-light-grey';
+        return '!bg-sn-super-light-grey';
       }
       return '';
     },

app/javascript/vue/shared/datatable/tableHeader.js

@@ -4,10 +4,10 @@ export default {
          @click="onSortRequested((activeSort == 'asc' ? 'desc' : 'asc'), $event)">
       <div v-if="params.html" class="customHeaderLabel truncate" v-html="params.html"></div>
       <div v-else class="customHeaderLabel truncate">{{ params.displayName }}</div>
-      <div v-if="activeSort == 'asc'" class="customSortDownLabel text-sn-sleepy-grey">
+      <div v-if="activeSort == 'asc'" class="customSortDownLabel text-sn-black">
         <i class="sn-icon sn-icon-sort-up"></i>
       </div>
-      <div v-if="activeSort == 'desc'" class="customSortUpLabel text-sn-sleepy-grey">
+      <div v-if="activeSort == 'desc'" class="customSortUpLabel text-sn-black">
         <i class="sn-icon sn-icon-sort-down"></i>
       </div>
     </div>

app/javascript/vue/shared/datatable/toolbar.vue

@@ -26,7 +26,7 @@
         <MenuDropdown
           v-if="viewRenders"
           :listItems="this.viewRendersMenu"
-          :btnClasses="'btn btn-light icon-btn'"
+          :btnClasses="'btn btn-light icon-btn btn-black'"
           :btnText="i18n.t(`toolbar.${currentViewRender}_view`)"
           :caret="true"
           :position="'right'"
@@ -36,7 +36,7 @@
         <MenuDropdown
           v-if="archivedPageUrl"
           :listItems="this.viewModesMenu"
-          :btnClasses="'btn btn-light icon-btn'"
+          :btnClasses="'btn btn-light icon-btn btn-black'"
           :btnText="i18n.t(`projects.index.${currentViewMode}`)"
           :caret="true"
           :position="'right'"
@@ -67,18 +67,18 @@
         <i v-else class="sn-icon sn-icon-close !m-2.5 !ml-auto right-0 cursor-pointer z-10"
                   @click="$emit('search:change', '')"></i>
       </div>
+      <FilterDropdown :filters="filters" @applyFilters="applyFilters" />
       <button
         v-if="currentViewRender === 'table'"
         @click="showColumnsModal = true"
         :title="i18n.t('experiments.table.column_display_modal.title')"
-        class="btn btn-light icon-btn"
+        class="btn btn-light icon-btn btn-black"
       >
-        <i class="sn-icon sn-icon-reports"></i>
+        <i class="sn-icon sn-icon-manage-table"></i>
       </button>
-      <FilterDropdown :filters="filters" @applyFilters="applyFilters" />
       <GeneralDropdown v-if="currentViewRender === 'cards'" ref="dropdown" position="right">
         <template v-slot:field>
-          <button class="btn btn-light icon-btn">
+          <button class="btn btn-light icon-btn btn-black">
             <i class="sn-icon sn-icon-sort-down"></i>
           </button>
         </template>

app/javascript/vue/shared/filters/filter_dropdown.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <GeneralDropdown ref="dropdown" position="right" @close="$emit('applyFilters', filterValues)">
       <template v-slot:field>
-        <button class="btn btn-light icon-btn"
+        <button class="btn btn-light icon-btn btn-black"
                 :title="i18n.t('filters_modal.title')">
           <i class="sn-icon sn-icon-filter"></i>
           <div