diff --git a/package.json b/package.json index f6df93156..e1851be63 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@netdata/netdata-ui", - "version": "5.0.67", + "version": "5.0.68", "description": "netdata UI kit", "main": "dist/index.js", "module": "dist/es6/index.js", diff --git a/src/components/button/styled.js b/src/components/button/styled.js index db0b340de..e712aa6e9 100644 --- a/src/components/button/styled.js +++ b/src/components/button/styled.js @@ -125,7 +125,13 @@ export const StyledButton = styled.button.attrs( ({ groupFirst, groupLast, groupMiddle, ...props }) => ({ padding: props.padding || props.tiny ? [0.5, 1] : props.small ? [1, 3] : [2], colors: colorsByFlavour(props), - round: groupFirst ? { side: "left" } : groupLast ? { side: "right" } : !groupMiddle, + round: groupFirst + ? { side: "left", size: 0.5 } + : groupLast + ? { side: "right", size: 0.5 } + : groupMiddle + ? false + : 0.5, ...withTheme(props), }) )` @@ -197,13 +203,13 @@ export const StyledButton = styled.button.attrs( ? typeof props.iconWidth === "string" ? props.iconWidth : `${props.iconWidth}px` - : getSizeBy(2)(props)}; + : getSizeBy(1.75)(props)}; width: ${props => props.iconHeight ? typeof props.iconHeight === "string" ? props.iconHeight : `${props.iconHeight}px` - : getSizeBy(2)(props)}; + : getSizeBy(1.75)(props)}; fill: ${props => props.colors.iconColor(props)}; } diff --git a/src/components/table/body/header/cell.js b/src/components/table/body/header/cell.js index e3db5a76b..550b954b1 100644 --- a/src/components/table/body/header/cell.js +++ b/src/components/table/body/header/cell.js @@ -69,6 +69,7 @@ const BodyHeaderCell = ({ : header.colSpan } width={`${header.subHeaders.length ? header.subHeaders.reduce((s, h) => s + h.column.getSize(), 0) : column.getSize()}px`} + height={{ min: "45px" }} position="relative" {...(column.getCanSort() && coloredSortedColumn && @@ -80,8 +81,16 @@ const BodyHeaderCell = ({ {...headStyles} column > - + ({ active ? getColor("accent") : green ? getColor(["transparent", "full"]) : getColor("border")}; box-sizing: border-box; - border-radius: 4px 4px 0 0; + border-radius: 2px 2px 0 0; max-width: ${({ maxWidth }) => maxWidth ?? getSizeBy(26)}; height: ${({ small, green }) =>