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

This reverts commit 15f6b1ce13.
This commit is contained in:
Mo
2022-05-20 11:41:21 -05:00
parent 09af8bf6d8
commit a90ca4d2f6
3 changed files with 10 additions and 12 deletions

View File

@@ -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>

View File

@@ -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.

View File

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