fix table title, set new color vars, for dropdown table, progress bars etc (#449)

* fix table title, set new color vars, for dropdown table, progress bars etc

* nit

---------

Co-authored-by: Panos Christophides <[email protected]>

Author: christophidesp

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

@@ -27,7 +27,7 @@ const HeaderCell = styled(Box)`
 
 const Table = forwardRef(({ children, width, ...props }, ref) => (
   <Box
-    sx={{ borderCollapse: "separate", "table-layout": "fixed" }}
+    sx={{ borderCollapse: "separate", "table-layout": "fixed", borderSpacing: "0" }}
     ref={ref}
     as="table"
     width={width}
@@ -40,7 +40,7 @@ const Table = forwardRef(({ children, width, ...props }, ref) => (
 Table.Head = forwardRef(({ children, ...props }, ref) => (
   <Box
     ref={ref}
-    sx={{ whiteSpace: "nowrap", zIndex: 1, position: "sticky", top: 0 }}
+    sx={{ whiteSpace: "nowrap", zIndex: 10, position: "sticky", top: 0 }}
     as="thead"
     {...props}
   >
@@ -287,7 +287,7 @@ Table.Cell = forwardRef(
         {...rest}
         background={
           !rest.background && isRowHovering
-            ? "elementBackground"
+            ? "tableRowBgHover"
             : rest.background || (index % 2 == 0 ? "mainBackground" : "tableRowBg")
         }
         backgroundOpacity={

src/components/tableV2/features/globalControls.js

@@ -2,7 +2,7 @@ import React, { memo } from "react"
 import Flex from "src/components/templates/flex"
 import SearchInput from "src/components/search"
 import { Icon } from "src/components/icon"
-import { H4 } from "src/components/typography"
+import { TextBig } from "src/components/typography"
 import { debounce } from "throttle-debounce"
 
 const GlobalControls = ({
@@ -25,9 +25,14 @@ const GlobalControls = ({
       background="mainBackground"
       padding={[0, 0, 4]}
       gap={3}
+      alignItems="center"
       {...tableMeta.bulkActionsStyles}
     >
-      {!!title && <H4>{title}</H4>}
+      {!!title && (
+        <TextBig margin={[0, 0, 0, 3]} strong>
+          {title}
+        </TextBig>
+      )}
       {handleSearch && (
         <Flex width={{ max: 100, base: "40%" }} {...tableMeta.searchContainerStyles}>
           <SearchInput

src/components/tableV2/netdataTable.stories.js

@@ -157,6 +157,7 @@ tableStories.add("Global Filters", () => {
   return (
     <Box width="800px">
       <NetdataTable
+        title="Table Title"
         onGlobalSearchChange={onGlobalSearchChange}
         dataColumns={mockDataColumns}
         data={mockData()}

src/theme/dark/colors.js

@@ -10,6 +10,7 @@ const appColors = {
   disabled: rawColors.neutral.tuna,
   disabledBackground: rawColors.neutral.outerSpace,
   dropdown: rawColors.neutral.arsenic,
+  dropdownShadow: rawColors.shadows.dropdownDark,
   elementBackground: rawColors.neutral.outerSpace,
   elementBackgroundHover: rawColors.neutral.tuna,
   mainBackground: rawColors.neutral.gunmetal,
@@ -81,9 +82,14 @@ const appColors = {
   idleClear: rawColors.neutral.arsenic,
 
   //Table
+  dropdownTable: rawColors.neutral.eerieBlack,
+  tableRowBgHover: rawColors.neutral.ratsbane,
   tableRowBg: rawColors.neutral.arsenic,
   columnHighlight: rawColors.green.poker,
 
+  //Progress Bare
+  progressBg: rawColors.neutral.bluebayoux,
+
   //IconButton
   iconColor: rawColors.neutral.iron,
 

src/theme/default/colors.js

@@ -10,6 +10,7 @@ const appColors = {
   disabled: rawColors.neutral.porcelain,
   disabledBackground: rawColors.neutral.porcelain,
   dropdown: rawColors.neutral.white,
+  dropdownShadow: rawColors.shadows.dropdownLight,
   elementBackground: rawColors.neutral.blackhaze,
   elementBackgroundHover: rawColors.neutral.white,
   mainBackground: rawColors.neutral.white,
@@ -81,11 +82,16 @@ const appColors = {
   idleClear: rawColors.neutral.chineseWhite,
 
   //Table
+  dropdownTable: rawColors.neutral.white,
   tableRowBg: rawColors.neutral.blackhaze,
+  tableRowBgHover: rawColors.neutral.porcelain,
   columnHighlight: rawColors.green.frostee,
   //IconButton
   iconColor: rawColors.neutral.limedSpruce,
 
+  //Progress Bare
+  progressBg: rawColors.neutral.chineseWhite,
+
   //table-resizer
   resizerLine: rawColors.green.vista,
 }

src/theme/rawColors.js

@@ -61,6 +61,10 @@ const rawColors = {
     indigo: "#5790FF",
     cyan: "#00BAE2",
   },
+  shadows: {
+    dropdownLight: "rgba(9, 30, 66, 0.15)",
+    dropdownDark: "rgba(0, 0, 0, 0.4)",
+  },
 }
 
 export default rawColors