feat: updated "note editing disabled" design (#1033)

standardnotes · May 19, 2022 · cb6a81a · cb6a81a
1 parent 9524a83
commit cb6a81a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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);
 }