Bug 1183649 - Implement the refreshed design for the 'Start a new conversation' button. r=mikedeboer

browser/components/loop/content/css/panel.css

@@ -1,6 +1,10 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+html {
+  font-size: 10px;
+  font-family: menu;
+}
 
 body {
   background: none;
@@ -177,7 +181,7 @@ body {
   display: block;
   width: 100%;
   margin-top: 10px;
-  font-size: 10px;
+  font-size: 1rem;
   color: #777;
 }
 
@@ -211,13 +215,20 @@ body {
   font-weight: bold;
   color: #999;
   padding: .5rem 0;
+  height: 3rem;
+  line-height: 3rem;
+}
+
+.new-room-view > .context-checkbox-checked {
+  background-color: #dbf7ff;
 }
 
 .new-room-view > .context {
-  margin: .5rem 0 0;
+  margin: .5rem 0 .5rem;
-  background-color: #dbf7ff;
   border-radius: 3px 3px 0 0;
-  padding: .5rem;
+  padding: .5rem 1rem ;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
 
 .new-room-view > .context > .context-enabled {
@@ -230,11 +241,13 @@ body {
 }
 
 .new-room-view > .context > .checkbox-wrapper {
+  height: 2rem;
   margin-bottom: .5em;
+  line-height: 2rem;
 }
 
 .new-room-view > .context > .checkbox-wrapper > .checkbox {
-  border-color: #0096dd;
+  border-color: #d8d8d8;
   background-color: #fff;
 }
 
@@ -244,16 +257,17 @@ body {
 
 .new-room-view > .context > .checkbox-wrapper > label {
   color: #333;
-  font-weight: 700;
+  font-size: 1.1rem;
 }
 
 .new-room-view > .btn {
+  height: 3rem;
   display: block;
-  font-size: 1rem;
+  font-size: 1.2rem;
-  margin: 0 auto .5rem;
+  margin: 0 auto 1rem;
   width: 100%;
   padding: .5rem 1rem;
-  border-radius: 0 0 3px 3px;
+  border-radius: 4px;
 }
 
 /* Remove when bug 1142671 is backed out. */
@@ -277,14 +291,14 @@ body {
 }
 
 .room-list > .room-entry {
-  padding: .5rem 1rem;
+  padding: .2rem 1rem;
   /* Always show the default pointer, even over the text part of the entry. */
   cursor: default;
 }
 
 .room-list > .room-entry > h2 {
   display: inline-block;
-  font-size: .85rem;
+  font-size: 1rem;
   color: #777;
   /* See .room-entry-context-item for the margin/size reductions. */
   width: calc(100% - 1rem - 16px);
@@ -309,11 +323,7 @@ body {
 }
 
 .room-list > .room-entry:hover {
-  background: #f1f1f1;
+  background: #dbf7ff;
-}
-
-.room-list > .room-entry:not(:last-child) {
-  border-bottom: 1px solid #ccc;
 }
 
 .room-list > .room-entry > p {
@@ -424,7 +434,7 @@ body {
   border: 1px solid #c1c1c1;
   border-radius: 2px;
   min-height: 26px;
-  font-size: 12px;
+  font-size: 1.2rem;
 }
 
 .button > .button-caption {
@@ -619,7 +629,7 @@ html[dir="rtl"] .generate-url-spinner {
 }
 
 .terms-service > a {
-  color: #00caee;
+  color: #00a9dc;
 }
 
 /* DnD menu */

browser/components/loop/content/js/panel.js

@@ -774,6 +774,7 @@ loop.panel = (function(_, mozL10n) {
 
       var contextClasses = React.addons.classSet({
         context: true,
+        "context-checkbox-checked": this.state.checked,
         hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConversations.enabled")
       });

browser/components/loop/content/js/panel.jsx

@@ -774,6 +774,7 @@ loop.panel = (function(_, mozL10n) {
 
       var contextClasses = React.addons.classSet({
         context: true,
+        "context-checkbox-checked": this.state.checked,
         hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConversations.enabled")
       });

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

@@ -100,19 +100,19 @@ p {
 }
 
 .btn-info {
-  background-color: #0096dd;
+  background-color: #00a9dc;
-  border: 1px solid #0095dd;
+  border: 1px solid #00a9dc;
   color: #fff;
 }
 
   .btn-info:hover {
-    background-color: #008acb;
+    background-color: #5cccee;
-    border: 1px solid #008acb;
+    border: 1px solid #5cccee;
   }
 
   .btn-info:active {
-    background-color: #006b9d;
+    background-color: #5cccee;
-    border: 1px solid #006b9d;
+    border: 1px solid #5cccee;
   }
 
 .btn-accept,
@@ -468,8 +468,8 @@ html[dir="rtl"] .dropdown-menu {
 
 .checkbox {
   float: left;
-  width: 1em;
+  width: 2rem;
-  height: 1em;
+  height: 2rem;
   -moz-margin-end: .5em;
   margin-top: .1em;
   border: 1px solid #999;
@@ -521,7 +521,7 @@ html[dir="rtl"] .context-content {
 
 .context-wrapper {
   border: 1px solid #5cccee;
-  border-radius: 3px;
+  border-radius: 4px;
   background: #fff;
   padding: .8em;
   /* Use the flex row mode to position the elements next to each other. */
@@ -530,6 +530,10 @@ html[dir="rtl"] .context-content {
   line-height: 1.1em;
 }
 
+.context-wrapper:hover {
+  background-color: #dbf7ff;
+}
+
 .context-wrapper > .context-preview {
   float: left;
   /* 16px is standard height/width for a favicon */
@@ -556,7 +560,7 @@ html[dir="rtl"] .context-wrapper > .context-preview {
 
 .context-wrapper > .context-description > .context-url {
   display: block;
-  color: #59A1D7;
+  color: #00a9dc;
   font-weight: 700;
   clear: both;
 }