From 427ce3972efe8cee57ef0b2c22abdcd12cedc044 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Fri, 17 Aug 2018 09:32:07 +0200
Subject: [PATCH] protected notes detail is now marked with shield background
 instead of just grey background

---
 src/public/images/shield.svg                   | 1 +
 src/public/javascripts/services/note_detail.js | 3 +--
 src/public/stylesheets/style.css               | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 src/public/images/shield.svg

diff --git a/src/public/images/shield.svg b/src/public/images/shield.svg
new file mode 100644
index 000000000..bfdc590da
--- /dev/null
+++ b/src/public/images/shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fafafa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
\ No newline at end of file
diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js
index b6bd2cd2e..bc33bac99 100644
--- a/src/public/javascripts/services/note_detail.js
+++ b/src/public/javascripts/services/note_detail.js
@@ -25,7 +25,6 @@ const $noteDetailComponents = $(".note-detail-component");
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
 const $noteDetailWrapper = $("#note-detail-wrapper");
-const $noteDetailComponentWrapper = $("#note-detail-component-wrapper");
 const $noteIdDisplay = $("#note-id-display");
 const $attributeList = $("#attribute-list");
 const $attributeListInner = $("#attribute-list-inner");
@@ -122,7 +121,7 @@ async function saveNoteIfChanged() {
 function setNoteBackgroundIfProtected(note) {
     const isProtected = !!note.isProtected;
 
-    $noteDetailComponentWrapper.toggleClass("protected", isProtected);
+    $noteDetailWrapper.toggleClass("protected", isProtected);
     $protectButton.toggleClass("active", isProtected);
     $unprotectButton.toggleClass("active", !isProtected);
 }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 894ac8cc1..f04efc61d 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -6,7 +6,7 @@
     grid-template-areas: "header header"
                          "left-pane title"
                          "left-pane note-detail";
-    grid-template-columns: 29% 70%;
+    grid-template-columns: 29% 69.5%;
     grid-template-rows: auto
                         auto
                         1fr;
@@ -52,8 +52,10 @@
     overflow: auto;
 }
 
-#note-detail-component-wrapper.protected, #note-detail-component-wrapper.protected .CodeMirror {
-    background-color: #eee;
+#note-detail-wrapper.protected {
+    background: url('/images/shield.svg') no-repeat;
+    background-size: contain;
+    background-position: center;
 }
 
 #note-detail-text p {
@@ -286,6 +288,7 @@ div.ui-tooltip {
 .CodeMirror {
     font-family: "Liberation Mono", "Lucida Console", monospace;
     height: auto;
+    background: inherit;
 }
 
 .CodeMirror-scroll {