fix(Alerts): Use Icon for close button instead of times symbol

[fixes #131832253] Signed-off-by: Ryan Dy <rdy@pivotal.io>
pivotal-cf · Oct 7, 2016 · 2593a77 · 2593a77
1 parent e5e22bf
commit 2593a77
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git 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
@@ -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;