Bug 1183649 - Implement the refreshed design for the 'Start a new conversation' button. r=mikedeboer
authorMarina Rodriguez Iglesias <marina.rodrigueziglesias@telefonica.com>
Thu, 30 Jul 2015 08:01:00 -0400
changeset 255624 35238dc29bd80f5b77bc51f429f9505de20eb43f
parent 255623 97c79f717d2fc818eba4424c30be8c39527616d8
child 255625 cc9121f8df37163afdca6c75e0f39fd0276cdd72
push id14347
push userryanvm@gmail.com
push dateFri, 31 Jul 2015 13:08:45 +0000
treeherderfx-team@9bc14f82bac8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1183649
milestone42.0a1
Bug 1183649 - Implement the refreshed design for the 'Start a new conversation' button. r=mikedeboer
browser/components/loop/content/css/panel.css
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/shared/css/common.css
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -1,11 +1,15 @@
 /* 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;
 }
 
 /* Panel styles */
 
 .panel {
@@ -172,17 +176,17 @@ body {
   /* The header shouldn't be indented if the tabs are present. */
   -moz-padding-start: 0;
 }
 
 .content-area label {
   display: block;
   width: 100%;
   margin-top: 10px;
-  font-size: 10px;
+  font-size: 1rem;
   color: #777;
 }
 
 .content-area input {
   display: block;
   width: 100%;
   outline: none;
   border-radius: 2px;
@@ -206,59 +210,69 @@ body {
   min-height: 100px;
   padding: 0 1rem;
 }
 
 .rooms > h1 {
   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;
-  background-color: #dbf7ff;
+  margin: .5rem 0 .5rem;
   border-radius: 3px 3px 0 0;
-  padding: .5rem;
+  padding: .5rem 1rem ;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
 
 .new-room-view > .context > .context-enabled {
   margin-bottom: .5rem;
   display: block;
 }
 
 .new-room-view > .context > .context-enabled > input {
   -moz-margin-start: 0;
 }
 
 .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;
 }
 
 .new-room-view > .context > .checkbox-wrapper > .checkbox.checked {
   background-image: url("../shared/img/check.svg#check-blue");
 }
 
 .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;
-  margin: 0 auto .5rem;
+  font-size: 1.2rem;
+  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. */
 .new-room-view > .context.hide + .new-room-button {
   border-radius: 3px;
   margin-top: 0.5rem;
 }
 
@@ -272,24 +286,24 @@ body {
   margin-right: -1rem;
 }
 
 .room-list:empty {
   border-bottom-width: 0;
 }
 
 .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);
 }
 
 .room-list > .room-entry.room-active > h2 {
   font-weight: bold;
   color: #000;
@@ -304,21 +318,17 @@ body {
   -moz-margin-end: .3rem;
 }
 
 .room-list > .room-entry.room-active > h2 > .room-notification {
   display: inline-block;
 }
 
 .room-list > .room-entry:hover {
-  background: #f1f1f1;
-}
-
-.room-list > .room-entry:not(:last-child) {
-  border-bottom: 1px solid #ccc;
+  background: #dbf7ff;
 }
 
 .room-list > .room-entry > p {
   margin: 0;
   padding: .2rem 0;
 }
 
 .room-list > .room-entry > p > a {
@@ -419,17 +429,17 @@ body {
 
 .button {
   padding: 2px 5px;
   background-color: #fbfbfb;
   color: #333;
   border: 1px solid #c1c1c1;
   border-radius: 2px;
   min-height: 26px;
-  font-size: 12px;
+  font-size: 1.2rem;
 }
 
 .button > .button-caption {
   vertical-align: middle;
 }
 
 .button:hover {
   background-color: #ebebeb;
@@ -614,17 +624,17 @@ html[dir="rtl"] .generate-url-spinner {
 
 .terms-service {
   padding-left: 1rem;
   padding-right: 1rem;
   padding-bottom: .5rem;
 }
 
 .terms-service > a {
-  color: #00caee;
+  color: #00a9dc;
 }
 
 /* DnD menu */
 
 .dnd-status {
   border: 1px solid transparent;
   padding: 2px 4px;
   margin: 0;
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -769,16 +769,17 @@ loop.panel = (function(_, mozL10n) {
       try {
         hostname = new URL(this.state.url).hostname;
       } catch (ex) {
         // Empty catch - if there's an error, then we won't show the context.
       }
 
       var contextClasses = React.addons.classSet({
         context: true,
+        "context-checkbox-checked": this.state.checked,
         hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConversations.enabled")
       });
 
       return (
         React.createElement("div", {className: "new-room-view"}, 
           React.createElement("div", {className: contextClasses}, 
             React.createElement(Checkbox, {checked: this.state.checked, 
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -769,16 +769,17 @@ loop.panel = (function(_, mozL10n) {
       try {
         hostname = new URL(this.state.url).hostname;
       } catch (ex) {
         // Empty catch - if there's an error, then we won't show the context.
       }
 
       var contextClasses = React.addons.classSet({
         context: true,
+        "context-checkbox-checked": this.state.checked,
         hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConversations.enabled")
       });
 
       return (
         <div className="new-room-view">
           <div className={contextClasses}>
             <Checkbox checked={this.state.checked}
--- a/browser/components/loop/content/shared/css/common.css
+++ b/browser/components/loop/content/shared/css/common.css
@@ -95,29 +95,29 @@ p {
 
 .btn.btn-constrained {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .btn-info {
-  background-color: #0096dd;
-  border: 1px solid #0095dd;
+  background-color: #00a9dc;
+  border: 1px solid #00a9dc;
   color: #fff;
 }
 
   .btn-info:hover {
-    background-color: #008acb;
-    border: 1px solid #008acb;
+    background-color: #5cccee;
+    border: 1px solid #5cccee;
   }
 
   .btn-info:active {
-    background-color: #006b9d;
-    border: 1px solid #006b9d;
+    background-color: #5cccee;
+    border: 1px solid #5cccee;
   }
 
 .btn-accept,
 .btn-success,
 .btn-accept + .btn-chevron {
   background-color: #5bc0a4;
   border: 1px solid #5bc0a4;
 }
@@ -463,18 +463,18 @@ html[dir="rtl"] .dropdown-menu {
 
 .checkbox-wrapper {
   -moz-user-select: none;
   user-select: none;
 }
 
 .checkbox {
   float: left;
-  width: 1em;
-  height: 1em;
+  width: 2rem;
+  height: 2rem;
   -moz-margin-end: .5em;
   margin-top: .1em;
   border: 1px solid #999;
   border-radius: 3px;
   cursor: pointer;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
@@ -516,25 +516,29 @@ html[dir="rtl"] .context-content {
 .context-content > p {
   font-weight: bold;
   margin-bottom: .8em;
   margin-top: 0;
 }
 
 .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. */
   display: flex;
   flex-flow: row nowrap;
   line-height: 1.1em;
 }
 
+.context-wrapper:hover {
+  background-color: #dbf7ff;
+}
+
 .context-wrapper > .context-preview {
   float: left;
   /* 16px is standard height/width for a favicon */
   width: 16px;
   max-height: 16px;
   margin-right: .8em;
   flex: 0 0 auto;
 }
@@ -551,12 +555,12 @@ html[dir="rtl"] .context-wrapper > .cont
   color: black;
   /* 16px for the preview, plus its .8em margin */
   max-width: calc(100% - 16px - .8em);
   word-wrap: break-word;
 }
 
 .context-wrapper > .context-description > .context-url {
   display: block;
-  color: #59A1D7;
+  color: #00a9dc;
   font-weight: 700;
   clear: both;
 }