Fix List component styling

website/src/ui/Box.js

@@ -2,8 +2,6 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-// TODO: Refactor this to allow setting each border property separately
-
 class Box extends Component {
   static propTypes = {
     borderTop: PropTypes.object,
@@ -13,6 +11,7 @@ class Box extends Component {
     border: PropTypes.object,
     radius: PropTypes.number,
     background: PropTypes.string,
+    style: PropTypes.object,
     children: PropTypes.node,
   }
 
@@ -20,7 +19,7 @@ class Box extends Component {
     let {
       children, background,
       borderTop, borderBottom, borderLeft, borderRight,
-      border, radius } = this.props
+      border, radius, style } = this.props
     const flatten = (border) => {
       if (!border) {
         return null
@@ -44,9 +43,10 @@ class Box extends Component {
 
     return (
       <div style={[
-        { height: '100%', width: '100%', borderTop, borderBottom, borderLeft, borderRight },
+        { height: '100%', width: '100%', boxSizing: 'border-box', borderTop, borderBottom, borderLeft, borderRight },
         background && { backgroundColor: background },
         radius && { borderRadius: radius },
+        style,
       ]}>
         {children}
       </div>

website/src/ui/HeaderButton.js

@@ -26,7 +26,7 @@ class HeaderButton extends Component {
   }
 
   render() {
-    const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+    const size = sizeInfo.headerHeight - 2 * sizeInfo.headerBorderWidth
     const { onClick, icon, image } = this.props
     let content = null
 

website/src/ui/List.js

@@ -6,32 +6,26 @@ import { sizeInfo, colorInfo, fontInfo } from './style'
 
 class List extends Component {
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    // data: PropTypes.array,
+    // render: PropTypes.func,
   }
 
   render() {
     const { children } = this.props
 
     return (
-      <div style={{
+      <Box
-        position: 'absolute',
+        border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
-        width: '100%',
+        radius={sizeInfo.formBoxRadius} style={{
-        height: '100%',
+          position: 'absolute',
-        fontSize: fontInfo.size.large,
+          overflowY: 'hidden',
-        fontFamily: fontInfo.family,
+          fontSize: fontInfo.size.large,
-      }}>
+          fontFamily: fontInfo.family,
-        <Box
+          overflow: 'scroll',
-          border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
+        }}>
-          radius={sizeInfo.formBoxRadius}>
+        {children}
-          <div style={{
+      </Box>
-            height: '100%',
-            width: '100%',
-            overflowY: 'scroll',
-          }}>
-            {children}
-          </div>
-        </Box>
-      </div>
     )
   }
 }
@@ -48,7 +42,7 @@ List.Item = Radium(class ListItem extends Component {
 
     return (
       <div style={{
-        display: 'table-row',
+        width: '100%',
         background: active ? colorInfo.listBackgroundActive : 'transparent',
         ':hover': {
           background: colorInfo.listBackgroundHover
@@ -72,7 +66,6 @@ List.Icon = Radium(class ListIcon extends Component {
 
     return (
       <img src={source} style={{
-        display: 'table-cell',
         verticalAlign: 'middle',
         width: size,
         height: size,
@@ -91,11 +84,8 @@ List.Text = Radium(class ListText extends Component {
 
     return (
       <span style={{
-        display: 'table-cell',
-        width: '100%',
         color: fontInfo.color.normal,
         align: 'left',
-        verticalAlign: 'middle',
         textAlign: 'left',
         cursor: 'default',
       }}>{children}</span>