Update design (#582)

* Set buttons border radius to 2px

* Reduce button icon size to 14px

* Fix tabs border radius

* Give a minimum height to netdata table header

* v5.0.68

Author: kapantzak

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",

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)};
     }
 

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
     >
-      <Flex flex column width="100%" alignItems={column.columnDef.align || "start"} gap={1}>
+      <Flex
+        flex
+        column
+        width="100%"
+        alignItems={column.columnDef.align || "start"}
+        justifyContent="center"
+        gap={1}
+      >
         <LabelContainer
+          data-testid="netdata-table-header-cell-label-container"
           alignItems="center"
           cursor={column.getCanSort() ? "pointer" : "default"}
           onClick={column.getCanSort() ? column.getToggleSortingHandler() : undefined}

src/components/tabs/styled.js

@@ -36,7 +36,7 @@ export const StyledTab = styled(Flex).attrs(props => ({
       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 }) =>