Distinguish between locked and protected notes

app/assets/stylesheets/app/_ionicons.scss

@@ -17,7 +17,10 @@
 .ion-bookmark:before,
 .ion-locked:before,
 .ion-arrow-return-left:before,
-.ion-arrow-return-right:before
+.ion-arrow-return-right:before,
+.ion-key:before,
+.ion-lock-combination:before,
+.ion-eye-disabled:before
 {
   display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 }
@@ -32,4 +35,10 @@
 
 .ion-arrow-return-right:before { content: "\f266"; }
 
+.ion-key:before { content: "\f296"; }
+
+.ion-lock-combination:before { content: "\f4d4"; }
+
+.ion-eye-disabled:before { content: "\f306"; }
+
 /*# sourceMappingURL=ionicons.css.map */

app/assets/stylesheets/app/_notes.scss

@@ -153,13 +153,16 @@
       opacity: 0.6;
     }
 
+    .note-flag {
+      color: var(--sn-stylekit-info-color);
+    }
+
     .note-flags {
       display: flex;
       flex-direction: row;
       align-items: center;
 
-      .pinned, .archived {
-        color: var(--sn-stylekit-info-color);
+      .note-flag {
         margin-right: 10px;
       }
     }
@@ -181,7 +184,7 @@
       background-color: var(--sn-stylekit-info-color);
       color: var(--sn-stylekit-info-contrast-color);
 
-      .pinned, .archived {
+      .note-flag {
         color: var(--sn-stylekit-info-contrast-color);
       }