Integrating new form binder

website/src/ui/Box.js

@@ -17,15 +17,36 @@ class Box extends Component {
   }
 
   render() {
-    const { children, background, borderTop, borderBottom, borderLeft,
-      borderRight, border, radius } = this.props
+    let {
+      children, background,
+      borderTop, borderBottom, borderLeft, borderRight,
+      border, radius } = this.props
+    const flatten = (border) => {
+      if (!border) {
+        return null
+      }
+
+      border.style = border.style || 'solid'
+      border.width = border.width || 1
+      border.color = border.color || 'black'
+
+      return (border.width.toString() + 'px ' + border.style + ' ' + border.color)
+    }
+
+    if (border) {
+      borderTop = borderBottom = borderLeft = borderRight = flatten(border)
+    } else {
+      borderTop = flatten(borderTop)
+      borderBottom = flatten(borderBottom)
+      borderLeft = flatten(borderLeft)
+      borderRight = flatten(borderRight)
+    }
 
     return (
       <div style={[
-        { height: '100%', width: '100%' },
+        { height: '100%', width: '100%', borderTop, borderBottom, borderLeft, borderRight },
         background && { backgroundColor: background },
         radius && { borderRadius: radius },
-        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight },
       ]}>
         {children}
       </div>