[pgadmin-hackers][pgaweb][patch] Update SCSS of styleguide

[Joao De Almeida Pereira]

Hi Hackers,
This patch updates the SCSS files of the styleguide to move all the colors
into variables to be easier to use in the application.

Thanks
Joao && Matt

diff --git a/pgaweb/static/css/styleguide/_alert.scss 
b/pgaweb/static/css/styleguide/_alert.scss
index 26680b7..2c85514 100644
--- a/pgaweb/static/css/styleguide/_alert.scss
+++ b/pgaweb/static/css/styleguide/_alert.scss
@@ -65,7 +65,7 @@
   }
 }
 
-.alert {
+.alert, .ajs-message {
   .media {
     .media-body {
       display: inline-block;
diff --git a/pgaweb/static/css/styleguide/_othercolors.scss 
b/pgaweb/static/css/styleguide/_othercolors.scss
index 4f20656..5144217 100644
--- a/pgaweb/static/css/styleguide/_othercolors.scss
+++ b/pgaweb/static/css/styleguide/_othercolors.scss
@@ -1,12 +1,18 @@
+$color-blue-1: #e7f2ff;
 $color-blue-2: #84acdd;
 $color-red-1: #f2dede;
 $color-red-2: #de8585;
 $color-red-3: #d0021b;
+$color-green-1: #dff0d7;
 $color-green-2: #a2c189;
 $color-green-3: #3a773a;
 
+.bg-white-1 {
+  background-color: #ffffff;
+}
+
 .bg-blue-1 {
-  background-color: #e7f2ff;
+  background-color: $color-blue-1;
 }
 
 .bg-blue-2 {
@@ -26,11 +32,11 @@ $color-green-3: #3a773a;
 }
 
 .bg-green-1 {
-  background-color: #dff0d7;
+  background-color: $color-green-1;
 }
 
 .bg-green-2 {
-  background-color: #a2c189;
+  background-color: $color-green-2;
 }
 
 .bg-green-3 {
@@ -38,7 +44,7 @@ $color-green-3: #3a773a;
 }
 
 .border-blue-1 {
-  border-color: #e7f2ff;
+  border-color: $color-blue-1;
 }
 
 .border-blue-2 {
@@ -58,11 +64,11 @@ $color-green-3: #3a773a;
 }
 
 .border-green-1 {
-  border-color: #dff0d7;
+  border-color: $color-green-1;
 }
 
 .border-green-2 {
-  border-color: #a2c189;
+  border-color: $color-green-2;
 }
 
 .border-green-3 {
diff --git a/pgaweb/static/css/styleguide/_typography.scss 
b/pgaweb/static/css/styleguide/_typography.scss
index b63f6ae..1b01abc 100644
--- a/pgaweb/static/css/styleguide/_typography.scss
+++ b/pgaweb/static/css/styleguide/_typography.scss
@@ -1,23 +1,25 @@
+$font-family-1: "Helvetica Neue", Arial, sans-serif;
+
 .text-bold {
   font-weight: bold;
 }
 
 .text-14 {
-  font-family: "Helvetica Neue";
+  font-family: $font-family-1;
   font-size: 14px;
 }
 
 .text-13 {
-  font-family: "Helvetica Neue";
+  font-family: $font-family-1;
   font-size: 13px;
 }
 
 .text-12 {
-  font-family: "Helvetica Neue";
+  font-family: $font-family-1;
   font-size: 12px;
 }
 
 .text-11 {
-  font-family: "Helvetica Neue";
+  font-family: $font-family-1;
   font-size: 11px;
 }