src/app/modules/messenger/conversation/conversation.component.html

-<div class="m-messenger--conversation m-messenger--dockpane mdl-shadow--4dp" [class.m-messenger--dockpane-open]="conversation.open">
+<div class="m-messenger--conversation m-messenger--dockpane" [class.m-messenger--dockpane-open]="conversation.open">
   <div class="m-messenger--dockpane-tab"
     [class.mdl-color--amber]="conversation.unread"
-    (click)="dockpanes.toggle(conversation); initialLoad()">
+    (click)="toggle(); initialLoad()">
     <div class="m-messenger--dockpane-tab-title">
       <span *ngFor="let participant of conversation.participants">{{participant.username}}</span>
     </div>
     <div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
       <i class="material-icons mdl-color-text--blue-grey-100" [hidden]="live">sync_problem</i>
       <i class="material-icons"
-      (click)="ribbon.open = !ribbon.open"
-      [ngClass]="{ 'm-status-active': ribbon.open }"
-      >more_vert</i>
+        (click)="ribbonToggle()"
+        >more_vert</i>
       <i class="material-icons" (click)="dockpanes.close(conversation)">close</i>
     </div>
   </div>
 
-  <div class="m-messenger--dockpane-container mdl-shadow--2dp">
-    <div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbon.open">
-      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbon.open = false" *ngIf="showMessages">
+  <div class="m-messenger--dockpane-container">
+    <div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbonOpened">
+      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbonOpened = false">
         <i class="material-icons mdl-color-text--blue-grey-100" title="Delete chat history" i18n-title="@@MESSENGER__CONVERSATION__DELETE_TOOLTIP">delete</i>
         <ng-container i18n="@@MESSENGER__CONVERSATION__DESTROY">Destroy</ng-container>
       </div>
-      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="!blocked">
+      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="!blocked">
         <i class="material-icons mdl-color-text--blue-grey-100" title="Block participants" i18n-title="@@MESSENGER__CONVERSATION__BLOCK_TOOLTIP">block</i>
         <ng-container i18n="@@MESSENGER__CONVERSATION__BLOCK">Block</ng-container>
       </div>
-      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="blocked">
+      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="blocked">
         <i class="material-icons mdl-color-text--blue-grey-100" title="Un-block chat" i18n-title="@@MESSENGER__CONVERSATION__UNBLOCK_TOOLTIP">restore</i>
         <ng-container i18n="@@MESSENGER__CONVERSATION__UNBLOCK">Un-block</ng-container>
       </div>

src/app/modules/messenger/conversation/conversation.component.scss

 @import 'defaults.scss';
 
 .m-messenger--conversation{
+  border-radius: 3px 3px 0 0;
+  @include m-theme(){
+    box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
+  }
 
   .m-messenger--conversation-messages{
     max-height:240px;
@@ -83,6 +87,15 @@
         margin-bottom: $minds-padding * 2;
         line-height: 1.35;
       }
+
+      button:not([disabled]) {
+        &:hover {
+          @include m-theme(){
+            background-color: themed($m-blue-grey-700);
+          }
+        }
+
+      }
     }
   }
   .m-messenger--conversation-composer{

src/app/modules/messenger/conversation/conversation.component.ts

@@ -64,6 +64,8 @@ export class MessengerConversation {
   invitable: any[] | null = null;
   invited: boolean = false;
 
+  ribbonOpened: boolean = false;
+
   constructor(
     public session: Session,
     public client: Client,
@@ -360,8 +362,22 @@ export class MessengerConversation {
         has = true;
       }
     });
-
     return has;
   }
 
+  // Open the conversation with the ribbon
+  ribbonToggle() {
+    if (!this.ribbonOpened && !this.conversation.open) {
+      this.dockpanes.open(this.conversation);
+    }
+    this.ribbonOpened = !this.ribbonOpened;
+  }
+
+  // Close the ribbon with the conversation
+  toggle() {
+    if (this.ribbonOpened) {
+      this.ribbonOpened = false;
+    }
+    this.dockpanes.toggle(this.conversation);
+  }
 }

