Compass-314: First style pass for read-only banner

src/internal-packages/explain/lib/components/compass-explain.jsx

@@ -60,7 +60,13 @@ class CompassExplain extends React.Component {
   renderReadonly() {
     return (
       <div className="compass-explain-notice">
-        Explain plans on readonly views are not supported.
+        <div className="compass-explain-pill">
+        <i className="fa fa-lock" aria-hidden="true" />
+          Read-Only
+        </div>
+        <p className="compass-explain-message">
+          Explain plans on read-only views are not supported.
+        </p> 
       </div>
     );
   }

src/internal-packages/explain/styles/compass-explain.less

@@ -3,11 +3,22 @@
   &-notice {
     color: steelblue;
     background-color: #b0e0e6;
-    border-radius: 5px;
-    padding: 15px;
+    padding: 0 15px 0 15px;
     margin-bottom: 10px;
   }
 
+  &-pill {
+    float: left;
+    margin: 13px 10px 13px 0;
+    border: 1px solid steelblue;
+    border-radius: 12px;
+    padding: 1px 9px;
+  }
+
+  &-message {
+    padding: 15px 0 15px;
+  }
+
   // hacks for json view on explain tab
   ol.document-list li.document-list-item ol.document-property-body li.document-property.array ol.document-property-body .document-property-key,
   ol.document-list li.document-list-item ol.document-property-body li.document-property.object ol.document-property-body .document-property-key {
@@ -30,3 +41,8 @@
   }
   // end hacks
 }
+
+.fa.fa-lock {
+  font-size: 12px;
+  margin-right: 5px;
+}

src/internal-packages/indexes/lib/component/indexes.jsx

@@ -68,7 +68,13 @@ class Indexes extends React.Component {
   renderReadonly() {
     return (
       <div className="index-container-notice">
-        Readonly views may not contain indexes.
+        <div className="index-container-pill">
+        <i className="fa fa-lock" aria-hidden="true" />
+          Read-Only
+        </div>
+        <p className="index-container-message">
+          Read-only views may not contain indexes.
+        </p> 
       </div>
     );
   }

src/internal-packages/indexes/styles/index.less

@@ -23,11 +23,22 @@
   &-notice {
     color: steelblue;
     background-color: #b0e0e6;
-    border-radius: 5px;
-    padding: 15px;
+    padding: 0 15px 0 15px;
     margin-bottom: 10px;
   }
 
+  &-pill {
+    float: left;
+    margin: 13px 10px 13px 0;
+    border: 1px solid steelblue;
+    border-radius: 12px;
+    padding: 1px 9px;
+  }
+
+  &-message {
+    padding: 15px 0 15px;
+  }
+
   .column-container {
     .column.main {
       &::-webkit-scrollbar {

src/internal-packages/sidebar/lib/components/sidebar-collection.jsx

@@ -26,7 +26,7 @@ class SidebarCollection extends React.Component {
   renderReadonly() {
     if (this.props.readonly) {
       return (
-        <i className="fa fa-eye" aria-hidden="true" />
+        <i className="fa fa-lock" aria-hidden="true" />
       );
     }
   }

src/internal-packages/validation/lib/components/validation.jsx

@@ -86,7 +86,13 @@ class Validation extends React.Component {
   renderReadonly() {
     return (
       <div className="validation-notice">
-        Document validation rules may not be added to readonly views.
+        <div className="validation-pill">
+        <i className="fa fa-lock" aria-hidden="true" />
+          Read-Only
+        </div>
+        <p className="validation-message">
+          Document validation rules may not be added to read-only views.
+        </p> 
       </div>
     );
   }

src/internal-packages/validation/styles/validation.less

@@ -3,11 +3,22 @@
   &-notice {
     color: steelblue;
     background-color: #b0e0e6;
-    border-radius: 5px;
-    padding: 15px;
+    padding: 0 15px 0 15px;
     margin-bottom: 10px;
   }
 
+  &-pill {
+    float: left;
+    margin: 13px 10px 13px 0;
+    border: 1px solid steelblue;
+    border-radius: 12px;
+    padding: 1px 9px;
+  }
+
+  &-message {
+    padding: 15px 0 15px;
+  }
+
   &-rule-builder-wrapper {
     // TODO work-around so that the dropdowns can be shown, otherwise they get cut off.
     padding-bottom: 150px;