From 362a1f236ba2b005ed6fa2f8cc2c7fd318a064c5 Mon Sep 17 00:00:00 2001
From: wilfried <wilfried.vallee@etu.univ-amu.fr>
Date: Sun, 30 May 2021 10:40:48 +0200
Subject: [PATCH] try frontend...

---
 .../src/app/general/general.component.html    | 43 +++++----
 frontend/src/app/general/general.component.ts |  2 +-
 frontend/src/styles.scss                      | 87 +++++++------------
 3 files changed, 52 insertions(+), 80 deletions(-)

diff --git a/frontend/src/app/general/general.component.html b/frontend/src/app/general/general.component.html
index 9453b2c..d909a79 100644
--- a/frontend/src/app/general/general.component.html
+++ b/frontend/src/app/general/general.component.html
@@ -5,50 +5,47 @@
 
       <div class="user-list-card">
         <div class="user-card"
-             [ngClass]="{'active' : user?.login === selectedUser?.login}"
-             *ngFor="let user of dataSource.data"
-             (click)="selectUserHandler(user.login)"
+
         >
           <!---->
 
           <img src="../../assets/image/user.png" height="25" width="25"/>
-          <p class="username">{{user?.login}}</p>
+          <p class="username">{{username}}</p>
 
         </div>
       </div>
 
     </div>
+
     <div class="col-md-8">
 
-      <div class="chat-container">
-        <ng-container >
+
+
           <div class="chat-header">
-            <p class="username">{{username}}</p>
+            <p class="username">General Chat</p>
           </div>
 
           <div class="chat-body">
-            <div *ngFor="let item of messageArray">
-              <span><strong>{{item.user}} : </strong> {{item.message}}</span>
-            </div>
             <ul #ulMessages id="messages">
             </ul>
+
           </div>
 
-          <div class="chat-footer">
-            <div class="row">
-              <div class="col-md-10">
-                <div class="form-group mb-0">
-                  <input type="text" placeholder="Entrez votre message" class="form-control"
-                         [(ngModel)]="msg"/>
-                </div>
-              </div>
-              <div class="col-md-2 text-center align-self-center">
-                <button class="btn btn-primary btn-bm px-3 " (click)="sendButtonClick()">Envoyer</button>
-              </div>
+
+
+      <div class="chat-footer">
+        <div class="row">
+          <div class="col-md-10">
+            <div class="form-group mb-0">
+              <input type="text" placeholder="Entrez votre message" class="form-control"
+                     [(ngModel)]="msg"/>
             </div>
-
           </div>
-        </ng-container>
+          <div class="col-md-2 text-center align-self-center">
+            <button class="btn btn-primary btn-bm px-3 " (click)="sendButtonClick()">Envoyer</button>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>
diff --git a/frontend/src/app/general/general.component.ts b/frontend/src/app/general/general.component.ts
index 096d68b..383ffcc 100644
--- a/frontend/src/app/general/general.component.ts
+++ b/frontend/src/app/general/general.component.ts
@@ -11,7 +11,7 @@ import {MessageService} from "../services/message/message.service";
 })
 export class GeneralComponent implements OnInit {
 
-  private username = sessionStorage.getItem('login');
+  public username = sessionStorage.getItem('login');
   private room = 'general';
   public msg = '';
 
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 7ab98a2..0bbb80a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -47,67 +47,42 @@ body {
   position: relative;
   overflow: hidden;
 
-  .chat-header {
-    height: 70px;
-    background-color: #E5E5E5;
+
+}
+
+.chat-header {
+  height: 70px;
+  border-radius: 10px;
+  background-color: #E5E5E5;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .username {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 0;
+    margin-left: 20px;
     display: flex;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
-
-    .username {
-      font-size: 20px;
-      font-weight: 500;
-      margin-bottom: 0;
-      margin-left: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
   }
+}
 
-  .chat-body {
-    background-image: url(./assets/image/fond.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-    height: calc(100vh - 125px);
-    overflow-y: auto;
+.chat-body {
+  background-color: white;
+  border-radius: 10px;
+  height: calc(89.5vh - 89.5px);
+  overflow-y: auto;
+}
 
-    .message-container {
-      background-color: white;
-      padding: 7px;
-      border-radius: 5px;
-      width: fit-content;
-      max-width: 90%;
-      margin-bottom: 15px;
-    }
-
-    .same-user {
-      display: flex;
-      justify-content: flex-end;
-
-      .message-container {
-        background-color: lightskyblue;
-      }
-    }
-  }
-
-  .chat-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: #EDEDED;
-    padding: 10px 20px;
-
-    .form-control {
-      background-color: white;
-      border: 1px solid #D8DDEC;
-      box-sizing: border-box;
-      font-size: 1rem;
-      color: black;
-    }
-  }
+.chat-footer {
+  border-radius: 10px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #EDEDED;
+  padding: 10px 20px;
 }
 
 .modal-footer {