fix: Better icon alignment for the Notice component (#848)

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

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);
 }

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>