Merge pull request #40 from TecProgPurrsuit/US#6-QuestionList

Minor fixes; CSS fixes

client/components/navbar.js

@@ -38,6 +38,9 @@ class NavBar extends Component {
             <i className="material-icons">menu</i>
           </a>
           <ul className="right hide-on-med-and-down">
+            <li>
+              <Link to="/create-list">Criar Lista</Link>
+            </li>
             <li onClick={this.props.selectGroupAnswering}>
               <Link to="/group-simulator">Prova em grupo</Link>
             </li>

client/containers/creators/listCreator.js

@@ -12,12 +12,19 @@ import { connect } from 'react-redux';
 import { LISTSDB } from '../../../lib/collections/listsCollection';
 import QuestionCreator from './questionCreator';
 
+require('./style/listCreatorStyle.css');
+
 class ListCreator extends Component {
   constructor(props) {
     super(props);
-    this.state = { listName: '', listDescription: '', questions: [] };
+    this.state = { listName: '',
+      listDescription: '',
+      enable: false,
+      questions: [],
+    };
 
     this.handleChange = this.handleChange.bind(this);
+    this.handleEnableChange = this.handleEnableChange.bind(this);
     this.sendToDatabase = this.sendToDatabase.bind(this);
   }
 
@@ -30,6 +37,16 @@ class ListCreator extends Component {
     this.setState({
       [name]: targetValue,
     });
+
+    console.log(this.state);
+  }
+
+  handleEnableChange() {
+    this.setState({
+      enable: !this.state.enable,
+    });
+
+    console.log(this.state);
   }
 
   sendToDatabase(event) {
@@ -52,14 +69,16 @@ class ListCreator extends Component {
   render() {
     return (
       <div>
-        <h1>Criar nova lista</h1>
+        <h1 id="titleHeader">Criar nova lista</h1>
+
         <form id="createListForm">
           <label htmlFor="listTitle">Título da lista:</label>
           <input
             id="listTitle"
             type="text" value={this.state.listName}
             name="listName"
             onChange={this.handleChange}
+            className="inputForm"
           />
 
           <label htmlFor="listDescription">Descrição da lista:</label>
@@ -68,9 +87,25 @@ class ListCreator extends Component {
             type="text" value={this.state.listDescription}
             name="listDescription"
             onChange={this.handleChange}
+            className="inputForm"
           />
         </form>
 
+        <div className="switch">
+          <label>
+            Não disponível
+            <input
+              type="checkbox"
+              name="enable"
+              onChange={this.handleEnableChange}
+              checked={this.state.enable}
+            />
+            <span className="lever" />
+            Disponível
+          </label>
+        </div>
+        <br />
+
         <QuestionCreator />
 
         <div className="center-align">
@@ -92,6 +127,7 @@ function mapStateToProps(state) {
   return {
     listName: state.listName,
     listDescription: state.listDescription,
+    enable: state.enable,
     questions: state.questions,
   };
 }

client/containers/creators/questionCreator.js

@@ -22,7 +22,11 @@ class QuestionCreator extends Component {
     return (
       <div>
         <div id="modalTrigger" className="center-align">
-          <button onClick={this.openQuestionModal} data-target="questionModal" className="waves-effect waves-green btn-flat btn">
+          <button
+            onClick={this.openQuestionModal} data-target="questionModal"
+            className="waves-effect waves-light btn"
+            id="addButton"
+          >
             Adicionar Questão<i className="material-icons left">add</i>
           </button>
         </div>

client/containers/creators/style/listCreatorStyle.css

@@ -0,0 +1,14 @@
+#titleHeader {
+  color: white;
+  text-align: center;
+  text-shadow: 0.5px 0.5px 1px #000000;
+}
+
+
+#btnAddQuestion {
+  background-color: white;
+}
+
+.inputForm {
+  color: white;
+}