From a449a8f00ce3b1305ea06ee7250e7ac053950f7f Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Sep 2019 11:25:45 +0300
Subject: [PATCH] ColorPicker story updated with the latest conventions

---
 storybook/stories/ColorPicker/ColorPicker.js | 14 +++++---------
 storybook/stories/ColorPicker/styles.less    | 11 +++++++----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index d040072c5..8ceefe947 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -3,16 +3,12 @@ const { storiesOf } = require('@storybook/react');
 const { ColorPicker } = require('stremio/common');
 const styles = require('./styles');
 
-const ColorPickerExampleusage = () => {
+storiesOf('ColorPicker', module).add('ColorPicker', () => {
     const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
     return (
-        <div className={styles['demo-container']}>
-            <ColorPicker
-                value={color}
-                onChange={setColor}
-            />
-            <div className={styles['test-output']}>Current color is {color}</div>
+        <div className={styles['color-picker-container']}>
+            <ColorPicker value={color} onChange={setColor} />
+            <div className={styles['color-output-label']}>Current color is {color}</div>
         </div>
     );
-}
-storiesOf('ColorPicker', module).add('ColorPicker', () => <ColorPickerExampleusage />);
+});
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
index ca8901e39..d10672c63 100644
--- a/storybook/stories/ColorPicker/styles.less
+++ b/storybook/stories/ColorPicker/styles.less
@@ -1,5 +1,8 @@
-.demo-container {
-    color: var(--color-surfacelighter);
-    padding: 1rem; 
-    .test-output { margin-top: 1rem; }
+.color-picker-container {
+    padding: 1rem;
+
+    .color-output-label {
+        margin-top: 1rem;
+        color: var(--color-surfacelighter);
+    }
 }
\ No newline at end of file