client/src/components/SessionList.js
changeset 143 cfcbf4bc66f1
parent 137 279e1dffa213
child 145 5d2bc8c877ea
--- a/client/src/components/SessionList.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionList.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, ListGroup, ListGroupItem, Button, Modal } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
 import moment from 'moment';
 import '../App.css';
+import './SessionList.css';
 import Navbar from './Navbar';
 import * as sessionsActions from '../actions/sessionsActions';
 import uuidV1 from 'uuid/v1';
@@ -68,34 +69,33 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <ListGroup>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
+              <ul className="list-group">
                 {this.props.sessions.map((session) =>
-                  <ListGroupItem key={session.get('_id')}>
+                  <li className="list-group-item" key={session.get('_id')}>
                     <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span>
-                    <a className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
+                    <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
                       <span className="material-icons">delete</span>
                     </a>
-                  </ListGroupItem>
+                  </li>
                 )}
-              </ListGroup>
-              <Button bsStyle="success" onClick={this.createSession}>Create new session</Button>
-            </Col>
-          </Row>
-        </Grid>
+              </ul>
+              <button type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
+            </div>
+          </div>
+        </div>
 
         <Modal show={ this.state.showModal } onHide={ this.closeModal }>
           <Modal.Body>
-            Are you sure?
+          Êtes-vous sûr(e) ?
           </Modal.Body>
           <Modal.Footer>
-            <Button bsStyle="primary" onClick={ this.deleteSession }>Confirm</Button>
-            <Button onClick={ this.closeModal }>Close</Button>
+            <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
+            <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button>
           </Modal.Footer>
         </Modal>
-
       </div>
     );
   }