From a396d5dcb8801815c7407ef13e19b3e368cad956 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Thu, 28 Oct 2021 15:18:29 -0600
Subject: [PATCH] Updating Notification to play nicely with the new IconButton
 styles

---
 .../notifications/NotificationItem.tsx        | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/lib/ui/src/components/notifications/NotificationItem.tsx b/lib/ui/src/components/notifications/NotificationItem.tsx
index 6fe48a7796bc..9362da68e38b 100644
--- a/lib/ui/src/components/notifications/NotificationItem.tsx
+++ b/lib/ui/src/components/notifications/NotificationItem.tsx
@@ -13,6 +13,7 @@ const Notification = styled.div(({ theme }) => ({
   padding: 15,
   width: 280,
   borderRadius: 4,
+  alignItems: 'center',
 
   background:
     theme.base === 'light'
@@ -98,25 +99,23 @@ const ItemContent: FunctionComponent<Pick<State['notifications'][0], 'icon' | 'c
 );
 
 const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
-  height: '100%',
-  display: 'flex',
+  alignSelf: 'center',
+  marginTop: 0,
   color: theme.base === 'light' ? 'rgba(255,255,255,0.7)' : ' #999999',
 }));
 
 const DismissNotificationItem: FunctionComponent<{
   onDismiss: () => void;
 }> = ({ onDismiss }) => (
-  <div>
-    <DismissButtonWrapper
-      title="Dismiss notification"
-      onClick={(e: SyntheticEvent) => {
-        e.preventDefault();
-        onDismiss();
-      }}
-    >
-      <Icons icon="closeAlt" height={12} width={12} />
-    </DismissButtonWrapper>
-  </div>
+  <DismissButtonWrapper
+    title="Dismiss notification"
+    onClick={(e: SyntheticEvent) => {
+      e.preventDefault();
+      onDismiss();
+    }}
+  >
+    <Icons icon="closeAlt" height={12} width={12} />
+  </DismissButtonWrapper>
 );
 
 export const NotificationItemSpacer = styled.div({