diff --git a/browser/components/loop/content/css/panel.css b/browser/components/loop/content/css/panel.css
index e2b62fb1102a..4af9af62f190 100644
--- a/browser/components/loop/content/css/panel.css
+++ b/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;
diff --git a/browser/components/loop/content/shared/css/common.css b/browser/components/loop/content/shared/css/common.css
index 131d7bd79339..80876942ac05 100644
--- a/browser/components/loop/content/shared/css/common.css
+++ b/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;
}
diff --git a/browser/components/loop/content/shared/css/conversation.css b/browser/components/loop/content/shared/css/conversation.css
index 624a66626371..408b5735dc6c 100644
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/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;
}
diff --git a/browser/components/loop/ui/ui-showcase.js b/browser/components/loop/ui/ui-showcase.js
index e171b8e92d4e..e8d0389e8d49 100644
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/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,
diff --git a/browser/components/loop/ui/ui-showcase.jsx b/browser/components/loop/ui/ui-showcase.jsx
index b72d592a93e2..a4e63acbfee5 100644
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/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 @@
+
+
+
+
+
+