src/app/modules/messenger/dockpanes/dockpanes.component.scss

@@ -37,7 +37,6 @@
     @include m-theme(){
       background-color: themed($m-white);
       color: themed($m-grey-800);
-      border: 1px solid themed($m-grey-50);
     }
 
     .m-messenger--dockpane-tab-title{
@@ -63,7 +62,6 @@
     }
 
     .m-messenger--dockpane-tab-actions{
-      display: inline-block;
       text-align: right;
       vertical-align: middle;
       float: right;
@@ -75,10 +73,9 @@
         line-height: 12px;
         border-radius: 0 3px 0 0;
 
-        &:hover,
-        &.m-status-active{
+        &:hover{
           @include m-theme(){
-            color: themed($m-blue-grey-700) !important;
+            color: themed($m-grey-500) !important;
           }
         }
       }
@@ -121,6 +118,17 @@
       padding-bottom: 8px;
       cursor: pointer;
 
+      &:hover{
+        @include m-theme(){
+          color: themed($m-blue-grey-500) !important;
+        }
+        > i {
+          @include m-theme(){
+            color: themed($m-blue-grey-500) !important;
+          }
+        }
+      }
+
       > i{
         width: 100%;
         font-size: 16px;
@@ -128,12 +136,6 @@
         line-height: 12px;
         border-radius: 0 3px 0 0;
         cursor: pointer;
-
-        &:hover{
-          @include m-theme(){
-            color: themed($m-blue-grey-700) !important;
-          }
-        }
       }
     }
   }

src/app/modules/messenger/encryption/encryption.component.scss

@@ -23,13 +23,13 @@
     font-size: 11px;
     line-height: 1.35;
     margin: 0;
