try frontend...

frontend/src/app/general/general.component.html

@@ -5,35 +5,34 @@
 
       <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">
@@ -48,8 +47,6 @@
         </div>
 
       </div>
-        </ng-container>
-      </div>
     </div>
   </div>
 </div>

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 = '';
 

frontend/src/styles.scss

@@ -47,8 +47,12 @@ body {
   position: relative;
   overflow: hidden;
 
-  .chat-header {
+
+}
+
+.chat-header {
   height: 70px;
+  border-radius: 10px;
   background-color: #E5E5E5;
   display: flex;
   justify-content: flex-start;
@@ -63,51 +67,22 @@ body {
     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;
-
-    .message-container {
+.chat-body {
   background-color: white;
-      padding: 7px;
-      border-radius: 5px;
-      width: fit-content;
-      max-width: 90%;
-      margin-bottom: 15px;
-    }
+  border-radius: 10px;
+  height: calc(89.5vh - 89.5px);
+  overflow-y: auto;
+}
 
-    .same-user {
-      display: flex;
-      justify-content: flex-end;
-
-      .message-container {
-        background-color: lightskyblue;
-      }
-    }
-  }
-
-  .chat-footer {
-    position: absolute;
+.chat-footer {
+  border-radius: 10px;
   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;
-    }
-  }
 }
 
 .modal-footer {