From a00d76a73f2ae6cfb62be3c5bfce6a1b715af334 Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Tue, 31 Oct 2023 13:38:06 -0700
Subject: [PATCH 1/4] fix: Better alignment for Alert icons

---
 src/alert/alert.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index ccd00f5ef..9bf372ba7 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -35,7 +35,9 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
         >
             <Columns space="small" alignY="center">
                 <Column width="content">
-                    <AlertIcon tone={tone} className={styles.icon} />
+                    <Box display="flex" alignItems="center">
+                        <AlertIcon tone={tone} className={styles.icon} />
+                    </Box>
                 </Column>
                 <Column>
                     <Box

From a0408facbae5e02d913f0451d01dabcb9e52994b Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Tue, 31 Oct 2023 13:47:04 -0700
Subject: [PATCH 2/4] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f000c081..8138cfda0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc
 # Next
 
 -   [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip`
+-   [Fix] The center alignment between the `Alert` component's icon and message is now more accurate when the message is only one-line long.
 
 # v26.0.0
 

From ba2490961b90c454ef2db74c26fc202433cc7a1d Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Wed, 23 Oct 2024 16:29:44 -0700
Subject: [PATCH 3/4] Use IconButton in Alert

---
 src/alert/alert.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index 9bf372ba7..cbb1eff18 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { getClassNames } from '../utils/responsive-props'
 import { Box } from '../box'
-import { Button } from '../button'
+import { IconButton } from '../button'
 import { Columns, Column } from '../columns'
 
 import { AlertIcon } from '../icons/alert-icon'
@@ -49,7 +49,7 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
                 </Column>
                 {onClose != null && closeLabel != null ? (
                     <Column width="content">
-                        <Button
+                        <IconButton
                             variant="quaternary"
                             size="small"
                             onClick={onClose}

From f7ac71ef6cea4fe308a56a12d673699070b0a820 Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Wed, 23 Oct 2024 16:36:15 -0700
Subject: [PATCH 4/4] Fix alignment when close button is not present

---
 src/alert/alert.module.css | 9 ++++++++-
 src/alert/alert.tsx        | 7 ++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css
index d5b95121a..926df0f82 100644
--- a/src/alert/alert.module.css
+++ b/src/alert/alert.module.css
@@ -3,8 +3,15 @@
     border-width: 1px;
     color: var(--reactist-content-primary);
     padding: var(--reactist-spacing-small);
+}
+
+.content {
     /* this is to make sure it always has the same minimum height, whether it has a close button or not */
-    min-height: calc(2 * var(--reactist-spacing-small) + var(--reactist-button-small-height) + 2px);
+    min-height: var(--reactist-button-small-height);
+}
+
+.icon {
+    display: block;
 }
 
 .tone-info {
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index cbb1eff18..bce2f8fc3 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -35,14 +35,15 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
         >
             <Columns space="small" alignY="center">
                 <Column width="content">
-                    <Box display="flex" alignItems="center">
-                        <AlertIcon tone={tone} className={styles.icon} />
-                    </Box>
+                    <AlertIcon tone={tone} className={styles.icon} />
                 </Column>
                 <Column>
                     <Box
                         paddingY="xsmall"
                         paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}
+                        display="flex"
+                        alignItems="center"
+                        className={styles.content}
                     >
                         {children}
                     </Box>