Bug 1190738 - Merging Loop CSS for checkboxes, r=dmose

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

@@ -365,26 +365,6 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   -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: #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-size: 1.1rem;
-}
-
 .new-room-view > .btn {
   flex: 1;
   height: 3rem;

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

@@ -484,6 +484,10 @@ html[dir="rtl"] .dropdown-menu {
 /* Custom checkbox */
 
 .checkbox-wrapper {
+  height: 2rem;
+  margin-bottom: .5rem;
+  width: 100%;
+  line-height: 2.2rem;
   -moz-user-select: none;
   user-select: none;
 }
@@ -492,15 +496,15 @@ html[dir="rtl"] .dropdown-menu {
   float: left;
   width: 2rem;
   height: 2rem;
-  -moz-margin-end: .5em;
-  margin-top: .1em;
+  -moz-margin-end: .5rem;
+  margin-top: .1rem;
   border: 1px solid #999;
-  border-radius: 3px;
+  border-radius: .3rem;
   cursor: pointer;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
-  background-size: 1em 1em;
+  background-size: 2rem;
 }
 
 html[dir="rtl"] .checkbox {
@@ -531,6 +535,10 @@ html[dir="rtl"] .checkbox {
   text-align: left;
 }
 
+.checkbox-wrapper > checkbox-label {
+  font-size: 1.1rem;
+}
+
 html[dir="rtl"] .checkbox-label.ellipsis {
   text-align: right;
 }

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

@@ -1024,17 +1024,21 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
   text-shadow: 1px 1px 0 rgba(0,0,0,.3);
 }
 
-.room-context > .checkbox-wrapper {
-  margin-bottom: .5em;
-  width: 100%;
+.new-room-view > .context > .checkbox-wrapper .checkbox {
+  border-color: #d8d8d8;
+  background-color: #fff;
+}
+
+.new-room-view > .context > .checkbox-wrapper .checkbox.checked {
+  background-image: url("../img/check.svg#check-blue");
+}
+
+.new-room-view > .context > .checkbox-wrapper > label {
+  color: #333;
 }
 
 .room-context-label {
   margin-bottom: 1em;
-}
-
-.room-context-label,
-.room-context > .checkbox-wrapper > label {
   color: #fff;
 }
 

browser/components/loop/ui/ui-showcase.js

@@ -29,6 +29,7 @@
   var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
   var RoomFailureView = loop.roomViews.RoomFailureView;
   var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
+  var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView;
 
   // 2. Standalone webapp
   var HomeView = loop.webapp.HomeView;
@@ -1390,6 +1391,23 @@
               )
             ), 
 
+            React.createElement(FramedExample, {height: 278.6, 
+                           onContentsRendered: invitationRoomStore.activeRoomStore.forcedUpdate, 
+                           summary: "Desktop room Edit Context w/Error", 
+                           width: 298}, 
+              React.createElement("div", {className: "fx-embedded room-invitation-overlay"}, 
+                React.createElement(DesktopRoomEditContextView, {
+                  dispatcher: dispatcher, 
+                  error: {}, 
+                  mozLoop: navigator.mozLoop, 
+                  onClose: function(){}, 
+                  roomData: {}, 
+                  savingContext: false, 
+                  show: true}
+                   )
+              )
+            ), 
+
             React.createElement(FramedExample, {dashed: true, 
                            height: 394, 
                            onContentsRendered: desktopRoomStoreLoading.activeRoomStore.forcedUpdate, 

browser/components/loop/ui/ui-showcase.jsx

@@ -29,6 +29,7 @@
   var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
   var RoomFailureView = loop.roomViews.RoomFailureView;
   var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
+  var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView;
 
   // 2. Standalone webapp
   var HomeView = loop.webapp.HomeView;
@@ -1390,6 +1391,23 @@
               </div>
             </FramedExample>
 
+            <FramedExample height={278.6}
+                           onContentsRendered={invitationRoomStore.activeRoomStore.forcedUpdate}
+                           summary="Desktop room Edit Context w/Error"
+                           width={298}>
+              <div className="fx-embedded room-invitation-overlay">
+                <DesktopRoomEditContextView
+                  dispatcher={dispatcher}
+                  error={{}}
+                  mozLoop={navigator.mozLoop}
+                  onClose={function(){}}
+                  roomData={{}}
+                  savingContext={false}
+                  show={true}
+                   />
+              </div>
+            </FramedExample>
+
             <FramedExample dashed={true}
                            height={394}
                            onContentsRendered={desktopRoomStoreLoading.activeRoomStore.forcedUpdate}