add new var for sorted column higlight, fix table height issue, align header icons (#435)

Co-authored-by: Panos Christophides <panos@netdata.cloud>

Author: christophidesp

src/components/tableV2/core/base-table.js

@@ -140,7 +140,7 @@ Table.HeadCell = forwardRef(
       >
         <Flex>
           {children}
-          <Box position="absolute" top={0.5} right={0.5} width={4} height={4}>
+          <Box position="absolute" top={1} right="12px" width={4} height={4}>
             {tooltipText && (
               <Tooltip align="bottom" content={tooltipText}>
                 <Icon color="nodeBadgeColor" size="small" name="information" />
@@ -214,7 +214,7 @@ Table.SortingHeadCell = forwardRef(
         headStyles={headStyles}
         {...props}
         filter={filter}
-        {...(coloredSortedColumn && !!sortDirection && { background: "successBackground" })}
+        {...(coloredSortedColumn && !!sortDirection && { background: "columnHighlight" })}
       >
         <Box
           onMouseEnter={onMouseEnter}
@@ -230,7 +230,7 @@ Table.SortingHeadCell = forwardRef(
             gap={1}
           >
             {children}
-            <Box position="absolute" top={1} right="-16px">
+            <Box position="absolute" top={0.5} right="-16px">
               <Icon
                 height="16px"
                 width="16px"
@@ -306,7 +306,7 @@ Table.Cell = forwardRef(
         backgroundOpacity={
           isColumnHovering && isRowHovering
             ? rest.backgroundOpacity
-              ? rest.backgroundOpacity + 0.2
+              ? 0.8
               : 1
             : rest.backgroundOpacity || 0.7
         }

src/components/tableV2/core/rows.js

@@ -85,8 +85,8 @@ const Rows = ({
                 {...(cell.column.getCanSort() &&
                   coloredSortedColumn &&
                   !!cell.column.getIsSorted() && {
-                    background: "successBackground",
-                    backgroundOpacity: 0.3,
+                    background: "columnHighlight",
+                    backgroundOpacity: virtualRow.index % 2 == 0 ? "0.2" : "0.4",
                   })}
                 index={virtualRow.index}
                 isRowHovering={row.id === hoveredRow}

src/components/tableV2/features/columnPinning.js

@@ -26,6 +26,7 @@ const ColumnPinning = ({
         position: "sticky",
         left: 0,
         zIndex: 2,
+        height: "fit-content",
       }}
     >
       <FullTable

src/theme/dark/colors.js

@@ -81,6 +81,7 @@ const appColors = {
 
   //Table
   tableRowBg: rawColors.neutral.arsenic,
+  columnHighlight: rawColors.green.poker,
 
   //IconButton
   iconColor: rawColors.neutral.iron,

src/theme/default/colors.js

@@ -81,7 +81,7 @@ const appColors = {
 
   //Table
   tableRowBg: rawColors.neutral.blackhaze,
-
+  columnHighlight: rawColors.green.frostee,
   //IconButton
   iconColor: rawColors.neutral.limedSpruce,
 

src/theme/rawColors.js

@@ -5,6 +5,7 @@ const rawColors = {
     popover: "rgba(18, 36, 50, 0.9)",
   },
   green: {
+    poker: "#2f5446",
     chateau: "#42B861",
     netdata: "#00AB44",
     deyork: "#68C47D",