From cb6a81afd670e4f9d44e7f8727ea0eea602f7243 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 19 May 2022 17:49:13 +0530
Subject: [PATCH] feat: updated "note editing disabled" design (#1033)

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

diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 1086e78b0..b77f5fe3f 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="sk-app-bar no-edges"
+                className="flex items-center px-3.5 py-2 bg-warning cursor-pointer"
                 onMouseLeave={() => {
                   this.setState({
                     lockText: 'Note Editing Disabled',
@@ -932,16 +932,14 @@ export class NoteView extends PureComponent<Props, State> {
                     showLockedIcon: false,
                   })
                 }}
+                onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
               >
-                <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>
+                {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>
             )}
           </div>
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 5b1dfcbe7..8cd1af663 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-note-size-warning">
+    <div className="flex items-center px-3 py-3.5 relative bg-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 bc3018db1..286a75b4d 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-note-size-warning {
+.bg-warning {
   background-color: rgba(235, 173, 0, 0.08);
 }