From ae3c3456c5b98d2d4b07aab36f69d7782aee0bcf Mon Sep 17 00:00:00 2001
From: vankhaiphan <pvkhai98dn@gmail.com>
Date: Wed, 2 Jun 2021 09:23:16 +0200
Subject: [PATCH] add css for message.componenet and private.component - error
 when insert group icon for general room

---
 .../routes/conversations.js                   |  3 ++-
 .../src/app/message/message.component.html    |  2 +-
 .../src/app/message/message.component.scss    |  5 ++++-
 .../src/app/private/private.component.html    | 19 +++++++++++++------
 .../src/app/private/private.component.scss    |  9 +++++++++
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/backend/service-privateroom/routes/conversations.js b/backend/service-privateroom/routes/conversations.js
index dafbdd5..76cc5fe 100644
--- a/backend/service-privateroom/routes/conversations.js
+++ b/backend/service-privateroom/routes/conversations.js
@@ -110,7 +110,7 @@ router.post("/addRoomMember", async (req, res) => {
     if(req.body.member === req.body.owner){
         return sendError(res, 'Impossible de vous ajouter vous même');
     }
-
+    // TODO display errer when member (not host) try to add
     try{
         await Conversation.updateOne(
             {_id: req.body.conversationid, owner: req.body.owner},
@@ -147,6 +147,7 @@ router.post("/removeRoomMember", async (req, res) => {
     if(req.body.member === req.body.owner){
         return sendError(res, 'Impossible de vous enlever vous même');
     }
+    // TODO display errer when member (not host) try to remove
 
     try{
         await Conversation.updateOne(
diff --git a/frontend/src/app/message/message.component.html b/frontend/src/app/message/message.component.html
index d6ea7fb..b487361 100644
--- a/frontend/src/app/message/message.component.html
+++ b/frontend/src/app/message/message.component.html
@@ -1,5 +1,5 @@
 <div class="chat-container">
-    <div class="chat-header">
+    <div class="chat-header bg-primary">
       <p class="username" *ngIf="room !== 'general'">{{room}}</p>
       <p class="username" *ngIf="room === 'general'">General</p>
       <p class="username" *ngIf="room === ''">PLEASE CHOOSE A ROOM</p>
diff --git a/frontend/src/app/message/message.component.scss b/frontend/src/app/message/message.component.scss
index b715cc3..8c0a52f 100644
--- a/frontend/src/app/message/message.component.scss
+++ b/frontend/src/app/message/message.component.scss
@@ -1,3 +1,6 @@
 #messages { list-style-type: none; margin: 0; padding: 0; }
 #messages > li { padding: 0.5rem 1rem; }
-#messages > li:nth-child(odd) { background: #efefef; }
+#messages > li:nth-child(odd) { background: #007bff; }
+.chat-container .chat-header {
+  height: 60px;
+}
diff --git a/frontend/src/app/private/private.component.html b/frontend/src/app/private/private.component.html
index 1d9bf5e..c1e621a 100644
--- a/frontend/src/app/private/private.component.html
+++ b/frontend/src/app/private/private.component.html
@@ -1,16 +1,23 @@
 <div class="container col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
   <div class="row">
     <div class="col-xl-4 col-lg-4 col-md-4 col-sm-3 col-3">
-      <input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()"  type="submit" value="Private Room">
-      <input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()"  type="submit" value="Actualiser">
-      <input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()"  type="submit" value="Home Room">
-      <input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="newRoom()"  type="submit" value="New Room">
-      <input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()"  type="submit" value="Actualiser">
+      <br>
+      <div class="btn-group">
+        <input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()"  type="submit" value="Private Room">
+        <input *ngIf="privateRoomActivate === false" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()"  type="submit" value="Actualiser">
+        <input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListGeneral()"  type="submit" value="Home Room">
+        <input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="newRoom()"  type="submit" value="New Room">
+        <input *ngIf="privateRoomActivate === true" class="btn btn-sm btn-primary" name="button-change-private" (click)="changeListPrivate()"  type="submit" value="Actualiser">
+      </div>
       <div #userList class="user-list-card" id="userList" (click)="selectRoom($event)">
-        <div class="user-card"><p class="username">General</p></div>
+        <div class="user-card">
+          <img src="./assets/image/group.png" height="25" width="25"/>
+          <p class="username">General</p>
+        </div>
       </div>
     </div>
     <div class="col-xl-8 col-lg-8 col-md-8 col-sm-9 col-9">
+      <br>
       <app-message [room]="roomSelected" [typeRoom]="privateRoomActivate"></app-message>
     </div>
   </div>
diff --git a/frontend/src/app/private/private.component.scss b/frontend/src/app/private/private.component.scss
index e69de29..dee59b3 100644
--- a/frontend/src/app/private/private.component.scss
+++ b/frontend/src/app/private/private.component.scss
@@ -0,0 +1,9 @@
+.btn-group{
+  height: 60px;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+}
+.user-list-card{
+  height: calc(100% - 80px);
+}