Coral UI - List and Item

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});
   }
 

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 {

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,
             })
           )}

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>