responsive

src/Home.jsx

@@ -191,7 +191,7 @@ function Home() {
                     <a className="menu__link " href="#page8" data-hover="Lucas ">CV Lucas</a>
                 </div>
                 <div className="matthieu ">
-                    <img classNameName="image-matthieu " src={imgMatthieu} alt="image profil Matthieu "/>
+                    <img className="image-matthieu" src={imgMatthieu} alt="image profil Matthieu "/>
                     <a className="menu__link " href="#page9 " data-hover="Matthieu">CV Matthieu</a>
                 </div>
             </div>

src/application2.jsx

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Chat from './components/chat';
 import { Link } from 'react-router-dom';
 import './style/app.css';
+import './style/app-responsive.css';
 import Barregauche from './barre-gauche.jsx';
 import Barreamisgauche from './barre-amis-gauche';
 

src/barre-gauche.jsx

@@ -7,7 +7,7 @@ import users from './image/user.png'
 import rouage from './image/settings.png'
 import logout from './image/logout.png'
 import rockets from './image/rockets.png'
-
+import './style/barre-gauche-responsive.css';
 
 export default class barregauche extends Component {
 
@@ -33,6 +33,9 @@ export default class barregauche extends Component {
           this.setState({firstFriend:response.firstFriend})
         })
     }
+
+
+
      render(){
         return(
             <div>
@@ -48,7 +51,7 @@ export default class barregauche extends Component {
                             <img  className="logo-users"src={users} alt="amis"/>
                         </Link>
                         <Link to='/app/statistique'>
-                            <img  className="logo-rockets"src={rockets} alt="amis"/>
+                            <img  className="logo-rockets"src={rockets} alt="statistique"/>
                         </Link>
                         <Link to='/app/parametre'>
                             <img   className="logo-rouage" src={rouage} alt="paramétres"/>
@@ -61,4 +64,5 @@ export default class barregauche extends Component {
             </div>
         );
     }
-}
+}
+

src/components/chat.jsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { io } from "socket.io-client"; 
 import { withRouter } from "react-router-dom";
 import FriendNom from './friend_nom'
-
+import trash from '../image/delete.png'
 
 
 const socket = io('http://localhost:4000');
@@ -135,7 +135,7 @@ export default class Chat extends Component {
                 <div className="message-envoye">
                   <p className="author">{mess.author}</p>
                   <p className="textemessageP">{mess.text}</p>
-                  { this.props.nom == mess.author ? <button value={mess._id} onClick={this.deleteMessage}>Delete</button> : console.log('')}
+                  { this.props.nom == mess.author ? <button value={mess._id} onClick={this.deleteMessage}> <img src={trash} /> </button> : console.log('')}
                 </div>
               ))}
             </div>
