From f8fff4c49b8333a66a240d006a1acdd6a12c1e03 Mon Sep 17 00:00:00 2001
From: jeroenransijn <jssrdesign@gmail.com>
Date: Mon, 9 Jul 2018 17:01:31 -0700
Subject: [PATCH] alert improvements

---
 src/alert/src/Alert.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/alert/src/Alert.js b/src/alert/src/Alert.js
index a2c97ae48..53404f818 100644
--- a/src/alert/src/Alert.js
+++ b/src/alert/src/Alert.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { spacing, dimensions, position, layout } from 'ui-box'
 import { withTheme } from '../../theme'
 import { Pane } from '../../layers'
-import { Text } from '../../typography'
+import { Heading, Paragraph } from '../../typography'
 import { IconButton } from '../../buttons'
 import { Icon } from '../../icon'
 
@@ -122,14 +122,14 @@ class Alert extends PureComponent {
               marginLeft={2}
               height={14}
               display="block"
-              marginTop={3}
+              marginTop={2}
             >
               {this.getIconForIntent(intent)}
             </Pane>
           )}
         <Pane display="flex" width="100%">
           <Pane flex={1}>
-            <Text
+            <Heading
               is="h4"
               fontWeight={600}
               size={400}
@@ -137,17 +137,23 @@ class Alert extends PureComponent {
               marginBottom={0}
             >
               {title}
-            </Text>
+            </Heading>
             {typeof children === 'string' ? (
-              <Text size={400} color="muted">
+              <Paragraph size={400} color="muted">
                 {children}
-              </Text>
+              </Paragraph>
             ) : (
               children
             )}
           </Pane>
           {isRemoveable && (
-            <Pane marginLeft={24} flexShrink={0}>
+            <Pane
+              marginLeft={24}
+              flexShrink={0}
+              marginBottom={-2}
+              marginTop={-2}
+              marginRight={-2}
+            >
               <IconButton
                 icon="cross"
                 appearance="minimal"