From 3c059dbddc62403071ade9da11fa7836b3f7fa35 Mon Sep 17 00:00:00 2001
From: Aruna Herath <arunabherath@gmail.com>
Date: Fri, 26 Aug 2016 11:40:03 +0530
Subject: [PATCH 1/2] Set fields to null onStory so when a story is not wrapped
 "no knobs" is displayed

---
 src/components/Panel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Panel.js b/src/components/Panel.js
index a5f1c99ed739..d6fb16158967 100644
--- a/src/components/Panel.js
+++ b/src/components/Panel.js
@@ -37,7 +37,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 +58,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 +70,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();
   }
 

From da3e301623a0c621aeb32b83350be1f8e8b27d39 Mon Sep 17 00:00:00 2001
From: Aruna Herath <arunabherath@gmail.com>
Date: Sun, 28 Aug 2016 08:59:01 +0530
Subject: [PATCH 2/2] Made background white and added a max width

---
 src/components/Panel.js     | 2 --
 src/components/PropField.js | 4 ++--
 src/components/PropForm.js  | 2 ++
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Panel.js b/src/components/Panel.js
index d6fb16158967..4dd42bde435b 100644
--- 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)',
diff --git a/src/components/PropField.js b/src/components/PropField.js
index fd046f48995f..fa730d06d4b7 100644
--- a/src/components/PropField.js
+++ b/src/components/PropField.js
@@ -8,7 +8,7 @@ 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)',
@@ -16,7 +16,6 @@ const stylesheet = {
   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
index 097cf499239a..39004bad0913 100644
--- 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',
   },