Merge pull request #7192 from TheThingsNetwork/fix/table-styling

Fix table styling

pkg/webui/components/delete-modal-button/index.js

@@ -70,6 +70,8 @@ const DeleteModalButton = props => {
       onApprove={handleDeleteApprove}
       onCancel={onCancel}
       message={message}
+      secondary
+      danger
       modalData={{
         title: sharedMessages.deleteModalConfirmDeletion,
         approveButtonProps: {

pkg/webui/components/safe-inspector/index.js

@@ -111,11 +111,11 @@ const SafeInspector = ({
     const containerWidth = containerElem.current.offsetWidth
     const buttonsWidth = buttonsElem.current.offsetWidth
     const displayWidth = displayElem.current.offsetWidth
-    const netContainerWidth = containerWidth - buttonsWidth - 14
+    const netContainerWidth = containerWidth - buttonsWidth
 
     if (netContainerWidth < displayWidth && !truncated) {
       setTruncated(true)
-    } else if (netContainerWidth > displayWidth && truncated) {
+    } else if (netContainerWidth >= displayWidth && truncated) {
       setTruncated(false)
     }
   }, [truncated])

pkg/webui/components/safe-inspector/safe-inspector.styl

@@ -23,6 +23,7 @@ $height-small = 2rem
   position: relative
   box-sizing: border-box
   line-height: @height - .1rem
+  background-color: var(--c-bg-neutral-min)
 
   &:hover
     .button-transform

pkg/webui/components/table/cell/cell.styl

@@ -19,37 +19,54 @@
   padding: 0 'calc(%s / 2)' % $cs.s
 
   &:first-child
-    padding: 0 'calc(%s / 2)' % $cs.s 0 $cs.s
+    padding-left: 0
 
   &:last-child
-    padding: 0 $cs.s 0 'calc(%s / 2)' % $cs.s
+    padding-right: 0
+
+  &-panel-style
+    &:first-child
+      padding: 0 'calc(%s / 2)' % $cs.s 0 $cs.s
+
+    &:last-child
+      padding: 0 $cs.s 0 'calc(%s / 2)' % $cs.s
 
   &:not(&-centered):not(&-left)
     &:last-child
       text-align: right
+      justify-content: flex-end
+      & > *
+        justify-content: flex-end
 
   &-centered
     text-align: center
 
   &-left
     text-align: left
 
-  &-right > *
+  &-right
     text-align: right
     justify-content: flex-end
+    & > *
+      justify-content: flex-end
 
   &-head
     height: 3rem
     text-transform: uppercase
     font-weight: 600
-    font-size: $fsv2.s
+    font-size: $fs.s
     color: var(--c-text-neutral-light)
     white-space: nowrap
 
+    &-panel-style
+      font-size: $fsv2.s
+
   &-data
     height: 4rem
     white-space: nowrap
-    overflow: hidden
+
+    &:not(:last-child)
+      overflow: hidden
 
     & > *
       overflow: inherit

pkg/webui/components/table/cell/index.js

@@ -21,8 +21,9 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './cell.styl'
 
-const Cell = ({ className, align, small, width, children, ...rest }) => {
+const Cell = ({ className, align, small, width, children, panelStyle, ...rest }) => {
   const cellClassNames = classnames(className, style.cell, {
+    [style.cellPanelStyle]: panelStyle,
     [style.cellCentered]: align === 'center',
     [style.cellLeft]: align === 'left',
     [style.cellRight]: align === 'right',
@@ -46,6 +47,7 @@ Cell.propTypes = {
   className: PropTypes.string,
   /** The number of columns that the cell should occupy. */
   colSpan: PropTypes.number,
+  panelStyle: PropTypes.bool,
   /** A flag indicating whether the row take less height. */
   small: PropTypes.bool,
   /** The width of the cell in percentages. */
@@ -59,10 +61,15 @@ Cell.defaultProps = {
   colSpan: 1,
   small: false,
   width: undefined,
+  panelStyle: false,
 }
 
-const HeadCell = ({ className, content, children, ...rest }) => (
-  <Cell className={classnames(className, style.cellHead)} {...rest}>
+const HeadCell = ({ className, content, children, panelStyle, ...rest }) => (
+  <Cell
+    className={classnames(className, style.cellHead, { [style.cellHeadPanelStyle]: panelStyle })}
+    panelStyle={panelStyle}
+    {...rest}
+  >
     {Boolean(content) && <Message content={content} />}
     {!Boolean(content) && children}
   </Cell>
@@ -73,12 +80,15 @@ HeadCell.propTypes = {
   className: PropTypes.string,
   /** The title of the head cell. */
   content: PropTypes.message,
+  /** A flag indicating whether the table is panel styled. */
+  panelStyle: PropTypes.bool,
 }
 
 HeadCell.defaultProps = {
   children: undefined,
   className: undefined,
   content: undefined,
+  panelStyle: false,
 }
 
 const DataCell = ({ className, children, ...rest }) => (

pkg/webui/components/table/index.js

@@ -48,6 +48,7 @@ const Tabular = ({
   clickable,
   disableSorting,
   onSortRequest,
+  panelStyle,
 }) => {
   const handlePageChange = useCallback(
     page => {
@@ -86,7 +87,7 @@ const Tabular = ({
   )
 
   const columns = (
-    <Table.Row head>
+    <Table.Row head panelStyle={panelStyle}>
       {headers.map((header, key) => (
         <Table.HeadCell
           key={key}
@@ -95,6 +96,7 @@ const Tabular = ({
           name={header.name}
           width={header.width}
           className={header.className}
+          panelStyle={panelStyle}
         >
           {header.sortable && !disableSorting ? (
             <Table.SortButton
@@ -134,13 +136,14 @@ const Tabular = ({
         clickable={rowClickable}
         linkTo={rowHrefSelector ? rowHrefSelector(row) : undefined}
         body
+        panelStyle={panelStyle}
       >
         {headers.map((header, index) => {
           const value = headers[index].getValue
             ? headers[index].getValue(row)
             : getByPath(row, headers[index].name)
           return (
-            <Table.DataCell key={index} align={header.align} small={small}>
+            <Table.DataCell key={index} align={header.align} small={small} panelStyle={panelStyle}>
               {headers[index].render ? headers[index].render(value) : value}
             </Table.DataCell>
           )
@@ -171,7 +174,9 @@ const Tabular = ({
     <div className={classnames(style.container, className)}>
       <Overlay visible={loading} loading={loading} className={style.overlay}>
         <Table minWidth={minWidth}>
-          <Table.Head className={headerClassName}>{columns}</Table.Head>
+          <Table.Head className={headerClassName} panelStyle={panelStyle}>
+            {columns}
+          </Table.Head>
           <Table.Body loading={loading} empty={rows.length === 0} emptyMessage={emptyMessage}>
             {rows}
           </Table.Body>
@@ -248,6 +253,7 @@ Tabular.propTypes = {
   pageSize: PropTypes.number,
   /** A flag identifying whether the table should have pagination. */
   paginated: PropTypes.bool,
+  panelStyle: PropTypes.bool,
   /** A selector to determine the `href`/`to` prop of the rendered rows. */
   rowHrefSelector: PropTypes.func,
   /** A selector to determine the `key` prop of the rendered rows. */
@@ -280,6 +286,7 @@ Tabular.defaultProps = {
   rowHrefSelector: undefined,
   disableSorting: false,
   headerClassName: undefined,
+  panelStyle: false,
 }
 
 export { Tabular as default, Table }

pkg/webui/components/table/row/index.js

@@ -32,6 +32,7 @@ const Row = ({
   head,
   footer,
   linkTo,
+  panelStyle,
 }) => {
   const handleClick = useCallback(
     evt => {
@@ -62,8 +63,8 @@ const Row = ({
 
   const rowClassNames = classnames(className, style.row, {
     [style.clickable]: body && clickable,
-    [style.rowHead]: head,
-    [style.rowBody]: body,
+    [style.rowHead]: head && !panelStyle,
+    [style.rowBody]: body && !panelStyle,
     [style.rowFooter]: footer,
   })
 
@@ -105,6 +106,7 @@ Row.propTypes = {
    */
   onClick: PropTypes.func,
   onMouseDown: PropTypes.func,
+  panelStyle: PropTypes.bool,
 }
 
 Row.defaultProps = {
@@ -118,6 +120,7 @@ Row.defaultProps = {
   onMouseDown: () => null,
   id: undefined,
   linkTo: undefined,
+  panelStyle: false,
 }
 
 export default Row

pkg/webui/components/table/row/row.styl

@@ -16,18 +16,15 @@
   display: table-row
   color: var(--c-text-neutral-light)
 
-  &-head
-    border-bottom: 1px solid var(--c-border-neutral-extralight)
-
   &-body&:not(:last-child)
-    border-bottom: 1px solid var(--c-border-neutral-extralight)
+    border-bottom: 1px solid var(--c-border-neutral-light)
 
   &-footer
     display: flex
 
 .clickable
   cursor: pointer
-  transition: background-color $ad.s linear
+  transition: background-color $ad.xs linear
   color: unset
 
   &:hover

pkg/webui/components/table/table/index.js

@@ -38,16 +38,25 @@ Empty.defaultProps = {
   message: undefined,
 }
 
-const Head = ({ className, ...props }) => (
-  <div {...props} className={classnames(className, style.sectionHeader)} />
+const Head = ({ className, panelStyle, children, ...props }) => (
+  <>
+    <div {...props} className={classnames(className, style.sectionHeader)}>
+      {!panelStyle && <div className={style.sectionDivider} />}
+      {children}
+    </div>
+  </>
 )
 
 Head.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   className: PropTypes.string,
+  panelStyle: PropTypes.bool,
 }
 
 Head.defaultProps = {
   className: undefined,
+  panelStyle: false,
+  children: undefined,
 }
 
 const Body = ({ className, empty, loading, emptyMessage, ...props }) => {

pkg/webui/components/table/table/table.styl

@@ -28,6 +28,15 @@
 
 .section
 
+  // Hacky way of extending the header row by adding a divider between the header and the body.
+  &-divider
+    position: absolute
+    bottom: 0
+    left: - $cs.l
+    right: - $cs.l
+    height: 1px
+    background: var(--c-border-neutral-light)
+
   &-header
     position: sticky
     background: var(--c-bg-neutral-min)

pkg/webui/components/tabs/index.js

@@ -34,9 +34,13 @@ const Tabs = ({
   onTabChange,
   divider,
   narrow,
+  toggleStyle,
 }) => (
   <ul
-    className={classnames(className, style.tabs, { [style.divider]: divider })}
+    className={classnames(className, style.tabs, {
+      [style.divider]: divider,
+      [style.tabsToggleStyle]: toggleStyle,
+    })}
     data-test-id="tabs"
   >
     {tabs.map(
@@ -53,6 +57,7 @@ const Tabs = ({
             exact={exact}
             tabClassName={individualTabClassName}
             className={tabItemClassName}
+            toggleStyle={toggleStyle}
           >
             {icon && <Icon icon={icon} className={style.icon} />}
             <Message content={title} />
@@ -86,6 +91,7 @@ Tabs.propTypes = {
       hidden: PropTypes.bool,
     }),
   ).isRequired,
+  toggleStyle: PropTypes.bool,
 }
 
 Tabs.defaultProps = {
@@ -96,6 +102,7 @@ Tabs.defaultProps = {
   onTabChange: () => null,
   divider: false,
   narrow: false,
+  toggleStyle: false,
 }
 
 export default Tabs

pkg/webui/components/tabs/tab/index.js

@@ -32,6 +32,7 @@ const Tab = props => {
     link,
     exact = true,
     tabClassName,
+    toggleStyle,
     ...rest
   } = props
 
@@ -45,9 +46,11 @@ const Tab = props => {
 
   const tabItemClassNames = classnames(className, style.tabItem, {
     [style.tabItemNarrow]: narrow,
-    [style.tabItemActive]: !disabled && active,
-    [style.tabItemDefault]: !disabled && !active,
+    [style.tabItemActive]: !toggleStyle && !disabled && active,
+    [style.tabItemDefault]: !toggleStyle && !disabled && !active,
     [style.tabItemDisabled]: disabled,
+    [style.tabItemToggleStyle]: toggleStyle,
+    [style.tabItemToggleStyleActive]: toggleStyle && !disabled && active,
   })
 
   // There is no support for disabled on anchors in html and hence in
@@ -98,6 +101,8 @@ Tab.propTypes = {
    */
   onClick: PropTypes.func,
   tabClassName: PropTypes.string,
+  /** A flag specifying whether the tab should render a toggle style. */
+  toggleStyle: PropTypes.bool,
 }
 
 Tab.defaultProps = {
@@ -110,6 +115,7 @@ Tab.defaultProps = {
   disabled: false,
   narrow: false,
   exact: true,
+  toggleStyle: false,
 }
 
 export default Tab