Minor UI Changes

src/app/card/card.component.css

@@ -1,5 +1,6 @@
 .profile-container {
   font-family: 'Roboto', sans-serif;
+  height: calc(100vh - 50px);
 }
 
 .profile-container h1 {
@@ -9,7 +10,7 @@
   line-height: 32px;
   letter-spacing: 1.2px;
   text-align: center;
-  margin-top: 82px;
+  padding-top: 70px;
   text-transform: uppercase;
 }
 
@@ -18,7 +19,7 @@
   min-height: 500px;
   margin: 0 auto;
   border: 1px solid #ccc;
-  box-shadow: #ccc 1px 1px 4px;
+  box-shadow: rgba(0, 0, 0, 0.226) 1px 1px 4px;
   position: relative;
 }
 
@@ -81,62 +82,6 @@
   cursor: not-allowed;
 }
 
-.topnav {
-  position:absolute;
-  top:0;
-  left:0;
-  width: 100%;
-  background-color: #7C4DFF;
-  height: 50px;
-  color: #fff;
-}
-
-.topnav .logo {
-  display: inline-block;
-  font-family: 'Roboto Slab', serif;
-  font-size: 24px;
-  font-weight: bold;
-  text-transform: uppercase;
-  line-height: 32px;
-  padding-right: 80px;
-  position: relative;
-  top: -8px;
-  left: 28px;
-}
-
-.topnav .menu-item {
-  display: inline-block;
-  font-size: 10px;
-  line-height: 13px;
-  width: 100px;
-  height: 100%;
-  text-align: center;
-}
-
-.topnav .menu-item i {
-  font-size: 24px;
-  margin-top:8px;
-  margin-bottom: 2px;
-}
-
-.topnav .profile-menu {
-  float: right;
-  display: inline-block;
-  width: 50px;
-  height: 50px;
-  background-color: rgba(0,0,0,0.25);
-}
-
-.topnav .profile-menu img {
-  display: block;
-  height: 30px;
-  width: 30px;
-  border-radius: 50%;
-  margin: 0 auto;
-  margin-top:10px;
-  cursor: pointer;
-}
-
 .loading-image {
   text-align: center;
   margin-top: 50px;

src/app/services/chat.service.ts

@@ -79,14 +79,15 @@ export class ChatService {
     this.chatMessages.length = 0;
     this.loadMessagesFromTo(this.otherUser, this.thisUser);
     this.loadMessagesFromTo(this.thisUser, this.otherUser);
-    this.chatMessages.sort((m1, m2) => m1.timeSent.getTime() - m2.timeSent.getTime());
+    //this.chatMessages.sort((m1, m2) => m1.timeSent.getTime() - m2.timeSent.getTime());
   }
 
   private async loadMessagesFromTo(user1 : User, user2 : User) {
     let messages = (await this.rdf.getElementsFromContainer(await this.getChatUrl(user1, user2)))
     if (!messages) {
       this.toastr.error("Please make sure the other user has clicked on your chat", "Could not load messages");
       this.isActive.next(false);
+      this.chatMessages.length = 0;
       return;
     }
     messages.forEach(async element => {
@@ -118,11 +119,13 @@ export class ChatService {
 
   private addMessage(message : ChatMessage) {
     this.chatMessages.push(message);
+    this.chatMessages.sort((m1, m2) => m1.timeSent.getTime() - m2.timeSent.getTime());
   }
 
   async sendMessage(msg: string) {
     if(msg !== "" && this.otherUser) {
       const newMsg = new ChatMessage(this.thisUser.username, msg);
+      this.addMessage(newMsg);
       this.postMessage(newMsg).then(res => this.loadMessages());
     }
   }

src/app/settings/settings.component.css

@@ -24,9 +24,14 @@ h2 {
     box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.67);
 }
 
+.setting > p {
+    margin: 0.25em;
+    color: rgb(23, 29, 29);
+}
+
 .group {
     display: flex;
-    margin: 0.6rm;
+    margin: 0.6em;
 }
 
 .textInput {

src/app/settings/settings.component.html

@@ -1,6 +1,10 @@
 <div class="settingsFormWrapper">
   <div class="setting">
       <h2>Add a friend</h2>
+      <p>
+        Note: although this adds this user to your friends list, this does not mean that we you can chat with him/her. <br>
+        The other user should add you to their list and then click on your profile in order to set everything up.
+      </p>
       <div class="group">
           <input class="textInput"
           [(ngModel)]="webId" (keydown)="handleSubmit($event)"