From 7e39540442c2d73f6bcb98301a43d0b37efd1b04 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Mon, 27 Sep 2021 12:09:33 +0100
Subject: [PATCH] save improvements

---
 src/app/pages/chat/chat.page.html | 18 ++++++++++++++----
 src/app/pages/chat/chat.page.scss |  9 +++++++++
 src/global.scss                   | 28 ++++++++++++++++------------
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index 1eddc937c..f8043b411 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -68,12 +68,12 @@
                       <div class="item-description" [class.item-description-active]="dm._id == idSelected">
                         <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
                         <ion-label *ngIf="dm.lastMessage.file">
-                          <fa-icon icon="file-alt" class="pdf-icon"></fa-icon>
+                          <fa-icon icon="file-alt" class="file-icon"></fa-icon>
                           <span> {{dm.lastMessage.file.name}}</span>
                         </ion-label>
                         <ion-label *ngIf="dm.lastMessage.attachments">
                           <div *ngIf="dm.lastMessage.attachments[0].image_url">
-                            <fa-icon icon="image" class="pdf-icon"></fa-icon>
+                            <fa-icon icon="image" class="file-icon"></fa-icon>
                             <span> Fotografia</span>
                           </div>
                         </ion-label>
@@ -98,8 +98,18 @@
                         </div>
                         <div class="item-date" [class.item-date-active]="group._id ==idSelected" *ngIf="group.lastMessage">{{showDateDuration(group._updatedAt)}}</div>
                       </div>
-                      <div class="item-description" [class.item-description-active]="group._id ==idSelected" *ngIf="group.lastMessage">
-                        <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
+                      <div class="item-description d-flex align-items-center" [class.item-description-active]="group._id ==idSelected" *ngIf="group.lastMessage">
+                        <div class="item-message">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>
+                        <div class="item-files" *ngIf="group.lastMessage.file">
+                          <fa-icon icon="file-alt" class="file-icon"></fa-icon>
+                          <span> {{group.lastMessage.file.name}}</span>
+                        </div>
+                        <div  class="item-files" *ngIf="group.lastMessage.attachments">
+                          <div *ngIf="group.lastMessage.attachments[0].image_url">
+                            <fa-icon icon="image" class="file-icon"></fa-icon>
+                            <span> Fotografia</span>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index 22e63e1dc..e1325d3b8 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -117,6 +117,15 @@ ion-content{
   .item-description{
     font-size: 13px;
     color: #000;
+    overflow: auto;
+
+    .item-message{
+      float: left;
+      padding-right: 5px;
+    }
+    .item-files{
+      float: left;
+    }
   }
   .item-description-active{
     color: #fff;
diff --git a/src/global.scss b/src/global.scss
index 65fdb383e..b87ec5cc6 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1134,18 +1134,6 @@ ngx-mat-datetime-content{
         overflow: hidden !important;
         text-overflow: ellipsis !important;
       }
-      .pdf-icon{
-        color: #a40404;
-      }
-      .word-icon{
-        color: #295497;
-      }
-      .excel-icon{
-        color: #1f7244;
-      }
-      .powerpoint-icon{
-        color: #d24726;
-      }
     }
   }
   .file-details-optional{
@@ -1154,6 +1142,22 @@ ngx-mat-datetime-content{
   }
 }
 
+.file-icon{
+  color: #b2b2b2 !important;
+}
+.pdf-icon{
+  color: #a40404;
+}
+.word-icon{
+  color: #295497;
+}
+.excel-icon{
+  color: #1f7244;
+}
+.powerpoint-icon{
+  color: #d24726;
+}
+
 @media only screen and (min-width: 665px) {
     .loading-blocker {