Merge pull request #4770 from kobotoolbox/transparent-data-column-bug

Fix styling for frozen columns in data table
kobotoolbox · Jan 16, 2024 · 4a9d5ed · 4a9d5ed
2 parents 4e1c442 + 4e56206
commit 4a9d5ed
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/jsapp/js/components/submissions/table.es6 b/jsapp/js/components/submissions/table.es6
@@ -990,7 +990,9 @@ export class DataTable extends React.Component {
         col.className = col.className
           ? `is-frozen is-last-frozen ${col.className}`
           : 'is-frozen is-last-frozen';
-        col.headerClassName = 'is-frozen is-last-frozen';
+        col.headerClassName = col.headerClassName
+          ? `is-frozen is-last-frozen ${col.headerClassName}`
+          : 'is-frozen is-last-frozen';
       }
     });
 

diff --git a/jsapp/js/components/submissions/table.scss b/jsapp/js/components/submissions/table.scss
@@ -1,6 +1,7 @@
 @use '~kobo-common/src/styles/colors';
 @use 'scss/z-indexes';
 @use 'js/components/common/checkbox';
+@use 'sass:color';
 
 // These are custom styles for Table View table.
 
@@ -471,11 +472,11 @@ $s-data-table-font: 13px;
   }
 
   .rt-th.is-sorted {
-    background-color: rgba(colors.$kobo-light-teal, 0.5);
+    background-color: color.adjust(colors.$kobo-light-teal, $lightness: 4%);
   }
 
   .rt-td.is-sorted {
-    background-color: rgba(colors.$kobo-light-teal, 0.2);
+    background-color: color.adjust(colors.$kobo-light-teal, $lightness: 8%);
   }
 
   // NOTE: submissions actions column is always frozen as first column