From e46f9c3f15c29f6255b161655fec5aa44e665e28 Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Thu, 22 Dec 2016 10:57:32 +0100
Subject: [PATCH] rename and add margin

---
 .../feature/form/strategy-configure.jsx       | 20 ++++++++++++-------
 ...tage.jsx => strategy-input-percentage.jsx} |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)
 rename frontend/src/component/feature/form/{strategy-input-persentage.jsx => strategy-input-percentage.jsx} (90%)

diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index f8475e016e..3da5d7bc18 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/frontend/src/component/feature/form/strategy-configure.jsx
@@ -5,7 +5,7 @@ import {
     IconButton, Icon,
 }  from 'react-mdl';
 import { Link } from 'react-router';
-import StrategyInputPersentage from './strategy-input-persentage';
+import StrategyInputPercentage from './strategy-input-percentage';
 import StrategyInputList from './strategy-input-list';
 
 const style = {
@@ -15,6 +15,12 @@ const style = {
     margin: '5px 20px 15px 0px',
     background: '#f2f9fc',
 };
+
+const helpText = {
+    color: 'rgba(0,0,0, 0.54)',
+    fontSize: '12px',
+    lineHeight: '14px',
+};
 class StrategyConfigure extends React.Component {
 
     static propTypes () {
@@ -58,11 +64,11 @@ class StrategyConfigure extends React.Component {
                     }
                     return (
                         <div key={name}>
-                            <StrategyInputPersentage
+                            <StrategyInputPercentage
                                 name={name}
                                 onChange={this.handleConfigChange.bind(this, name)}
                                 value={1 * value} />
-                            {description && <p>{description}</p>}
+                            {description && <p style={helpText}>{description}</p>}
                         </div>
                     );
                 } else if (type === 'list') {
@@ -76,7 +82,7 @@ class StrategyConfigure extends React.Component {
                     return (
                         <div key={name}>
                             <StrategyInputList name={name} list={list} setConfig={this.setConfig} />
-                            {description && <p>{description}</p>}
+                            {description && <p style={helpText}>{description}</p>}
                         </div>
                     );
                 } else if (type === 'number') {
@@ -93,7 +99,7 @@ class StrategyConfigure extends React.Component {
                                 onChange={this.handleConfigChange.bind(this, name)}
                                 value={value}
                             />
-                            {description && <p>{description}</p>}
+                            {description && <p style={helpText}>{description}</p>}
                         </div>
                     );
                 } else {
@@ -101,7 +107,7 @@ class StrategyConfigure extends React.Component {
                         <div key={name}>
                             <Textfield
                                 floatingLabel
-                                rows={2}
+                                rows={1}
                                 style={{ width: '100%' }}
                                 required={required}
                                 name={name}
@@ -109,7 +115,7 @@ class StrategyConfigure extends React.Component {
                                 onChange={this.handleConfigChange.bind(this, name)}
                                 value={value}
                             />
-                            {description && <p>{description}</p>}
+                            {description && <p style={helpText}>{description}</p>}
                         </div>
                     );
                 }
diff --git a/frontend/src/component/feature/form/strategy-input-persentage.jsx b/frontend/src/component/feature/form/strategy-input-percentage.jsx
similarity index 90%
rename from frontend/src/component/feature/form/strategy-input-persentage.jsx
rename to frontend/src/component/feature/form/strategy-input-percentage.jsx
index 563d949de1..9d687450db 100644
--- a/frontend/src/component/feature/form/strategy-input-persentage.jsx
+++ b/frontend/src/component/feature/form/strategy-input-percentage.jsx
@@ -9,7 +9,7 @@ const labelStyle = {
 };
 
 export default ({ name, value, onChange }) => (
-    <div>
+    <div style={{ marginBottom: '20px' }}>
         <div style={labelStyle}>{name}: {value}%</div>
         <Slider min={0} max={100} defaultValue={value} value={value} onChange={onChange} label={name} />
     </div>