rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: dimmed banner colors (#1043)

Browse Source
This commit is contained in:
Mo
2022-05-23 17:02:35 -05:00
committed by GitHub
parent 8877c42079
commit 4e621cadde
5 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx
View File

@@ -18,11 +18,11 @@ export const EditingDisabledBanner: FunctionComponent<Props> = ({
}) => {
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'
const textColor = showLockedIcon ? 'color-warning' : 'color-accessory-tint-1'
return (
<div
className={`flex items-center px-3.5 py-2 ${background} cursor-pointer`}
className={`flex items-center relative ${background} px-3.5 py-2 cursor-pointer`}
onMouseLeave={onMouseLeave}
onMouseOver={onMouseOver}
onClick={onClick}

40
app/assets/javascripts/Components/NoteView/NoteView.tsx
View File

@@ -885,27 +885,25 @@ export class NoteView extends PureComponent<Props, State> {
return (
<div aria-label="Note" className="section editor sn-component">
<div className="flex-grow flex flex-col">
<div className="sn-component">
{this.state.noteLocked && (
<EditingDisabledBanner
onMouseLeave={() => {
this.setState({
lockText: NOTE_EDITING_DISABLED_TEXT,
showLockedIcon: true,
})
}}
onMouseOver={() => {
this.setState({
lockText: 'Enable editing',
showLockedIcon: false,
})
}}
onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
showLockedIcon={this.state.showLockedIcon}
lockText={this.state.lockText}
/>
)}
</div>
{this.state.noteLocked && (
<EditingDisabledBanner
onMouseLeave={() => {
this.setState({
lockText: NOTE_EDITING_DISABLED_TEXT,
showLockedIcon: true,
})
}}
onMouseOver={() => {
this.setState({
lockText: 'Enable editing',
showLockedIcon: false,
})
}}
onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
showLockedIcon={this.state.showLockedIcon}
lockText={this.state.lockText}
/>
)}
{this.note && (
<div id="editor-title-bar" className="section-title-bar w-full">

2
app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
View File

@@ -169,7 +169,7 @@ const NoteSizeWarning: FunctionComponent<{
return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
<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-warning-contrast select-none leading-140% max-w-80%">
<div className="color-warning select-none leading-140% max-w-80%">
This note may have trouble syncing to the mobile application due to its size.
</div>
</div>