fix: dimmed banner colors (#1043)

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

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}

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