diff --git a/app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx b/app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx
index 116ddb077..3584b3218 100644
--- a/app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx
+++ b/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}
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 4fbc06603..4b3f2bb85 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/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">
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index b6ef31b03..793f2d27d 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/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>
diff --git a/app/assets/stylesheets/_theme.scss b/app/assets/stylesheets/_theme.scss
index a34a79f84..c13bc770e 100644
--- a/app/assets/stylesheets/_theme.scss
+++ b/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);
 }
diff --git a/app/assets/stylesheets/utils/_color.scss b/app/assets/stylesheets/utils/_color.scss
index 221b83a8a..049365e05 100644
--- a/app/assets/stylesheets/utils/_color.scss
+++ b/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);
 }