-    padding: $minds-padding;
+    padding: 8px 12px;
   }
   .m-messenger--encryption-setup-help {
     font-size: 11px;
     line-height: 1.35;
     margin: 0;
-    padding: $minds-padding;
+    padding: 8px 12px;
     @include m-theme(){
       color: themed($m-blue-grey-700);
     }

src/app/modules/messenger/userlist/userlist.component.html

@@ -4,32 +4,30 @@
     <div class="m-messenger--dockpane-tab-title"><i class="material-icons">chat_bubble</i><span i18n="@@MESSENGER__USERLIST__MESSENGER_TITLE">Messenger</span></div>
     <div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
       <i class="material-icons"
-        (click)="ribbonToggle()"
-        [ngClass]="{ 'm-status-active': opened_ribbon }">
+        (click)="ribbonToggle()">
         settings
       </i>
     </div>
   </div>
   <div class="m-messenger--dockpane-container">
-
-    <div class="m-messenger--dockpane-tab-ribbon mdl-color-text--blue-grey-300" #ribbon [hidden]="!opened_ribbon">
-      <div class="m-messenger--dockpane-tab-icon" (click)="logout(); opened_ribbon = false" [hidden]="!encryption.isOn()">
+    <div class="m-messenger--dockpane-tab-ribbon mdl-color-text--blue-grey-300" #ribbon [hidden]="!ribbonOpened">
+      <div class="m-messenger--dockpane-tab-icon" (click)="logout(); ribbonOpened = false" [hidden]="!encryption.isOn()">
         <i class="material-icons mdl-color-text--blue-grey-100"
           title="Logout of chat" i18n-title="@@MESSENGER__USERLIST__LOGOUT_TOOLTIP"
           >exit_to_app</i>
           <ng-container i18n="@@MESSENGER__USERLIST__LOGOUT">Logout</ng-container>
       </div>
-      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.mute(); opened_ribbon = false" [hidden]="!sounds.canPlay()">
+      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.mute(); ribbonOpened = false" [hidden]="!sounds.canPlay()">
         <i class="material-icons mdl-color-text--blue-grey-100"
           title="Disable sounds" i18n-title="@@MESSENGER__USERLIST__DISABLE_SOUNDS_TOOLTIP">notifications</i>
           <ng-container i18n="@@MESSENGER__USERLIST__MUTE">Mute</ng-container>
       </div>
-      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.unmute(); opened_ribbon = false" [hidden]="sounds.canPlay()">
+      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.unmute(); ribbonOpened = false" [hidden]="sounds.canPlay()">
         <i class="material-icons mdl-color-text--blue-grey-100"
           title="Enable sounds" i18n-title="@@MESSENGER__USERLIST__ENABLE_SOUNDS_TOOLTIP">notifications_off</i>
           <ng-container i18n="@@MESSENGER__USERLIST__UNMUTE">Unmute</ng-container>
       </div>
-      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="encryption.reKeying = !encryption.reKeying; opened_ribbon = false">
+      <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="encryption.reKeying = !encryption.reKeying; ribbonOpened = false">
         <i class="material-icons mdl-color-text--blue-grey-100"
           title="Change your encryption password" i18n-title="@@MESSENGER__USERLIST__CHANGE_PWD_TOOLTIP">vpn_key</i>
           <ng-container i18n="@@MESSENGER__USERLIST__REKEY">Re-key</ng-container>
@@ -53,11 +51,9 @@
       <div [hidden]="!inProgress" style="width:100%; text-align:center; ">
         <div class="mdl-spinner mdl-js-spinner is-active" [mdl] style="margin: 16px auto;"></div>
       </div>
-
-
     </div>
 
-    <div class="m-messenger--userlist-search" [hidden]="opened_ribbon">
+    <div class="m-messenger--userlist-search" [hidden]="ribbonOpened">
       <i class="material-icons">search</i>
       <input type="text" placeholder="Search" i18n-placeholder="@@MESSENGER__USERLIST__SEARCH_PH" #q (keyup)="search(q);">
     </div>

src/app/modules/messenger/userlist/userlist.component.scss

@@ -3,6 +3,10 @@
 #{if(&, "&", "*")}.m-messenger--userlist{
 
   width:200px;
+  border-radius: 3px 3px 0 0;
+  @include m-theme(){
+    box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
+  }
 
   .m-messenger--userlist-search{
     height: 30px;
@@ -42,6 +46,12 @@
     display: flex;
     align-items: center;
 
+    &:hover {
+      @include m-theme(){
+        background-color: rgba(themed($m-blue-grey-50), 0.5);
+      }
+    }
+
     img{
       width: 24px;
       margin: 8px;

src/app/modules/messenger/userlist/userlist.component.ts

@@ -28,7 +28,7 @@ export class MessengerUserlist {
   hasMoreData: boolean = true;
   inProgress: boolean = false;
   cb: number = Date.now();
-  opened_ribbon: boolean = false;
+
   minds: Minds = window.Minds;
   storage: Storage = new Storage();
 
@@ -37,7 +37,8 @@ export class MessengerUserlist {
   };
 
   userListToggle: boolean = false;
-
+  ribbonOpened: boolean = false;
+  
   search_timeout;
 
   constructor(
@@ -170,14 +171,19 @@ export class MessengerUserlist {
     }
   }
 
+  // Open the userlist with the ribbon
   ribbonToggle() {
-    if (!this.userListToggle) {
+    if (!this.ribbonOpened && !this.userListToggle) {
       this.userListToggle = true;
     }
-    this.opened_ribbon = !this.opened_ribbon;
+    this.ribbonOpened = !this.ribbonOpened;
   }
 
+  // Close the ribbon with the userlist
   toggle() {
+    if (this.ribbonOpened) {
+      this.ribbonOpened = false;
+    }
     this.userListToggle = !this.userListToggle;
     if (this.userListToggle)
       this.load({ refresh: true });