fix: updated "editing disabled" banner (#1037)

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>
+  )
+}

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
+              <EditingDisabledBanner
-                className="flex items-center px-3.5 py-2 bg-warning cursor-pointer"
                 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)}
-              >
+                showLockedIcon={this.state.showLockedIcon}
-                {this.state.showLockedIcon ? (
+                lockText={this.state.lockText}
-                  <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>
 

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>

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;
 }

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);
-}
+
+  --warning-text-color: rgb(117, 86, 0);
+}