From 5fee4965c415c3b5b23b6e06a400f59e4fc6ad80 Mon Sep 17 00:00:00 2001
From: Ricardo Amaral <ricardo@doist.com>
Date: Mon, 11 Nov 2024 11:17:01 +0000
Subject: [PATCH] fix: Better icon alignment for the `Notice` component (#848)

---
 CHANGELOG.md                 | 4 ++++
 src/notice/notice.module.css | 8 ++++++++
 src/notice/notice.tsx        | 6 ++++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6940a9b16..5c9730bdc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# NEXT
+
+-   [Fix] Vertically align the `Notice` component's icon with the first line of text
+
 # 26.2.1
 
 -   [Fix] Export `TooltipProvider` as a component
diff --git a/src/notice/notice.module.css b/src/notice/notice.module.css
index d4d39c514..8fd122e62 100644
--- a/src/notice/notice.module.css
+++ b/src/notice/notice.module.css
@@ -2,6 +2,14 @@
     color: var(--reactist-content-primary);
 }
 
+.content {
+    padding-top: calc(var(--reactist-spacing-xsmall) / 2);
+}
+
+.icon svg {
+    display: block;
+}
+
 .tone-info svg {
     color: var(--reactist-alert-tone-info-icon);
 }
diff --git a/src/notice/notice.tsx b/src/notice/notice.tsx
index 6a9548f96..dff0cd523 100644
--- a/src/notice/notice.tsx
+++ b/src/notice/notice.tsx
@@ -24,10 +24,12 @@ function Notice({ id, children, tone }: NoticeProps) {
         >
             <Columns space="small" alignY="top">
                 <Column width="content">
-                    <AlertIcon tone={tone} />
+                    <Box className={styles.icon}>
+                        <AlertIcon tone={tone} />
+                    </Box>
                 </Column>
                 <Column>
-                    <Box paddingY="xsmall">{children}</Box>
+                    <Box className={styles.content}>{children}</Box>
                 </Column>
             </Columns>
         </Box>