From e2482d2294434d0ece4e4787a58add9f8f343441 Mon Sep 17 00:00:00 2001
From: Murtuza Zabuawala <murtuza.zabuawala@enterprisedb.com>
Date: Mon, 18 Feb 2019 16:59:39 +0000
Subject: [PATCH] Set the background colour for backform notes, and add an
 icon. Fixes #3948

---
 web/pgadmin/static/js/backform.pgadmin.js     | 19 ++++++++++++++-----
 .../static/scss/_backform.overrides.scss      | 17 ++++++-----------
 web/pgadmin/tools/backup/static/js/backup.js  |  4 ++--
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index d180bcbd4..c18c27bf2 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: [],
-      noteClass: 'backform_control_notes',
+      extraClasses: ['pg-el-12', 'd-flex'],
+      noteClass: 'backform-note',
+      faIcon: 'fa-file-text-o',
+      faExtraClass: 'fa-rotate-180 fa-flip-vertical',
+      iconWidthClass: 'col-0 pr-2',
+      textWidthClass: 'col-sm',
     },
     template: _.template([
-      '<div class="<%=noteClass%> pg-el-12 <%=extraClasses.join(\' \')%>">',
-      '<label class="control-label"><%=label%>:</label>',
-      '<span><%=text%></span></div>',
+      '<div class="<%=noteClass%> <%=extraClasses.join(\' \')%>">',
+      '  <div class="icon <%=iconWidthClass%>">',
+      '    <i class="fa <%=faIcon%> <%=faExtraClass%>" aria-hidden="true"></i>',
+      '  </div>',
+      '  <div class="<%=textWidthClass%>">',
+      '    <span><%=text%></span>',
+      '  </div>',
+      '</div>',
     ].join('\n')),
   });
 
diff --git a/web/pgadmin/static/scss/_backform.overrides.scss b/web/pgadmin/static/scss/_backform.overrides.scss
index 0a413e379..32c034317 100644
--- a/web/pgadmin/static/scss/_backform.overrides.scss
+++ b/web/pgadmin/static/scss/_backform.overrides.scss
@@ -47,17 +47,12 @@
 	}
 }
 
-.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;
+.backform-note {
+  border-radius: $border-radius;
+  padding: .25rem;
+  word-wrap: break-word;
+  background: $border-color;
+  color: $color-fg;
 }
 
 .subnode-header label {
diff --git a/web/pgadmin/tools/backup/static/js/backup.js b/web/pgadmin/tools/backup/static/js/backup.js
index 82bf9b99a..f7a903345 100644
--- a/web/pgadmin/tools/backup/static/js/backup.js
+++ b/web/pgadmin/tools/backup/static/js/backup.js
@@ -93,7 +93,7 @@ define([
     }, {
       id: 'globals_note',
       label: gettext('Note'),
-      text: gettext('Only objects global to the entire database will be backed up in PLAIN format'),
+      text: gettext('Only objects global to the entire database will be backed up, in PLAIN format'),
       type: 'note',
     }, {}],
     validate: function() {
@@ -229,7 +229,7 @@ define([
       type: 'note',
       visible: function(m) {
         return m.get('type') === 'server';
-      },
+      },Only objects global to the entire database will be backed up in PLAIN format
     }, {
       type: 'nested',
       control: 'fieldset',