Better styling for object controls

src/components/ControlPanel/ControlPane.css

@@ -1,54 +1,6 @@
-.control {
-  color: #7c8382;
+.root {
   position: relative;
-  padding: 20px 0;
-
-  & input,
-  & textarea,
-  & select {
-    font-family: monospace;
-    display: block;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    border: none;
-    outline: 0;
-    box-shadow: none;
-    background: 0 0;
-    font-size: 18px;
-    color: #7c8382;
-  }
-}
-.label {
-  display: block;
-  color: #AAB0AF;
-  font-size: 12px;
-  margin-bottom: 18px;
-}
-.widget {
-  border-bottom: 1px solid #e8eae8;
-  position: relative;
-
-  &:after {
-    content: '';
-    position: absolute;
-    left: 42px;
-    bottom: -7px;
-    width: 12px;
-    height: 12px;
-    background-color: #f2f5f4;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    z-index: 1;
-    border-right: 1px solid #e8eae8;
-    border-bottom: 1px solid #e8eae8;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:last-child:after {
-    display: none;
-  }
+  margin-bottom: 20px;
+  padding: 20px;
+  border: 1px solid #e8eae8;
 }

src/components/PreviewPane/PreviewPane.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ScrollSyncPane } from '../ScrollSync';
 import registry from '../../lib/registry';
+import Collection from '../../valueObjects/Collection';
 import { resolveWidget } from '../Widgets';
 import Preview from './Preview';
 import styles from './PreviewPane.css';
@@ -26,7 +27,9 @@ export default class PreviewPane extends React.Component {
   };
 
   renderPreview() {
-    const component = registry.getPreviewTemplate(this.props.collection.get('name')) || Preview;
+    const { entry, collection } = this.props;
+    const collectionModel = new Collection(collection);
+    const component = registry.getPreviewTemplate(collectionModel.templateName(entry.get('slug'))) || Preview;
     const previewProps = {
       ...this.props,
       widgetFor: this.widgetFor,

src/components/Widgets/ObjectControl.css

@@ -0,0 +1,6 @@
+.root {
+  position: relative;
+  border: 1px solid #e8eae8;
+  margin-bottom: 20px;
+  padding: 20px;
+}

src/components/Widgets/ObjectControl.js

@@ -1,7 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { Map } from 'immutable';
 import { resolveWidget } from '../Widgets';
-import styles from '../ControlPanel/ControlPane.css';
+import controlStyles from '../ControlPanel/ControlPane.css';
+import styles from './ObjectControl.css';
 
 export default class ObjectControl extends Component {
   static propTypes = {
@@ -17,9 +18,9 @@ export default class ObjectControl extends Component {
     const widget = resolveWidget(field.get('widget') || 'string');
     const fieldValue = value && value.get(field.get('name'));
 
-    return (
-      <div className={styles.control} key={field.get('name')}>
-        <label className={styles.label}>{field.get('label')}</label>
+    return (<div className={controlStyles.widget}>
+      <div className={controlStyles.control} key={field.get('name')}>
+        <label className={controlStyles.label}>{field.get('label')}</label>
         {
           React.createElement(widget.control, {
             field,
@@ -33,7 +34,7 @@ export default class ObjectControl extends Component {
           })
         }
       </div>
-    );
+    </div>);
   }
 
   render() {
@@ -44,7 +45,7 @@ export default class ObjectControl extends Component {
       return <h3>No fields defined for this widget</h3>;
     }
 
-    return (<div>
+    return (<div className={styles.root}>
       {field.get('fields').map(field => this.controlFor(field))}
     </div>);
   }