From 2b9aa5ac7ee8377839071ed96baf1c7c9f8e7c3d Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 7 Jun 2021 15:48:52 -0400
Subject: [PATCH] Flash message x icon visible (#992)

Closes #991
---
 .../icon-close-fleet-purple-16x16@2x.png      | Bin 0 -> 416 bytes
 assets/images/icon-close-white-16x16@2x.png   | Bin 0 -> 282 bytes
 .../FlashMessage/FlashMessage.jsx             |  14 +++++------
 .../flash_messages/FlashMessage/_styles.scss  |  23 ++++++++++++++++--
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 assets/images/icon-close-fleet-purple-16x16@2x.png
 create mode 100644 assets/images/icon-close-white-16x16@2x.png

diff --git a/assets/images/icon-close-fleet-purple-16x16@2x.png b/assets/images/icon-close-fleet-purple-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..106ac9e4688e7571179f7201b56e3fe5ccd76b89
GIT binary patch
literal 416
zcmV;R0bl-!P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0X0cPK~#7F?Ul=o
z!Y~kq$7TzlgWZ+3pncteJ0PV4r~m}q33ouy4-(J;4G=R%jtB}f85<-x_>&?h_IUn3
zegZ@yktd_L#(8`5tyOJ`uLn@N_d9x@fq->)-#D6VX!~X6nEX$^R#dF!5~272i#k3Z
zV6t?Hi9sfw=Kb6c&>Fx~zxt{$Q4lY3fKUSlASqYgHbIEnIqm}ky9O+a&bEm`<zZC1
znXd^(y!A8wOyM2_RVHd!go?X38KjBZNk!r=R*uAkkGPBXgEQePZmHUaCEk=aRGVSi
zD7;31TJ6^vFT3NR21MckCPY)f?Q<OSR;h#V*mgO>#q$LxIjn*V_?&Q|CfF%J@t#E7
z@`rWAbPR#P>o%;~=Y)yy+b}cdWILNgddL(^ocm#p1R{~hD{}&pxU|)B0Wfm_0000<
KMNUMnLSTY@x~d8Q

literal 0
HcmV?d00001

diff --git a/assets/images/icon-close-white-16x16@2x.png b/assets/images/icon-close-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..999954108d7d6f8aed7de179330d7c0dfa3b8a8e
GIT binary patch
literal 282
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?2=RS;(M3{v?36l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjzuwcuF{Fa=?KDTOBL*C<seUu0kIeqgVR>l2
zh>?Qv!oc8my_yHBw*KEL!W%eA#h=aL<<%<Ly{i_k@7m`ScZ^xZyHijv^GWI+)-6Jl
zKTK}k^Cj)roK-ybiMJe;1;y4)<lqnYIMObyIzuVa!$7ifqO8UGx5Xb1dtMPXR<dz>
zq%<c{B5ZqmcXg6Vf`pNx(2u)qmp`-~S$lhesO^2B=-V55)?WZhI6u1l+<t<J=O_Mq
YZ2R763tpZ73g~nOPgg&ebxsLQ0Q{?FSO5S3

literal 0
HcmV?d00001

diff --git a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
index eb54aeeff9..3cf9452840 100644
--- a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
+++ b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
@@ -41,13 +41,13 @@ const FlashMessage = ({
         )}
       </div>
       <div className={`${baseClass}__action`}>
-        <Button
-          className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
-          variant="unstyled"
-          onClick={onRemoveFlash}
-        >
-          <FleetIcon name="x" />
-        </Button>
+        <div className={`${baseClass}__ex`}>
+          <Button
+            className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
+            variant="unstyled"
+            onClick={onRemoveFlash}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
index f2b62259e0..122d89f3ad 100644
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -43,10 +43,11 @@
     span {
       margin-left: 15px;
       margin-right: 15px;
+      font-size: $small;
     }
 
     .fleeticon {
-      font-size: $large;
+      font-size: $small;
     }
   }
 
@@ -63,15 +64,33 @@
     cursor: pointer;
     text-align: center;
     margin-left: 15px;
+    height: 37px;
 
     .fleeticon {
       transition: color 150ms ease-in-out;
       color: $core-fleet-blue;
-      font-size: $large;
+      font-size: $small;
 
       &:hover {
         color: $core-white;
       }
     }
   }
+
+  &__ex {
+    text-decoration: none;
+
+    .button::after {
+      content: url("../assets/images/icon-close-white-16x16@2x.png");
+      transform: scale(0.5);
+      border-radius: 0px;
+      z-index: 4;
+    }
+
+    .button:hover::after {
+      content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png");
+      transform: scale(0.5);
+      border-radius: 0px;
+    }
+  }
 }