Merge pull request #6 from kadirahq/change-styles

Change styles
storybookjs · Aug 30, 2016 · b38dd41 · b38dd41
2 parents bce4fd9 + da3e301
commit b38dd41
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Panel.js b/src/components/Panel.js
@@ -5,7 +5,6 @@ import tosource from 'tosource';
 const styles = {
   panel: {
     padding: '5px',
-    backgroundColor: 'rgb(247, 247, 247)',
     width: '100%',
   },
   noKnobs: {
@@ -14,7 +13,6 @@ const styles = {
       "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
     `,
     display: 'inline',
-    backgroundColor: 'rgb(247, 247, 247)',
     width: '100%',
     textAlign: 'center',
     color: 'rgb(190, 190, 190)',
@@ -37,7 +35,7 @@ export default class Panel extends React.Component {
     this._setInitialFields = this.setInitialFields.bind(this);
     this._indicateReady = this.indicateReady.bind(this);
 
-    this.state = { fields: {} };
+    this.state = { fields: null };
     this.api = this.props.api;
   }
 
@@ -58,7 +56,8 @@ export default class Panel extends React.Component {
 
   componentDidMount() {
     this.stopOnStory = this.api.onStory(() => {
-      this.setState({ fields: {} });
+      this.setState({ fields: null });
+      this.api.setQueryParams({ knobs: null });
     });
 
     this.props.channel.on('addon:knobs:setFields', this._setFields);
@@ -69,7 +68,6 @@ export default class Panel extends React.Component {
     this.props.channel.removeListener('addon:knobs:setFields', this._setFields);
     this.props.channel.removeListener('addon:knobs:helloFromStory', this._indicateReady);
     this.props.channel.removeListener('addon:knobs:helloFromStory', this._setInitialFields);
-    this.api.setQueryParams({ knobs: null });
     this.stopOnStory();
   }
 

diff --git a/src/components/PropField.js b/src/components/PropField.js
@@ -8,15 +8,14 @@ const stylesheet = {
     height: '26px',
     width: '100%',
     outline: 'none',
-    border: '0px',
+    border: '1px solid rgb(236, 236, 236)',
     fontSize: '12px',
     padding: '5px',
     color: 'rgb(130, 130, 130)',
   },
   field: {
     display: 'table-row',
     padding: '5px',
-    color: 'rgb(130, 130, 130)',
   },
   label: {
     display: 'table-cell',
@@ -25,6 +24,7 @@ const stylesheet = {
     textAlign: 'right',
     width: '20px',
     fontSize: '13px',
+    color: 'rgb(68, 68, 68)',
   },
 };
 

diff --git a/src/components/PropForm.js b/src/components/PropForm.js
@@ -11,6 +11,8 @@ const stylesheet = {
     display: 'table',
     boxSizing: 'border-box',
     width: '100%',
+    maxWidth: '500px',
+    margin: '0 auto',
     borderCollapse: 'separate',
     borderSpacing: '5px',
   },