Normalize the sortableTable on about:preferences

app/renderer/about/bookmarks/bookmarkTitleHeader.js

@@ -23,7 +23,7 @@ class BookmarkTitleHeader extends ImmutableComponent {
     windowActions.addBookmark(newBookmark)
   }
   render () {
-    return <div className='th-inner'>
+    return <div>
       <span data-l10n-id={this.props.heading} />
       <span className='addBookmark'
         data-l10n-id='addBookmark'

app/renderer/components/common/sortableTable.js

@@ -254,10 +254,6 @@ class SortableTable extends React.Component {
     return this.props.columnClassNames &&
       this.props.columnClassNames.length === this.props.headings.length
   }
-  get hasBodyClassNames () {
-    return this.props.bodyClassNames &&
-      this.props.bodyClassNames.length === this.props.rows.length
-  }
   get hasContextMenu () {
     return typeof this.props.onContextMenu === 'function' &&
       typeof this.props.contextMenuName === 'string'
@@ -389,12 +385,10 @@ class SortableTable extends React.Component {
         const cell = typeof item === 'object' ? item.cell : item
 
         let hasColumnClassNames = (this.hasColumnClassNames ? this.props.columnClassNames[j] : '')
-        let customCellClassesStr = (this.props.customCellClasses ? this.props.customCellClasses : '')
 
         return <td className={cx({
           [hasColumnClassNames]: true,
-          [customCellClassesStr]: true,
-          [css(styles.table__tbody__tr__td, this.props.smallRow && styles.table__tbody__tr_smallRow__td)]: true
+          [css(styles.table__tbody__tr__td, this.props.smallRow && styles.table__tbody__tr_smallRow__td, this.props.columnStyles && this.props.columnStyles[j])]: true
         })}
           data-sort={value}
           data-td-index={`${j}`}
@@ -429,7 +423,7 @@ class SortableTable extends React.Component {
           data-test-id={this.stateOwner.state.selection.includes(this.getGlobalIndex(currentIndex)) ? 'selected' : null}
           data-row-index={`${currentIndex}`}
           className={cx({
-            [css(styles.table__tbody__tr, this.props.largeRow && styles.table__tbody__tr_largeRow)]: true,
+            [css(styles.table__tbody__tr, this.props.smallRow && styles.table__tbody__tr_smallRow, this.props.largeRow && styles.table__tbody__tr_largeRow)]: true,
             [classes.join(' ')]: classes
           })}>{entry}</tr>
         : null
@@ -442,7 +436,7 @@ class SortableTable extends React.Component {
       return this.props.rows.map((rows, i) => {
         const content = this.generateTableRows(rows, i)
         return (content.length > 0)
-          ? <tbody className={this.hasBodyClassNames ? this.props.bodyClassNames[i] : undefined} data-tbody-index={`${i}`}>
+          ? <tbody className={css(this.props.bodyStyles && this.props.bodyStyles[i])} data-tbody-index={`${i}`}>
             {content}
           </tbody>
         : null
@@ -482,11 +476,12 @@ class SortableTable extends React.Component {
             const headerClasses = {
               'sort-header': true,
               'sort-default': this.sortingDisabled || heading === this.props.defaultHeading,
-              [css(styles.table__th)]: true
+              [css(styles.table__th, this.props.smallRow && styles.table__th_smallRow)]: true
             }
             const isString = typeof heading === 'string'
             const sortMethod = this.sortingDisabled ? 'none' : (dataType === 'number' ? 'number' : undefined)
             if (isString) headerClasses['heading-' + heading] = true
+
             return <th className={cx(headerClasses)}
               data-sort-method={sortMethod}
               data-sort-order={this.props.defaultHeadingSortOrder}
@@ -497,11 +492,11 @@ class SortableTable extends React.Component {
             >
               {
                 isString
-                  ? <div className={cx({
-                    'th-inner': true,
-                    [css(styles.table__th__inner, this.props.smallRow && styles.table__th__inner_smallRow)]: true,
-                    [this.props.headerClassNames]: !!this.props.headerClassNames
-                  })} data-l10n-id={heading} />
+                  ? <div className={css(
+                    styles.table__th__inner,
+                    this.props.smallRow && styles.table__th__inner_smallRow,
+                    this.props.headerStyles
+                  )} data-l10n-id={heading} />
                   : heading
               }
             </th>
@@ -532,12 +527,13 @@ const styles = StyleSheet.create({
   },
 
   table__th: {
+    boxSizing: 'border-box',
     background: `linear-gradient(to bottom, ${globalStyles.color.lightGray}, ${globalStyles.color.veryLightGray})`,
     borderTop: `1px solid ${globalStyles.color.gray}`,
     borderLeft: `1px solid ${globalStyles.color.braveOrange}`,
     textAlign: 'left',
     fontWeight: 300,
-    padding: '1ch',
+    padding: globalStyles.sortableTable.cell.normal.padding,
     whiteSpace: 'nowrap',
 
     // Up/down arrow
@@ -554,6 +550,10 @@ const styles = StyleSheet.create({
     }
   },
 
+  table__th_smallRow: {
+    padding: globalStyles.sortableTable.cell.small.padding
+  },
+
   table__th__inner: {
     display: 'inline-block',
     userSelect: 'none'
@@ -565,7 +565,12 @@ const styles = StyleSheet.create({
   },
 
   table__tbody__tr: {
-    height: '1rem'
+    boxSizing: 'border-box',
+    height: '1.75rem'
+  },
+
+  table__tbody__tr_smallRow: {
+    height: '1.5rem'
   },
 
   // Add 'largeRow' to SortableTable to increase the height of tr.
@@ -574,13 +579,20 @@ const styles = StyleSheet.create({
   },
 
   table__tbody__tr__td: {
-    padding: '.5ch 1ch'
+    boxSizing: 'border-box',
+    paddingTop: `calc(${globalStyles.sortableTable.cell.normal.padding} / 2.25)`,
+    paddingBottom: `calc(${globalStyles.sortableTable.cell.normal.padding} / 2.25)`,
+    paddingRight: `${globalStyles.sortableTable.cell.normal.padding}`,
+    paddingLeft: `${globalStyles.sortableTable.cell.normal.padding}`
   },
 
-  // Add 'smallRow' to SortableTable to decrease padding-top and padding-bottom of td.
+  // Add 'smallRow' to SortableTable to decrease padding values.
   table__tbody__tr_smallRow__td: {
-    paddingTop: '.3ch',
-    paddingBottom: '.3ch'
+    paddingTop: `calc(${globalStyles.sortableTable.cell.small.padding} / 2.25)`,
+    paddingBottom: `calc(${globalStyles.sortableTable.cell.small.padding} / 2.25)`,
+    paddingRight: `${globalStyles.sortableTable.cell.small.padding}`,
+    paddingLeft: `${globalStyles.sortableTable.cell.small.padding}`,
+    height: '1.5rem'
   }
 })