From 3ed6573ff349eddfb32ee4b1393e5b0ae9cf3dd1 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 18 Jun 2021 14:54:50 -0400
Subject: [PATCH] Update flash message styling (#1140)

---
 .../flash_messages/FlashMessage/_styles.scss  | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
index 122d89f3ad..1ce439056b 100644
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -9,20 +9,22 @@
 }
 
 .flash-message {
-  @include position(absolute, 0 0 null 0);
+  @include position(fixed);
+  top: 80px;
+  left: 50%;
+  transform: translate(-50%, 0);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $core-white;
-  padding: $pad-small;
+  color: $core-fleet-blue;
+  padding: 0 $pad-small 0 $pad-medium;
   z-index: 3;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  background-color: #3d4758;
-  min-width: $min-width;
-
-  &--full-width {
-    left: 0;
-  }
+  background-color: $core-white;
+  margin: auto;
+  border: 1px solid $ui-fleet-blue-15;
+  box-sizing: border-box;
+  box-shadow: 0px 7px 3px -5px rgba(25, 33, 71, 0.1);
+  border-radius: 8px;
 
   &--success {
     .fleeticon {
@@ -52,7 +54,7 @@
   }
 
   &__undo {
-    color: $core-white;
+    color: $core-vibrant-blue;
     cursor: pointer;
     font-size: $small;
     text-decoration: underline;
@@ -81,7 +83,7 @@
     text-decoration: none;
 
     .button::after {
-      content: url("../assets/images/icon-close-white-16x16@2x.png");
+      content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png");
       transform: scale(0.5);
       border-radius: 0px;
       z-index: 4;