From b7868f6ee82999a2cb3c21d3d2551b566a1c681e Mon Sep 17 00:00:00 2001
From: Sinetheta <k.attfield@gmail.com>
Date: Fri, 18 Dec 2015 15:55:45 -0800
Subject: [PATCH 1/3] Left align text in admin flash notifincations

And refactor into a mixin
---
 .../spree/backend/components/_messages.scss   | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
index 3f084b3f320..38593330e4d 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -30,16 +30,30 @@
   z-index: 1000;
 }
 
+@mixin flash-variant($color) {
+  color: $color;
+  background-color: rgba($color, 0.3);
+}
+
 .flash {
-  padding: 16px;
-  text-align: center;
+  padding: 1em;
   font-size: 120%;
-  color: $color-1;
-  font-weight: $font-weight-bold;
 
-  &.notice  { background-color: rgba($color-notice,  0.8) }
-  &.success { background-color: rgba($color-success, 0.8) }
-  &.error   { background-color: rgba($color-error,   0.8) }
+  &.notice  {
+    @include flash-variant($color-notice);
+  }
+
+  &.success {
+    @include flash-variant($color-success);
+  }
+
+  &.error   {
+    @include flash-variant($color-error);
+  }
+
+  &:before {
+    margin-right: 1em;
+  }
 }
 
 .alert {

From c5fcdd4a3daf592cddf52359af19df5db248aa32 Mon Sep 17 00:00:00 2001
From: Sinetheta <k.attfield@gmail.com>
Date: Fri, 18 Dec 2015 15:56:32 -0800
Subject: [PATCH 2/3] Prepend icon to admin flash notifications

---
 .../stylesheets/spree/backend/components/_messages.scss     | 2 ++
 .../stylesheets/spree/backend/globals/_variables.scss       | 5 +++++
 .../spree/backend/globals/mixins/prepend_icon.scss          | 6 ++++++
 .../app/assets/stylesheets/spree/backend/spree_admin.scss   | 1 +
 4 files changed, 14 insertions(+)
 create mode 100644 backend/app/assets/stylesheets/spree/backend/globals/mixins/prepend_icon.scss

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
index 38593330e4d..6b1e1bdf26f 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -45,10 +45,12 @@
 
   &.success {
     @include flash-variant($color-success);
+    @include prepend-icon($character-check);
   }
 
   &.error   {
     @include flash-variant($color-error);
+    @include prepend-icon($character-exclamation);
   }
 
   &:before {
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index 04b22122f04..a442c8c3eef 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -195,3 +195,8 @@ $width-sidebar-flyout:           225px !default;
 // Stacking
 //--------------------------------------------------------------
 $z-index-navbar-flyout:          1000;
+
+// Characters
+//--------------------------------------------------------------
+$character-check:           "\f00c";
+$character-exclamation:     "\f12a";
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/prepend_icon.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/prepend_icon.scss
new file mode 100644
index 00000000000..901ecd2fbc3
--- /dev/null
+++ b/backend/app/assets/stylesheets/spree/backend/globals/mixins/prepend_icon.scss
@@ -0,0 +1,6 @@
+@mixin prepend-icon($character) {
+  &:before {
+    @extend .fa;
+    content: $character;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss
index fdafedb42a3..df4543bc7d4 100644
--- a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss
+++ b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss
@@ -5,6 +5,7 @@
 @import 'spree/backend/globals/variables';
 
 @import 'spree/backend/globals/mixins/caret';
+@import 'spree/backend/globals/mixins/prepend_icon';
 
 @import 'spree/backend/shared/typography';
 @import 'spree/backend/shared/tables';

From f3ad92f86d35519ea6cf97883c9e9d4ca6ac79b7 Mon Sep 17 00:00:00 2001
From: Sinetheta <k.attfield@gmail.com>
Date: Fri, 18 Dec 2015 15:57:02 -0800
Subject: [PATCH 3/3] Change success notice and error colors

New brand colors.
---
 .../stylesheets/spree/backend/globals/_variables.scss  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index a442c8c3eef..a4c3b0b4773 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -10,6 +10,10 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
 //--------------------------------------------------------------
 
 // Basic color palette for admin
+$apple:                          hsl(105, 48, 37) !default;
+$old-brick:                      hsl(5, 67, 36) !default;
+$pirate-gold:                    hsl(45, 100, 37) !default;
+
 $color-1:                        #FFFFFF !default;    // White
 $color-2:                        #9FC820 !default;    // Green
 $color-3:                        #5498DA !default;    // Light Blue
@@ -41,9 +45,9 @@ $color-navbar-submenu-bg:       very-light($color-navbar-bg, 4) !default;
 $color-navbar-text:             $color-1 !default;
 
 // Basic flash colors
-$color-success:                  $color-2 !default;
-$color-notice:                   $color-6 !default;
-$color-error:                    $color-5 !default;
+$color-success:                  $apple !default;
+$color-notice:                   $pirate-gold !default;
+$color-error:                    $old-brick !default;
 
 // Color for spinner
 $color-spinner: #fff;