From a7e4396ff1dde0ba4cada384b922fb1dffe9d441 Mon Sep 17 00:00:00 2001
From: Sean Oh <sean.oh.1994@gmail.com>
Date: Mon, 21 Nov 2016 17:13:11 -0500
Subject: [PATCH] First style pass. Changed eye icon to lock, added "read-only"
 pill, removed rounded borders of banner

---
 .../lib/components/compass-explain.jsx        |  8 +++++++-
 .../explain/styles/compass-explain.less       | 20 +++++++++++++++++--
 .../indexes/lib/component/indexes.jsx         |  8 +++++++-
 .../indexes/styles/index.less                 | 15 ++++++++++++--
 .../lib/components/sidebar-collection.jsx     |  2 +-
 .../validation/lib/components/validation.jsx  |  8 +++++++-
 .../validation/styles/validation.less         | 15 ++++++++++++--
 7 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index 6de1246558d..a806b2d5bc6 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/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>
     );
   }
diff --git a/src/internal-packages/explain/styles/compass-explain.less b/src/internal-packages/explain/styles/compass-explain.less
index 61fc0352d18..9dd78968438 100644
--- a/src/internal-packages/explain/styles/compass-explain.less
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index e41bb1a1a1a..a113739e381 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/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>
     );
   }
diff --git a/src/internal-packages/indexes/styles/index.less b/src/internal-packages/indexes/styles/index.less
index f6ad45adf6b..66d5c49bc9e 100644
--- a/src/internal-packages/indexes/styles/index.less
+++ b/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 {
diff --git a/src/internal-packages/sidebar/lib/components/sidebar-collection.jsx b/src/internal-packages/sidebar/lib/components/sidebar-collection.jsx
index 595eb1cfe2a..51ad342553c 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar-collection.jsx
+++ b/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" />
       );
     }
   }
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index 3745f1158b7..8f0e0f837ed 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/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>
     );
   }
diff --git a/src/internal-packages/validation/styles/validation.less b/src/internal-packages/validation/styles/validation.less
index 28d99918823..1b66405af07 100644
--- a/src/internal-packages/validation/styles/validation.less
+++ b/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;