diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index d180bcbd..c2065a67 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -2380,13 +2380,22 @@ define([
defaults: {
label: gettext('Note'),
text: '',
- extraClasses: [],
+ extraClasses: ['pg-el-12', 'd-flex'],
noteClass: 'backform_control_notes',
+ faIcon: 'fa-file-text-o',
+ faExtraClass: 'fa-rotate-180 fa-flip-vertical',
+ iconWidthClass: 'col-0 pr-2',
+ textWidthClass: 'col-12',
},
template: _.template([
- '
',
+ '',
].join('\n')),
});
diff --git a/web/pgadmin/static/scss/_backform.overrides.scss b/web/pgadmin/static/scss/_backform.overrides.scss
index 0a413e37..4d4fe376 100644
--- a/web/pgadmin/static/scss/_backform.overrides.scss
+++ b/web/pgadmin/static/scss/_backform.overrides.scss
@@ -50,14 +50,10 @@
.backform_control_notes {
border: $panel-border;
border-radius: $border-radius;
- font-family: $font-family-editor;
- font-size: 0.8rem;
margin: 0 0 10px;
- padding: 5px 10px;
- word-wrap: break-word;
-}
-div.backform_control_notes label.control-label {
- min-width: 0px;
+ padding: 5px 10px;
+ word-wrap: break-word;
+ background: $yellow;
}
.subnode-header label {
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index b25610bd..fc163a6b 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -3,6 +3,7 @@ $enable-flex: true !default;
$white: #fff;
$black: #000;
+$yellow: #fff9c4;
$color-bg: $white !default;
$color-fg: #222222 !default;