fix: dimmed banner colors (#1043)

app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx

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

app/assets/javascripts/Components/NoteView/NoteView.tsx

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

app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx

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

app/assets/stylesheets/_theme.scss

@@ -41,6 +41,4 @@
 
   --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);
 }

app/assets/stylesheets/utils/_color.scss

@@ -1,3 +1,14 @@
+@mixin DimmedBackground($color, $opacity) {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: $color;
+  opacity: $opacity;
+}
+
 .bg-grey-super-light {
   background-color: var(--sn-stylekit-grey-super-light);
 }
@@ -38,12 +49,12 @@
   background-color: var(--sn-stylekit-grey-5);
 }
 
-.bg-warning-faded {
-  background-color: rgba(235, 173, 0, 0.08);
+.bg-warning-faded::after {
+  @include DimmedBackground(var(--sn-stylekit-warning-color), 0.08);
 }
 
-.bg-info-faded {
-  background-color: rgba(8, 109, 214, 0.08);
+.bg-info-faded::after {
+  @include DimmedBackground(var(--sn-stylekit-info-color), 0.08);
 }
 
 .color-inverted-default {
@@ -70,10 +81,6 @@
   color: var(--sn-stylekit-neutral-contrast-color);
 }
 
-.color-warning-contrast {
-  color: var(--warning-text-color);
-}
-
 .color-danger-contrast {
   color: var(--sn-stylekit-danger-contrast-color);
 }