Fix buttons UI in contacts

customize.dist/src/less2/include/alertify.less

@@ -3,6 +3,7 @@
 @import (reference) "./variables.less";
 @import (reference) "./avatar.less";
 @import (reference) "./tools.less";
+@import (reference) "./buttons.less";
 
 .alertify_main() {
     --LessLoader_require: LessLoader_currentFile();
@@ -260,100 +261,7 @@
                 }
             }
 
-            button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+            .buttons_main();
-
-                background-color: @colortheme_alertify-cancel;
-                box-sizing: border-box;
-                position: relative;
-                outline: 0;
-                display: inline-block;
-                align-items: center;
-                padding: 0 6px;
-                margin: 6px 8px;
-                line-height: 36px;
-                min-height: 36px;
-                white-space: nowrap;
-                min-width: 88px;
-                text-align: center;
-                text-transform: uppercase;
-                font-size: 14px;
-                text-decoration: none;
-                cursor: pointer;
-                border-radius: 0;
-
-                color: @alertify-btn-fg;
-                border: 1px solid @alertify-btn-fg;
-
-                &.no-margin {
-                    margin: 0;
-                }
-
-                &:hover, &:active {
-                    background-color: @alertify-light-bg;
-                }
-
-                &.safe, &.danger {
-                    color: @colortheme_old-base;
-                    white-space: normal;
-                    font-weight: bold;
-                }
-                &.danger {
-                    background-color: @colortheme_alertify-red;
-                    border-color: @colortheme_alertify-red-border;
-                    color: @colortheme_alertify-red-color;
-                    &:hover, &:active {
-                        background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
-                    }
-                }
-
-                &.safe {
-                    background-color: @colortheme_alertify-green;
-                    border-color: @colortheme_alertify-green-border;
-                    color: @colortheme_alertify-green-color;
-                    &:hover, &:active {
-                        background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
-                    }
-                }
-
-                &.primary {
-                    background-color: @colortheme_alertify-primary;
-                    color: @colortheme_alertify-primary-text;
-                    border-color: @colortheme_alertify-primary-border;
-                    font-weight: bold;
-                    &:hover, &:active {
-                        background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
-                    }
-                }
-
-                &.cancel {
-                    border-color: @colortheme_alertify-cancel-border;
-                    color: @colortheme_alertify-cancel-border;
-                    &:hover, &:hover {
-                        background-color: fade(@colortheme_alertify-cancel-border, 25%);
-                    }
-                }
-
-
-
-                &:focus {
-                    //border: 1px dotted @alertify-base;
-                    box-shadow: 0px 0px 5px @colortheme_alertify-primary;
-                    outline: none;
-                }
-                &::-moz-focus-inner {
-                    border: 0;
-                }
-
-                &:disabled {
-                    cursor: not-allowed !important;
-                    background-color: @colortheme_alertify-disabled;
-                    color: @colortheme_alertify-disabled-text;
-                    border-color: @colortheme_alertify-disabled-border;
-                    &:hover, &:active {
-                        background-color: @colortheme_alertify-disabled;
-                    }
-                }
-            }
 
             nav {
                 padding: @alertify_padding-base;

customize.dist/src/less2/include/buttons.less

@@ -0,0 +1,107 @@
+@import (reference) "./colortheme-all.less";
+
+.buttons_main() {
+    @alertify-fore: @colortheme_modal-fg;
+    @alertify-btn-fg: @alertify-fore;
+    @alertify-light-bg: fade(@alertify-fore, 25%);
+
+    button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+
+        background-color: @colortheme_alertify-cancel;
+        box-sizing: border-box;
+        position: relative;
+        outline: 0;
+        display: inline-block;
+        align-items: center;
+        padding: 0 6px;
+        margin: 6px 8px;
+        line-height: 36px;
+        min-height: 36px;
+        white-space: nowrap;
+        min-width: 88px;
+        text-align: center;
+        text-transform: uppercase;
+        font-size: 14px;
+        text-decoration: none;
+        cursor: pointer;
+        border-radius: 0;
+
+        .fa {
+            margin-right: 0.2em;
+        }
+
+        color: @alertify-btn-fg;
+        border: 1px solid @alertify-btn-fg;
+
+        &.no-margin {
+            margin: 0;
+        }
+
+        &:hover, &:active {
+            background-color: lighten(@alertify-fore, 35%);
+        }
+
+        &.safe, &.danger {
+            color: @colortheme_old-base;
+            white-space: normal;
+            font-weight: bold;
+        }
+        &.danger {
+            background-color: @colortheme_alertify-red;
+            border-color: @colortheme_alertify-red-border;
+            color: @colortheme_alertify-red-color;
+            &:hover, &:active {
+                background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
+            }
+        }
+
+        &.safe {
+            background-color: @colortheme_alertify-green;
+            border-color: @colortheme_alertify-green-border;
+            color: @colortheme_alertify-green-color;
+            &:hover, &:active {
+                background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
+            }
+        }
+
+        &.primary {
+            background-color: @colortheme_alertify-primary;
+            color: @colortheme_alertify-primary-text;
+            border-color: @colortheme_alertify-primary-border;
+            font-weight: bold;
+            &:hover, &:active {
+                background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
+            }
+        }
+
+        &.cancel {
+            border-color: @colortheme_alertify-cancel-border;
+            color: @colortheme_alertify-cancel-border;
+            &:hover, &:hover {
+                background-color: fade(@colortheme_alertify-cancel-border, 25%);
+            }
+        }
+
+
+
+        &:focus {
+            //border: 1px dotted @alertify-base;
+            box-shadow: 0px 0px 5px @colortheme_alertify-primary;
+            outline: none;
+        }
+        &::-moz-focus-inner {
+            border: 0;
+        }
+
+        &:disabled {
+            cursor: not-allowed !important;
+            background-color: @colortheme_alertify-disabled;
+            color: @colortheme_alertify-disabled-text;
+            border-color: @colortheme_alertify-disabled-border;
+            &:hover, &:active {
+                background-color: @colortheme_alertify-disabled;
+            }
+        }
+    }
+
+}

