Update dialogue error styling to match alerts

web/pgadmin/browser/templates/browser/js/node.js

@@ -260,9 +260,17 @@ define([
           }
 
           var onSessionInvalid = function(msg) {
-
+            var alertMessage = '\
+              <div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">\
+                <div class="media-body media-middle">\
+                  <div class="alert-icon error-icon">\
+                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
+                  </div>\
+                    <div class="alert-text">' + msg + '</div>\
+                </div>\
+              </div>';
             if(!_.isUndefined(that.statusBar)) {
-              that.statusBar.html(msg).css("visibility", "visible");
+              that.statusBar.html(alertMessage).css("visibility", "visible");
             }
             callback(true);
 

web/pgadmin/dashboard/static/css/dashboard.css

@@ -82,3 +82,9 @@
     padding-top: 20px;
     padding-bottom: 40px;
 }
+
+.icon-postgres:before {
+    height: 43px;
+    margin-top: 13px;
+    display: block;
+}

web/pgadmin/static/css/bootstrap.overrides.css

@@ -505,8 +505,12 @@ fieldset[disabled] .form-control {
     border-radius: 3px;
 }
 
-.highlight.has-error {
+.fa-edit:before, .fa-pencil-square-o:before, .fa-pencil-square:before {
-    border-color: #A94442;
+  padding: 0 5px 0 7px;
+}
+
+.fa-edit:before, .fa-trash:before {
+    padding: 0 8px;
 }
 
 .icon-fa::before {
@@ -711,23 +715,6 @@ td.switch-cell > div.bootstrap-switch {
 .width_percent_99 { width: 99%; }
 .width_percent_100 { width: 100%; }
 
-.pg-prop-status-bar {
-    left: 0px;
-    right: 0px;
-    background-color: #8E1A17;
-    color: white;
-    padding: 5px;
-    opacity: 0.8;
-}
-
-.pg-prop-status-bar:empty {
-  display: none;
-}
-
-.pg-prop-status-bar:hover {
-  opacity: 1;
-}
-
 .pg-prop-header {
     position: absolute;
     left: 0px;

web/pgadmin/static/scss/_alert.scss

@@ -95,10 +95,14 @@ category: alerts
 }
 
 .alert-box {
-  padding: 15px;
+  padding: 0px;
   display: inline-block;
 }
 
+.alert.alert-info {
+  padding: 15px;
+}
+
 .alert-icon {
   display: inline-block;
   color: white;
@@ -121,13 +125,100 @@ category: alerts
   padding: 0 12px 0 10px;
 }
 
+.alert-row {
+  display: block;
+}
+
+.alert-box {
+  padding: 0px;
+  display: inline-block;
+}
+
+.alert-icon {
+  display: inline-block;
+  color: white;
+  padding: 15px;
+  width: 50px;
+  height: 50px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.success-icon {
+  background: #3a773a;
+}
+
+.error-icon {
+  background: #d0021b;
+}
+
+.alert-text {
+  display: inline-block;
+  padding: 0 12px 0 10px;
+}
+
 .alert-info {
   border-color: #84acdd
 }
 
 .media-body {
-  display: table-row;
   vertical-align: top;
+  width: initial;
 }
 
+.ajs-message {
+  .media {
+    display: block;
+  }
+}
 
+.pg-prop-status-bar {
+  padding: 5px;
+
+  .media-body {
+    display: flex;
+  }
+
+  .alert-icon {
+    padding: 8px;
+    width: 35px;
+    height: 35px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  .alert-text {
+    flex-grow: 1;
+    border: 1px solid $color-red-2;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 7px 12px 5px 10px;
+    border-left: 0px;
+  }
+
+  .error-in-footer {
+    border-radius: 4px;
+
+    .alert-text {
+      border-color: $color-red-2;
+    }
+  }
+
+  .success-in-footer {
+    border-radius: 4px;
+
+    .alert-text {
+      border-color: $color-green-2;
+    }
+  }
+
+  .info-in-footer {
+    border: 1px solid $primary-blue;
+    border-radius: 4px;
+    height: 35px;
+
+    .alert-text {
+      border: 0px;
+    }
+  }
+}

web/pgadmin/static/scss/_backform.overrides.scss

@@ -0,0 +1,21 @@
+.has-error {
+  .pgadmin-controls > .form-control {
+    border-color: #d0021b;
+    position: relative;
+  }
+
+  .control-label {
+    color: #d0021b;
+  }
+
+  .pgadmin-controls:before {
+    font: normal normal normal 16px/1 FontAwesome;
+    content: "\f071";
+    text-decoration: inherit;
+    position: absolute;
+    color: #d0021b;
+    right: 15px;
+    padding-top: 10px;
+    z-index: 1;
+  }
+}

web/pgadmin/static/scss/_othercolors.scss

@@ -79,6 +79,11 @@ These colors should be used to highlight hover options in dropdown menus and cat
   width: 100%;
 }
 
+$color-red-1: #f2dede;
+$color-red-2: #de8585;
+$color-red-3: #d0021b;
+$color-green-2: #a2c189;
+
 .bg-white-1 {
   background-color: #ffffff;
 }
@@ -92,15 +97,15 @@ These colors should be used to highlight hover options in dropdown menus and cat
 }
 
 .bg-red-1 {
-  background-color: #f2dede;
+  background-color: $color-red-1;
 }
 
 .bg-red-2 {
-  background-color: #de8585;
+  background-color: $color-red-2;
 }
 
 .bg-red-3 {
-  background-color: #d0021b;
+  background-color: $color-red-3;
 }
 
 .bg-green-1 {
@@ -124,15 +129,15 @@ These colors should be used to highlight hover options in dropdown menus and cat
 }
 
 .border-red-1 {
-  border-color: #f2dede;
+  border-color: $color-red-1;
 }
 
 .border-red-2 {
-  border-color: #de8585;
+  border-color: $color-red-2;
 }
 
 .border-red-3 {
-  border-color: #d0021b;
+  border-color: $color-red-3;
 }
 
 .border-green-1 {
@@ -148,7 +153,7 @@ These colors should be used to highlight hover options in dropdown menus and cat
 }
 
 .font-red-3 {
-  color: #d0021b;
+  color: $color-red-3;
 }
 
 .font-green-3 {

web/pgadmin/static/scss/pgadmin.scss

@@ -1,6 +1,5 @@
-$enable-flex: false;
+$enable-flex: true;
 
-@import 'alert';
 @import 'primaryblue';
 @import 'colorsgrey';
 @import 'othercolors';
@@ -8,5 +7,7 @@ $enable-flex: false;
 
 @import 'utils';
 
+@import 'alert';
 @import 'alertify.overrides';
 @import 'sqleditor/history';
+@import 'backform.overrides';