Adding class for specific css in App, Navbar and SessionList components
authorRiwad Salim
Wed, 15 Aug 2018 23:39:02 +0200
changeset 145 5d2bc8c877ea
parent 144 8b950885ddae
child 146 4f4bb2b3ef39
Adding class for specific css in App, Navbar and SessionList components
client/src/App.js
client/src/components/Navbar.js
client/src/components/SessionList.js
--- a/client/src/App.js	Tue Aug 14 20:39:55 2018 +0200
+++ b/client/src/App.js	Wed Aug 15 23:39:02 2018 +0200
@@ -11,7 +11,7 @@
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-6 col-md-offset-3 text-center">
-              <div class="alert alert-info" role="alert" bsStyle="info"><span>Bienvenue sur</span><br/>IRI Notes</div>
+              <div class="alert alert-info" role="alert" bsStyle="info" id="home-text"><span id="welcome">Bienvenue sur</span><br/>IRI Notes</div>
             </div>
           </div>
         </div>
--- a/client/src/components/Navbar.js	Tue Aug 14 20:39:55 2018 +0200
+++ b/client/src/components/Navbar.js	Wed Aug 15 23:39:02 2018 +0200
@@ -1,3 +1,4 @@
+import '../index.css';
 import './Navbar.css';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -28,17 +29,17 @@
     return (
           <NavDropdown title={ currentUser.get('username') }>
               <li>
-                <a  href="#settings" onClick={onClickSettings}>Paramètres</a>
+                <a className="user-dropdown"  href="#settings" onClick={onClickSettings}>Paramètres</a>
               </li>
               <li>
-                <a  href="#logout" onClick={onLogout}>Se déconnecter</a>
+                <a className="user-dropdown"  href="#logout" onClick={onLogout}>Se déconnecter</a>
               </li>
           </NavDropdown>
     );
   }
   return (
       <li>
-      <a onClick={onClickLogin} href="/login">Se connecter</a>
+      <a className="navs" onClick={onClickLogin} href="/login">Se connecter</a>
       </li>
   );
 }
@@ -47,7 +48,7 @@
   return (
     <li>
       <a>
-        <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+        <span  className="material-icons navs" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
       </a>
     </li>
   )
@@ -89,7 +90,7 @@
   if(currentGroup) {
     const currentGroupName = currentGroup.get('name');
     return (
-      <NavDropdown title={currentGroupName} onSelect={onSelect}>
+      <NavDropdown className="navs" title={currentGroupName} onSelect={onSelect}>
         { groups && groups.map((group, key) => {
             const groupName = group.get('name');
             const className = (groupName === currentGroupName)?'active':null;
@@ -171,7 +172,7 @@
       <nav className="navbar navbar-inverse navbar-fixed-top">
         <div className="container-fluid">
           <div className="navbar-header">
-            <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+            <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
             <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span className="sr-only">Toggle navigation</span>
               <span className="icon-bar"></span>
@@ -182,7 +183,7 @@
           <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul className="nav navbar-nav">
               <li>
-                <a onClick={this.onClickSessions} href="/sessions">Accueil</a>
+                <a className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a>
               </li>
             </ul>
             <ul className="nav navbar-nav navbar-right">
--- a/client/src/components/SessionList.js	Tue Aug 14 20:39:55 2018 +0200
+++ b/client/src/components/SessionList.js	Wed Aug 15 23:39:02 2018 +0200
@@ -82,7 +82,7 @@
                   </li>
                 )}
               </ul>
-              <button type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
+              <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
             </div>
           </div>
         </div>