www/common/messenger-ui.js

@@ -14,6 +14,8 @@ define([
 
     var MessengerUI = {};
 
+    var mutedUsers = {};
+
     var dataQuery = function (id) {
         return '[data-key="' + id + '"]';
     };
@@ -70,7 +72,7 @@ define([
             h('div.cp-app-contacts-friends.cp-app-contacts-category', [
                 h('div.cp-app-contacts-category-content.cp-contacts-friends'),
                 h('h2.cp-app-contacts-category-title', Messages.contacts_friends),
-                h('button.btn.btn-secondary.cp-app-contacts-muted-button', Messages.contacts_manageMuted || 'MANAGE MUTED') // XXX
+                h('button.cp-app-contacts-muted-button', Messages.contacts_manageMuted || 'MANAGE MUTED') // XXX
             ]),
             h('div.cp-app-contacts-rooms.cp-app-contacts-category', [
                 h('div.cp-app-contacts-category-content'),
@@ -510,8 +512,16 @@ define([
                 title: room.name
             });
 
+
+            var curve;
+            if (room.isFriendChat) {
+                var __channel = state.channels[id];
+                curve = __channel.curvePublic;
+            }
+
             var mute = h('span.cp-app-contacts-remove.fa.fa-bell-slash-o.cp-mute-icon', {
-                title: Messages.contacts_mute || 'mute'
+                title: Messages.contacts_mute || 'mute',
+                style: (curve && mutedUsers[curve]) ? 'display: none;' : undefined
             });
             var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', {
                 title: Messages.contacts_remove
@@ -821,6 +831,7 @@ define([
         var updateMutedList = function () {
             execCommand('GET_MUTED_USERS', null, function (err, muted) {
                 if (err) { return void console.error(err); }
+                mutedUsers = muted;
 
                 var $button = $userlist.find('.cp-app-contacts-muted-button');
 
@@ -830,9 +841,11 @@ define([
                 }
 
                 var rows = Object.keys(muted).map(function (curve) {
+                    $('.cp-app-contacts-friend[data-user="'+curve+'"]')
+                        .find('.cp-mute-icon').hide();
                     var data = muted[curve];
                     var avatar = h('span.cp-avatar');
-                    var button = h('button.btn.btn-secondary', [
+                    var button = h('button', [
                         h('i.fa.fa-ban'),
                         Messages.contacts_unmute || 'unmute'
                     ]);

www/contacts/app-contacts.less

@@ -1,6 +1,7 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/messenger.less';
 @import (reference) '../../customize/src/less2/include/avatar.less';
+@import (reference) '../../customize/src/less2/include/buttons.less';
 
 // body
 &.cp-app-contacts {
@@ -18,6 +19,9 @@
         display: flex; // We need this to remove a 3px border at the bottom of the toolbar
     }
 
+    .cp-app-contacts-friends {
+        .buttons_main();
+    }
     .cp-contacts-muted-table {
         .avatar_main(50px);
         .cp-contacts-muted-user {
@@ -29,6 +33,8 @@
         }
     }
 
+
+
     .messenger_main();
 }