v5.4.0

Author: novykh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.3.4",
+  "version": "5.4.0",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/table/body/header/dragOverlay.js

@@ -5,12 +5,13 @@ import styled from "styled-components"
 import Flex from "@/components/templates/flex"
 import { Text } from "@/components/typography"
 
-const OverlayContainer = styled(Flex)`
-  background: ${({ theme }) => theme.colors.mainBackground};
-  border: 1px solid ${({ theme }) => theme.colors.border};
+const OverlayContainer = styled(Flex).attrs({
+  background: "mainBackground",
+  padding: [2, 4],
+  round: 1,
+  border: true,
+})`
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  padding: 8px 16px;
-  border-radius: 4px;
   opacity: 0.9;
 `
 

src/components/table/body/index.js

@@ -100,7 +100,6 @@ const Body = memo(
         flex="1"
         data-testid={`netdata-table${testPrefix}`}
         onScroll={onScroll}
-        border
       >
         <div
           style={{

src/components/table/components/pagination.js

@@ -21,7 +21,7 @@ const Pagination = ({ table }) => {
       alignItems="center"
       justifyContent="end"
       height="45px"
-      background="mainBackground"
+      background="panelBg"
       border={{ side: "top", color: "borderSecondary" }}
     >
       <IconButton

src/components/table/header/index.js

@@ -36,12 +36,11 @@ const Header = ({
       data-noprint
       width="100%"
       zIndex={10}
-      background="mainBackground"
+      background="panelBg"
       gap={1}
       alignItems="center"
       padding={[2, 3]}
       round={{ side: "top", size: 1 }}
-      border={{ side: ["vertical", "top"] }}
       flexWrap
       {...tableMeta.bulkActionsStyles}
     >

src/theme/dark/colors.js

@@ -130,7 +130,7 @@ const appColors = {
   // Table
   dropdownTable: rawColors.neutral.eerieBlack,
   tableRowBgHover: rawColors.neutral.grey35,
-  tableRowBg: rawColors.neutral.grey10,
+  tableRowBg: rawColors.neutral.grey25,
   tableRowBg2: rawColors.neutral.grey20,
   tableRowBg2Hover: rawColors.neutral.grey35,
   columnHighlight: rawColors.green.green30,

src/theme/default/colors.js

@@ -130,10 +130,10 @@ const appColors = {
 
   // Table
   dropdownTable: rawColors.neutral.white,
-  tableRowBg: rawColors.neutral.grey195,
+  tableRowBg: rawColors.neutral.grey190,
   tableRowBgHover: rawColors.neutral.grey180,
-  tableRowBg2: rawColors.neutral.grey190,
-  tableRowBg2Hover: rawColors.neutral.grey180,
+  tableRowBg2: rawColors.neutral.grey195,
+  tableRowBg2Hover: rawColors.neutral.grey185,
   columnHighlight: rawColors.green.green190,
 
   // IconButton