From 2593a7715040473ede29de5b1ced800cfbb5474f Mon Sep 17 00:00:00 2001
From: Charles Hansen <chansen@pivotal.io>
Date: Fri, 7 Oct 2016 13:55:32 -0700
Subject: [PATCH] fix(Alerts): Use Icon for close button instead of times
 symbol

[fixes #131832253]

Signed-off-by: Ryan Dy <rdy@pivotal.io>
---
 library/src/pivotal-ui-react/alerts/alerts.js        | 2 +-
 library/src/pivotal-ui/components/alerts/alerts.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/library/src/pivotal-ui-react/alerts/alerts.js b/library/src/pivotal-ui-react/alerts/alerts.js
index 0516fa093..dcf8badea 100644
--- a/library/src/pivotal-ui-react/alerts/alerts.js
+++ b/library/src/pivotal-ui-react/alerts/alerts.js
@@ -56,9 +56,9 @@ class Alert extends React.Component{
     }
     return (
       <div {...props}>
-        {dismissable && <button type="button" className="close" aria-hidden={true} onClick={this.handleAlertDismiss}><span>&times;</span></button>}
         {children}
         {dismissable && <button type="button" className="close sr-only">{closeLabel}</button>}
+        {dismissable && <button type="button" className="close" aria-hidden={true} onClick={this.handleAlertDismiss}><Icon src="close"/></button>}
       </div>
     );
 
diff --git a/library/src/pivotal-ui/components/alerts/alerts.scss b/library/src/pivotal-ui/components/alerts/alerts.scss
index 401495e02..e1c9c5221 100644
--- a/library/src/pivotal-ui/components/alerts/alerts.scss
+++ b/library/src/pivotal-ui/components/alerts/alerts.scss
@@ -5,6 +5,10 @@
   border: none;
   margin: 0;
 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
   a.alert-link {
     color: inherit;
     text-decoration: underline;