Commit6f29727

authored

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

1 parent92a7445 commit6f29727Copy full SHA for 6f29727

File tree

+21

-6

lines changed

+21

-6

lines changed

Lines changed: 1 addition & 1 deletion

Lines changed: 9 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,13 @@ export const StyledButton = styled.button.attrs(`
`125`	`125`	`({ groupFirst, groupLast, groupMiddle, ...props})=>({`
`126`	`126`	`padding:props.padding\|\|props.tiny ?[0.5,1] :props.small ?[1,3] :[2],`
`127`	`127`	`colors:colorsByFlavour(props),`
`128`		`-round:groupFirst ?{side:"left"} :groupLast ?{side:"right"} :!groupMiddle,`
	`128`	`+round:groupFirst`
	`129`	`+ ?{side:"left",size:0.5}`
	`130`	`+ :groupLast`
	`131`	`+ ?{side:"right",size:0.5}`
	`132`	`+ :groupMiddle`
	`133`	`+ ?false`
	`134`	`+ :0.5,`
`129`	`135`	`...withTheme(props),`
`130`	`136`	`})`
`131`	`137`	)`
`@@ -197,13 +203,13 @@ export const StyledButton = styled.button.attrs(`
`197`	`203`	`?typeofprops.iconWidth==="string"`
`198`	`204`	`?props.iconWidth`
`199`	`205`	:`${props.iconWidth}px`
`200`		`- :getSizeBy(2)(props)};`
	`206`	`+ :getSizeBy(1.75)(props)};`
`201`	`207`	`width:${props=>`
`202`	`208`	`props.iconHeight`
`203`	`209`	`?typeofprops.iconHeight==="string"`
`204`	`210`	`?props.iconHeight`
`205`	`211`	:`${props.iconHeight}px`
`206`		`- :getSizeBy(2)(props)};`
	`212`	`+ :getSizeBy(1.75)(props)};`
`207`	`213`	`fill:${props=>props.colors.iconColor(props)};`
`208`	`214`	`}`
`209`	`215`

Lines changed: 10 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ const BodyHeaderCell = ({`
`69`	`69`	`:header.colSpan`
`70`	`70`	`}`
`71`	`71`	width={`${header.subHeaders.length ?header.subHeaders.reduce((s,h)=>s+h.column.getSize(),0) :column.getSize()}px`}
	`72`	`+height={{min:"45px"}}`
`72`	`73`	`position="relative"`
`73`	`74`	`{...(column.getCanSort()&&`
`74`	`75`	`coloredSortedColumn&&`
`@@ -80,8 +81,16 @@ const BodyHeaderCell = ({`
`80`	`81`	`{...headStyles}`
`81`	`82`	`column`
`82`	`83`	`>`
`83`		`-<Flexflexcolumnwidth="100%"alignItems={column.columnDef.align\|\|"start"}gap={1}>`
	`84`	`+<Flex`
	`85`	`+flex`
	`86`	`+column`
	`87`	`+width="100%"`
	`88`	`+alignItems={column.columnDef.align\|\|"start"}`
	`89`	`+justifyContent="center"`
	`90`	`+gap={1}`
	`91`	`+>`
`84`	`92`	`<LabelContainer`
	`93`	`+data-testid="netdata-table-header-cell-label-container"`
`85`	`94`	`alignItems="center"`
`86`	`95`	`cursor={column.getCanSort() ?"pointer" :"default"}`
`87`	`96`	`onClick={column.getCanSort() ?column.getToggleSortingHandler() :undefined}`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export const StyledTab = styled(Flex).attrs(props => ({`
`36`	`36`	`active ?getColor("accent") :green ?getColor(["transparent","full"]) :getColor("border")};`
`37`	`37`	`box-sizing: border-box;`
`38`	`38`
`39`		`- border-radius:4px 4px 0 0;`
	`39`	`+ border-radius:2px 2px 0 0;`
`40`	`40`
`41`	`41`	`max-width:${({ maxWidth})=>maxWidth??getSizeBy(26)};`
`42`	`42`	`height:${({ small, green})=>`

Comments

(0)