@@ -168,9 +168,10 @@ export default class Chat extends Component {
             <div className="chat">
               {this.state.groupetext.map((mess)=>(
                 <div className="message-envoye">
+
                   <p className="author">{mess.author}</p>
                   <p className="textemessageP">{mess.text}</p>
-                  { this.props.nom == mess.author ? <button value={mess._id} onClick={this.deleteMessage}>Delete</button> : console.log('')}
+                  { this.props.nom == mess.author ? <button value={mess._id} className="boutton-suprimer-un-message" onClick={this.deleteMessage}> X </button> : console.log('')}
                 </div>
               ))}
             </div>
@@ -187,7 +188,7 @@ export default class Chat extends Component {
                     onChange={this.handleInputChange}
                     required
                     />
-                    <input className="submit" type="submit" value="Submit"   onClick={this.onSubmit}/>
+                    <input className="submit" type="submit" value="Submit" onClick={this.onSubmit}/>
                     </div>
                 </div>
             </div>

src/components/paramètre.jsx

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import BarreGauche from '../barre-gauche'
+import '../style/paramètre.css';
+import '../style/paramètre-responsive.css';
 
 export default class parametre extends Component {
 
@@ -49,18 +51,25 @@ export default class parametre extends Component {
         return(
             <div>
                 <BarreGauche/>
-        <form onSubmit={this.onSubmit}>
-                    <input
+                <div className="paramètre-body">
+                <div className="barre-du-haut-paramètre">
+                  <p className="texte-barre-du-haut-paramètre"> Changer ici votre mots de passe : </p>
+              </div>
+              <div >
+        <form className="changer-pseudo" onSubmit={this.onSubmit}>
+                    <input className="entrer-nouveau-pseudo"
                       type="text"
                       name="newName"
                       placeholder="Entrer le nouveau pseudo voulu"
                       value={this.state.newName}
                       onChange={this.handleInputChange}
                       required
                     />
-                    <input type="submit" value="Submit"/>
+                    <input className="valider-nouveau-pseudo" type="submit" value="Valider"/>
                   </form>
                   <p>{this.state.message}</p>
+                  </div>
+                  </div>
             </div>
         );
     }

src/components/statistique.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import Barregauche from '../barre-gauche.jsx';
 import rockets from '../image/rockets.png'
+import '../style/stastistique.css';
 
 export default class StatWithFriend extends Component {
 

src/friends-liste.jsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { BrowserRouter, Route, Router, Link, Switch } from "react-router-dom"
-import './style/app.css';
 import Chat from './components/chat';
 import { withRouter } from "react-router-dom";
 import Barregauche from './barre-gauche.jsx';
 import StatWithFriend from './components/statistique'
-
+import './style/friend-liste.css';
+import './style/friend-liste-responsive.css';
 
 
 export default class friendsliste extends Component {
@@ -98,7 +98,7 @@ export default class friendsliste extends Component {
                   required
                   />
                   <input className="ajouter-amis-friens-liste-p2" type="submit" value="+"/>
-                  <p>{message}</p>
+                  <p className="message-erreur-ajt-amis">{message}</p>
               </form>
             </div>
           <div className="friend-list">

src/login.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import { BrowserRouter, Route, Router, Link, Switch } from "react-router-dom"
 import './style/login.css';
-
+import './style/login-responsive.css';
 
 export default class login extends Component {
       // création des states suivant
@@ -44,7 +44,7 @@ export default class login extends Component {
           this.props.history.push('/app/friendlist');
         }if (res.status === 401){
           // si erreur code est 401, renvoyer ce message
-          this.setState({message:'Mot de passee incorrecte'});
+          this.setState({ message:'Mot de passee incorrecte'});
         } 
         else {
           // sinon, renvoyer ce message
@@ -85,7 +85,7 @@ export default class login extends Component {
                       <br></br>
                       <input className="bouton-login-droite-login" type="submit" value="Login"/>
                     </form>
-                    <p>{this.state.message}</p>
+                    <p className="incorecte-mdp-login">{this.state.message}</p>
                     </div>
                     </div>       
             </div>

src/signup.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import { BrowserRouter, Route, Router, Link, Switch } from "react-router-dom"
 import './style/singup.css';
+import './style/singup-responsive.css';
 
 export default class signup extends Component {
     // création des states suivant
@@ -88,7 +89,7 @@ export default class signup extends Component {
           <br></br>
           <input className="bouton-singup-gauche-singup" type="submit" value="SING UP"/>
         </form>
-        <p>{this.state.message}</p>
+        <p className="email-deja-utiliser-singup">{this.state.message}</p>
         </div>
         <div className="box-droite-singup">
           <p className="Welcome-back-singup">Welcome back </p>

src/style/Home.css

@@ -39,7 +39,7 @@ a {
     align-items: center;
     width: 30%;
     justify-content: space-around;
-    font-size: 120%;
+    font-size: 1.2vw;
     color: rgba(255, 255, 255, 0.877);
 }
 

src/style/app-responsive.css

@@ -0,0 +1,101 @@
+@media only screen and (max-width:500px){
+    .corps{
+        width: 100%;
+        left:0%;
+
+    }
+
+    .barre-du-haut-amis{
+        font-size: 6vw;
+        height: 10vh;
+    }
+
+    .barre-du-haut-amis-texte{
+        margin-left: 6%;
+    }
+
+    .colone-droite {
+        position: fixed;
+        width: 100%;
+        height: 72vh;
+        top: 10vh;
+        left:0%;
+        overflow-y: scroll;
+    }
+
+    .message-envoye {
+    width: 100%;
+    height: 10vh;
+    margin-top: 0.5%;
+    color: rgb(199, 199, 199);
+    transition: 0.3s;
+    padding-top: 1.5px ;
+    padding-bottom: 1.5px;
+}
+
+.author{
+    margin-left: 8%;
+    font-size: 5vw;
+    color: grey;
+    margin-bottom: -5%;
+
+}
+
+.textemessageP{
+    margin-left: 8%;
+    font-size: 5.7vw;
+    width: 40vh;
+    color: rgb(199, 199, 199);
+}
+
+    .forme-message {
+        margin-top: 1%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 10vh;
+        width: 90%;
+    }
+
+
+    .message {
+        width: 100%;
+        height: 15%;
+        display: flex;
+        position: fixed;
+        bottom: 0%;
+        align-items: center;
+        justify-content: center;
+        margin-left: %;
+        background-color: #3D3D49;
+        border-radius: 23px;
+
+    }
+
+    .submit{
+        margin-left: 0%;
+        height: 80%;
+        font-size:  5vw;
+        margin-bottom: 27%;
+        background-color: transparent;
+    }
+
+    .type-your-message{
+        margin-right: 20%;
+        height: 80%;
+        width: 90vh;
+        margin-left: 1%;
+        font-size: 5vw;
+        margin-bottom: 25%;    
+    }
+
+    .boutton-suprimer-un-message{
+        font-size: 5vw;
+        background-color: transparent;
+        border-style: none;
+        color: #828282;
+        display: none;
+        margin-left: 91%;
+        margin-top: -19%;
+    }
+}