CSS for the removeHistory button in contacts

customize.dist/translations/messages.fr.js

@@ -278,6 +278,10 @@ define(function () {
     out.contacts_info3 = "Double-cliquer sur son nom pour voir son profil";
     out.contacts_info4 = "Chaque participant peut nettoyer définitivement l'historique d'une discussion";
 
+    out.contacts_removeHistoryTitle = "Supprimer l'historique du chat";
+    out.contacts_confirmRemoveHistory = 'Êtes-vous sûr de vouloir supprimer définitivement l\'historique de votre chat ? Les messages ne pourront pas être restaurés.';
+    out.contacts_removeHistoryServerError = 'Une erreur est survenue lors de la supprimer de l\'historique du chat. Veuillez réessayer plus tard.';
+
     // File manager
 
     out.fm_rootName = "Documents";

customize.dist/translations/messages.js

@@ -282,6 +282,7 @@ define(function () {
     out.contacts_info3 = "Double-click their icon to view their profile";
     out.contacts_info4 = "Either participant can clear permanently a chat history";
 
+    out.contacts_removeHistoryTitle = 'Clean the chat history';
     out.contacts_confirmRemoveHistory = 'Are you sure you want to permanently remove your chat history? Data cannot be restored';
     out.contacts_removeHistoryServerError = 'There was an error while removing your chat history. Try again later';
 

www/common/common-messaging.js

@@ -284,15 +284,15 @@ define([
         var proxy = common.getProxy();
 
         var $header = $('<div>', {
-            'class': 'cp-contact-top-bar header',
+            'class': 'header',
         }).appendTo($container);
 
         var $avatar = $('<div>', {'class': 'avatar'}).appendTo($header);
 
         var $removeHistory = $('<span>', {
-            'class': 'remove-history fa fa-eraser'
+            'class': 'remove-history fa fa-eraser',
+            title: common.Messages.contacts_removeHistoryTitle
         })
-        // TODO set title
         .click(function () {
             Cryptpad.confirm(common.Messages.contacts_confirmRemoveHistory, function (yes) {
                 if (!yes) { return; }

www/contacts/main.less

@@ -112,10 +112,21 @@ body {
     }
 }
 
-.cp-contact-top-bar {
+#messaging {
+    flex: 1;
+    height: 100%;
+    background-color: lighten(@bg-color, 20%);
+    min-width: 0;
+    .info {
+        padding: 20px;
+    }
+    .header {
+        background-color: lighten(@bg-color, 15%);
+        padding: 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        height: 50px;
 
         .avatar,
         .right-col {
@@ -123,24 +134,15 @@ body {
         }
         .remove-history {
             height: 100%;
-
+            line-height: 30px;
+            padding: 10px;
             &:hover {
-            background-color: lighten(@bg-color, 20%);
+                background-color: rgba(50,50,50,0.3);
             }
         }
+        .avatar {
+            margin: 10px;
         }
-
-#messaging {
-    flex: 1;
-    height: 100%;
-    background-color: lighten(@bg-color, 20%);
-    min-width: 0;
-    .info {
-        padding: 20px;
-    }
-    .header {
-        background-color: lighten(@bg-color, 15%);
-        padding: 10px;
     }
     .chat {
         height: 100%;