From c375d11e32c9c6a10f26c131b024853be9029cd9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 12 Jan 2017 17:47:45 -0300
Subject: [PATCH] Coral UI -  List and Item

---
 client/coral-admin/src/containers/Configure/Configure.js | 8 +++++---
 client/coral-ui/components/Item.css                      | 5 +++--
 client/coral-ui/components/List.js                       | 5 ++---
 client/coral-ui/components/Tab.js                        | 2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js
index c52ead796..ef78679a9 100644
--- a/client/coral-admin/src/containers/Configure/Configure.js
+++ b/client/coral-admin/src/containers/Configure/Configure.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {
   fetchSettings,
@@ -16,7 +16,7 @@ import CommentSettings from './CommentSettings';
 import Wordlist from './Wordlist';
 import has from 'lodash/has';
 
-class Configure extends React.Component {
+class Configure extends Component {
   constructor (props) {
     super(props);
 
@@ -25,6 +25,8 @@ class Configure extends React.Component {
       changed: false,
       errors: {}
     };
+
+    this.changeSection = this.changeSection.bind(this);
   }
 
   componentWillMount = () => {
@@ -36,7 +38,7 @@ class Configure extends React.Component {
     this.setState({changed: false});
   }
 
-  changeSection = (activeSection) => () => {
+  changeSection(activeSection) {
     this.setState({activeSection});
   }
 
diff --git a/client/coral-ui/components/Item.css b/client/coral-ui/components/Item.css
index 2a9b76344..66787c6b9 100644
--- a/client/coral-ui/components/Item.css
+++ b/client/coral-ui/components/Item.css
@@ -1,6 +1,6 @@
 .base {
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-  background: white;
+  background-color: white;
   width: 235px;
   padding: 10px 14px;
   font-size: 14px;
@@ -12,7 +12,8 @@
    }
 
   &.active {
-     background: red;
+     color: white;
+     background-color: #262626;
    }
 
   i {
diff --git a/client/coral-ui/components/List.js b/client/coral-ui/components/List.js
index e7a4a2e7f..500f2307d 100644
--- a/client/coral-ui/components/List.js
+++ b/client/coral-ui/components/List.js
@@ -14,7 +14,7 @@ export default class List extends Component {
   }
 
   render() {
-    const {children, activeItem, itemId, className = ''} = this.props;
+    const {children, activeItem, className = ''} = this.props;
     return (
       <ul className={`${styles.base} ${className}`}>
         {React.Children.toArray(children)
@@ -22,8 +22,7 @@ export default class List extends Component {
           .map((child, i) =>
             React.cloneElement(child, {
               i,
-              itemId: child.props.itemId,
-              active: itemId === activeItem,
+              active: child.props.itemId === activeItem,
               onItemClick: this.handleClickItem,
             })
           )}
diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js
index af04bec9c..1d47de100 100644
--- a/client/coral-ui/components/Tab.js
+++ b/client/coral-ui/components/Tab.js
@@ -5,7 +5,7 @@ export default ({children, tabId, active, onTabClick, cStyle = 'base'}) => (
   <li
     key={tabId}
     className={active ? styles[`${cStyle}--active`] : ''}
-    onClick={() => onTabClick(tabId)}
+    onClick={onTabClick(tabId)}
   >
     {children}
   </li>