From 079140eb924aef83f1c8ec7dd7468009fa7ccad3 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 23 May 2022 19:41:19 +0530
Subject: [PATCH] fix: updated "editing disabled" banner (#1037)

---
 .../NoteView/EditingDisabledBanner.tsx        | 38 +++++++++++++++++++
 .../Components/NoteView/NoteView.tsx          | 16 +++-----
 .../Components/NotesOptions/NotesOptions.tsx  |  4 +-
 app/assets/stylesheets/_sn.scss               | 10 ++++-
 app/assets/stylesheets/_theme.scss            |  4 +-
 5 files changed, 57 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx

diff --git a/app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx b/app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx
new file mode 100644
index 000000000..116ddb077
--- /dev/null
+++ b/app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx
@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'preact'
+import { Icon } from '../Icon/Icon'
+
+type Props = {
+  onMouseLeave: () => void
+  onMouseOver: () => void
+  onClick: () => void
+  showLockedIcon: boolean
+  lockText: string
+}
+
+export const EditingDisabledBanner: FunctionComponent<Props> = ({
+  onMouseLeave,
+  onMouseOver,
+  onClick,
+  showLockedIcon,
+  lockText,
+}) => {
+  const background = showLockedIcon ? 'bg-warning-faded' : 'bg-info-faded'
+  const iconColor = showLockedIcon ? 'color-accessory-tint-3' : 'color-accessory-tint-1'
+  const textColor = showLockedIcon ? 'color-warning-contrast' : 'color-accessory-tint-1'
+
+  return (
+    <div
+      className={`flex items-center px-3.5 py-2 ${background} cursor-pointer`}
+      onMouseLeave={onMouseLeave}
+      onMouseOver={onMouseOver}
+      onClick={onClick}
+    >
+      {showLockedIcon ? (
+        <Icon type="pencil-off" className={`${iconColor} flex fill-current mr-3`} />
+      ) : (
+        <Icon type="pencil" className={`${iconColor} flex fill-current mr-3`} />
+      )}
+      <span className={textColor}>{lockText}</span>
+    </div>
+  )
+}
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 2d19e8fa3..4fbc06603 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -21,7 +21,6 @@ import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, String
 import { confirmDialog } from '@/Services/AlertService'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { ProtectedNoteOverlay } from '@/Components/ProtectedNoteOverlay/ProtectedNoteOverlay'
-import { Icon } from '@/Components/Icon/Icon'
 import { PinNoteButton } from '@/Components/PinNoteButton/PinNoteButton'
 import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
 import { NoteTagsContainer } from '@/Components/NoteTags/NoteTagsContainer'
@@ -30,6 +29,7 @@ import { PanelSide, PanelResizer, PanelResizeType } from '@/Components/PanelResi
 import { ElementIds } from '@/ElementIDs'
 import { ChangeEditorButton } from '@/Components/ChangeEditor/ChangeEditorButton'
 import { AttachedFilesButton } from '@/Components/AttachedFilesPopover/AttachedFilesButton'
+import { EditingDisabledBanner } from './EditingDisabledBanner'
 import {
   transactionForAssociateComponentWithCurrentNote,
   transactionForDisassociateComponentWithCurrentNote,
@@ -887,8 +887,7 @@ export class NoteView extends PureComponent<Props, State> {
         <div className="flex-grow flex flex-col">
           <div className="sn-component">
             {this.state.noteLocked && (
-              <div
-                className="flex items-center px-3.5 py-2 bg-warning cursor-pointer"
+              <EditingDisabledBanner
                 onMouseLeave={() => {
                   this.setState({
                     lockText: NOTE_EDITING_DISABLED_TEXT,
@@ -902,14 +901,9 @@ export class NoteView extends PureComponent<Props, State> {
                   })
                 }}
                 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>
+                showLockedIcon={this.state.showLockedIcon}
+                lockText={this.state.lockText}
+              />
             )}
           </div>
 
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 3c8f2b006..b5e88571c 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -167,9 +167,9 @@ 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-warning-faded">
       <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%">
+      <div className="color-warning-contrast select-none leading-140% max-w-80%">
         This note may have trouble syncing to the mobile application due to its size.
       </div>
     </div>
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 82869248a..6e9fce5ff 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1049,10 +1049,18 @@
   box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
 }
 
-.bg-warning {
+.bg-warning-faded {
   background-color: rgba(235, 173, 0, 0.08);
 }
 
+.color-warning-contrast {
+  color: var(--warning-text-color);
+}
+
+.bg-info-faded {
+  background-color: rgba(8, 109, 214, 0.08);
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
diff --git a/app/assets/stylesheets/_theme.scss b/app/assets/stylesheets/_theme.scss
index 24ad1999f..87b1056f9 100644
--- a/app/assets/stylesheets/_theme.scss
+++ b/app/assets/stylesheets/_theme.scss
@@ -41,4 +41,6 @@
 
   --panel-resizer-background-color: var(--sn-stylekit-secondary-contrast-background-color);
   --link-element-color: var(--sn-stylekit-info-color);
-}
\ No newline at end of file
+
+  --warning-text-color: rgb(117, 86, 0);
+}