From 837078921140ba792b06f4df32520e3f96d70800 Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Wed, 18 Sep 2019 09:34:08 +0300
Subject: [PATCH] Moved the styles in the styles.less file. Unwrapped the
 setColor function

---
 storybook/stories/ColorPicker/ColorPicker.js | 7 +++----
 storybook/stories/ColorPicker/styles.less    | 5 +++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index 68057edb8..d040072c5 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -6,13 +6,12 @@ const styles = require('./styles');
 const ColorPickerExampleusage = () => {
     const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
     return (
-        <div style={{ color: 'var(--color-surfacelighter)', padding: '1em' }}>
+        <div className={styles['demo-container']}>
             <ColorPicker
-                className={styles['color-picker-container']}
                 value={color}
-                onChange={(color) => { setColor(color) }}
+                onChange={setColor}
             />
-            <div style={{ marginTop: '1em' }}>Current color is {color}</div>
+            <div className={styles['test-output']}>Current color is {color}</div>
         </div>
     );
 }
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
index e69de29bb..ca8901e39 100644
--- a/storybook/stories/ColorPicker/styles.less
+++ b/storybook/stories/ColorPicker/styles.less
@@ -0,0 +1,5 @@
+.demo-container {
+    color: var(--color-surfacelighter);
+    padding: 1rem; 
+    .test-output { margin-top: 1rem; }
+}
\ No newline at end of file