Bug 1193666 - Fix surrounding colour of context tiles for Loop's text chat views. Also fix the fallback icon for context on desktop. r=mikedeboer

browser/components/loop/content/shared/css/common.css

@@ -586,7 +586,10 @@ html[dir="rtl"] .context-wrapper > .context-preview {
 }
 
 .clicks-allowed.context-wrapper:hover {
-  background-color: #dbf7ff;
+  border: 2px solid #5cccee;
+  /* Due to the increased border width, reduce the padding accordingly so that
+     the text doesn't move. */
+  padding: calc(.8em - 1px);
 }
 
 /* Only underline the url, not the associated text */

browser/components/loop/content/shared/css/conversation.css

@@ -883,7 +883,7 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
      0.5rem for padding of .text-chat-entry > p */
   padding: calc(18px - 1px - 0.5rem);
   margin-bottom: 0.5em;
-  background-color: #E8F6FE;
+  background-color: #dbf7ff;
 }
 
 .room-context {
@@ -1610,13 +1610,13 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
   color: black;
   font-weight: bold;
   text-align: start;
-  background-color: #E8F6FE;
+  background-color: #dbf7ff;
   margin-bottom: 0;
   margin-right: 0;
 }
 
 .text-chat-entry.special.room-name p {
-  background: #E8F6FE;
+  background: #dbf7ff;
   max-width: 100%;
   /* 18px for indent of .text-chat-arrow, 1px for border of .text-chat-entry > p,
    0.5rem for padding of .text-chat-entry > p */

browser/components/loop/content/shared/js/textChatView.js

@@ -76,8 +76,7 @@ loop.shared.views.chat = (function(mozL10n) {
     mixins: [React.addons.PureRenderMixin],
 
     propTypes: {
-      message: React.PropTypes.string.isRequired,
+      message: React.PropTypes.string.isRequired
-      useDesktopPaths: React.PropTypes.bool.isRequired
     },
 
     render: function() {
@@ -180,8 +179,7 @@ loop.shared.views.chat = (function(mozL10n) {
                       return (
                         React.createElement(TextChatRoomName, {
                           key: i, 
-                          message: entry.message, 
+                          message: entry.message})
-                          useDesktopPaths: this.props.useDesktopPaths})
                       );
                     case CHAT_CONTENT_TYPES.CONTEXT:
                       return (

browser/components/loop/content/shared/js/textChatView.jsx

@@ -76,8 +76,7 @@ loop.shared.views.chat = (function(mozL10n) {
     mixins: [React.addons.PureRenderMixin],
 
     propTypes: {
-      message: React.PropTypes.string.isRequired,
+      message: React.PropTypes.string.isRequired
-      useDesktopPaths: React.PropTypes.bool.isRequired
     },
 
     render: function() {
@@ -180,8 +179,7 @@ loop.shared.views.chat = (function(mozL10n) {
                       return (
                         <TextChatRoomName
                           key={i}
-                          message={entry.message}
+                          message={entry.message} />
-                          useDesktopPaths={this.props.useDesktopPaths} />
                       );
                     case CHAT_CONTENT_TYPES.CONTEXT:
                       return (

browser/components/loop/content/shared/js/views.js

@@ -1155,7 +1155,7 @@ loop.shared.views = (function(_, mozL10n) {
             React.createElement(loop.shared.views.chat.TextChatView, {
               dispatcher: this.props.dispatcher, 
               showRoomName: this.props.showContextRoomName, 
-              useDesktopPaths: false}), 
+              useDesktopPaths: this.props.useDesktopPaths}), 
              this.state.localMediaAboslutelyPositioned ?
               null : this.renderLocalVideo()
           )

browser/components/loop/content/shared/js/views.jsx

@@ -1155,7 +1155,7 @@ loop.shared.views = (function(_, mozL10n) {
             <loop.shared.views.chat.TextChatView
               dispatcher={this.props.dispatcher}
               showRoomName={this.props.showContextRoomName}
-              useDesktopPaths={false} />
+              useDesktopPaths={this.props.useDesktopPaths} />
             { this.state.localMediaAboslutelyPositioned ?
               null : this.renderLocalVideo() }
           </div>