From 15f6b1ce13fe61994746ed028343c9debbe14a00 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 19 May 2022 07:21:01 -0500
Subject: [PATCH] Revert "feat: updated "note editing disabled" design (#1033)"

This reverts commit cb6a81afd670e4f9d44e7f8727ea0eea602f7243.
---
 .../Components/NoteView/NoteView.tsx           | 18 ++++++++++--------
 .../Components/NotesOptions/NotesOptions.tsx   |  2 +-
 app/assets/stylesheets/_sn.scss                |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index b77f5fe3f..1086e78b0 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -919,7 +919,7 @@ export class NoteView extends PureComponent<Props, State> {
           <div className="sn-component">
             {this.state.noteLocked && (
               <div
-                className="flex items-center px-3.5 py-2 bg-warning cursor-pointer"
+                className="sk-app-bar no-edges"
                 onMouseLeave={() => {
                   this.setState({
                     lockText: 'Note Editing Disabled',
@@ -932,14 +932,16 @@ export class NoteView extends PureComponent<Props, State> {
                     showLockedIcon: false,
                   })
                 }}
-                onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
               >
-                {this.state.showLockedIcon ? (
-                  <Icon type="pencil-off" className="color-accessory-tint-3 flex fill-current mr-3" />
-                ) : (
-                  <Icon type="pencil" className="color-accessory-tint-3 flex fill-current mr-3" />
-                )}
-                <span className="color-grey-0">{this.state.lockText}</span>
+                <div
+                  onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
+                  className="sk-app-bar-item"
+                >
+                  <div className="sk-label warning flex items-center">
+                    {this.state.showLockedIcon && <Icon type="pencil-off" className="flex fill-current mr-2" />}
+                    {this.state.lockText}
+                  </div>
+                </div>
               </div>
             )}
           </div>
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 8cd1af663..5b1dfcbe7 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -167,7 +167,7 @@ const NoteSizeWarning: FunctionComponent<{
   note: SNNote
 }> = ({ note }) => {
   return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
-    <div className="flex items-center px-3 py-3.5 relative bg-warning">
+    <div className="flex items-center px-3 py-3.5 relative bg-note-size-warning">
       <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
       <div className="color-grey-0 select-none leading-140% max-w-80%">
         This note may have trouble syncing to the mobile application due to its size.
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 286a75b4d..bc3018db1 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1017,7 +1017,7 @@
   box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
 }
 
-.bg-warning {
+.bg-note-size-warning {
   background-color: rgba(235, 173, 0, 0.08);
 }