Add disabled Cards

client/src/components/pepite/Card.css

@@ -0,0 +1,18 @@
+.card-background {
+  text-align: center;
+}
+
+.card-icon {
+  font-size: 3em;
+}
+
+.panel.panel-disabled {
+  border-color: #ecf0f1;
+  cursor: not-allowed;
+}
+
+.panel-disabled > .panel-heading {
+  color: #798d8f;
+  background-color: #ecf0f1;
+  border-color: #ecf0f1;
+}

client/src/components/pepite/Card.js

@@ -1,9 +1,12 @@
 import React, { PropTypes } from 'react'
+import './Card.css'
+
+const Card = ({ title, glyphicon, isDisabled }) => {
+  const panelType = isDisabled ? 'panel-disabled' : 'panel-primary'
 
-const Card = ({ title, glyphicon }) => {
   return (
-    <div className="panel panel-primary">
-      <div className="panel-heading">
+    <div className={`panel ${panelType}`}>
+      <div className="panel-heading card-background">
         <h2 className="card-title">
           {title}
         </h2>
@@ -17,7 +20,8 @@ const Card = ({ title, glyphicon }) => {
 
 Card.propTypes = {
   title: PropTypes.string.isRequired,
-  glyphicon: PropTypes.string.isRequired
+  glyphicon: PropTypes.string.isRequired,
+  isDisabled: PropTypes.bool
 }
 
 export default Card

client/src/components/pepite/PepiteHomePage.js

@@ -10,9 +10,21 @@ export class PepiteHomePage extends React.Component {
     return (
       <div className="container back-content">
         <div className="row">
-          <Link to="pepite/applicant">
+          <Link className="col-md-6" to="pepite/applicant">
             <Card title="Mes Candidats" glyphicon="glyphicon glyphicon-envelope" />
           </Link>
+          <div className="col-md-6" title="bientôt disponible">
+            <Card title="Ma promotion" glyphicon="glyphicon glyphicon-education" isDisabled />
+          </div>
+          <div className="col-md-6" title="bientôt disponible">
+            <Card title="Mon Compte" glyphicon="glyphicon glyphicon-cog" isDisabled />
+          </div>
+          <div className="col-md-6" title="bientôt disponible">
+            <Card title="Mes prochains comités" glyphicon="glyphicon glyphicon-calendar" isDisabled />
+          </div>
+          <div className="col-md-6" title="bientôt disponible">
+            <Card title="Stats" glyphicon="glyphicon glyphicon-stats" isDisabled />
+          </div>
         </div>
       </div>
     )